Change pie chart slice colors?

1234
1
Jump to solution
09-16-2021 10:50 AM
KathleenHoenke
Occasional Contributor

I am creating a hub for aquatic barrier data, and I would like my pie chart to be color coded from green to red. Is it possible to change the pie slice colors within the chart?

 

Thank you!

0 Kudos
1 Solution

Accepted Solutions
Kevin_Peel
New Contributor II

Hi Kathleen,

Yes it is possible.

  • Once you selected the chart on the page, change the "Chart Type" to JSON.
  • Near the end of the JSON code, you can add the styles tag and then the colors option with the various colours in hex code.
  • In the example below, you will see the addition I made starting at line 31 to line 41.
  • Don't forget to add a comma like I did at line 30 or you'll will get an error.

 

 

{
  "type": "pie",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {
        "field": "Type",
        "label": "Type"
      },
      "value": {
        "field": "Number_of_SUM",
        "label": "Number of Students"
      }
    }
  ],
  /* Add in this style piece. You will want as many hex colours as items in your pie chart.  It colours the slices in the same order as they're listed */
  "style": {
    "colors": [
      "#f6eff7",
      "#dbc9e1",
      "#67a9cf",
      "#02818a",
      "#1c9099",
      "#016c59"
    ]
  }
}

 

 

*Edited to add some more clarity

View solution in original post

0 Kudos
1 Reply
Kevin_Peel
New Contributor II

Hi Kathleen,

Yes it is possible.

  • Once you selected the chart on the page, change the "Chart Type" to JSON.
  • Near the end of the JSON code, you can add the styles tag and then the colors option with the various colours in hex code.
  • In the example below, you will see the addition I made starting at line 31 to line 41.
  • Don't forget to add a comma like I did at line 30 or you'll will get an error.

 

 

{
  "type": "pie",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {
        "field": "Type",
        "label": "Type"
      },
      "value": {
        "field": "Number_of_SUM",
        "label": "Number of Students"
      }
    }
  ],
  /* Add in this style piece. You will want as many hex colours as items in your pie chart.  It colours the slices in the same order as they're listed */
  "style": {
    "colors": [
      "#f6eff7",
      "#dbc9e1",
      "#67a9cf",
      "#02818a",
      "#1c9099",
      "#016c59"
    ]
  }
}

 

 

*Edited to add some more clarity

0 Kudos