Charts | ArcGIS Maps SDK for JavaScript

Educational attainment by census tract visualized using a pie chart style.

What is a chart style?

A chart style visualizes two or more numeric attributes as a chart for each feature in a layer. You can use this style to visualize any variable with sub-categories such as the following:

Votes earned per candidate in an election
Languages spoken in the home
Race and ethnicity

How chart styles work

The pie chart style is configured with a PieChartRenderer. Currently, this is the only chart-based renderer available. A pie chart renderer requires a list of attributes (minimum of two) that match a color with a data value returned from a field or Arcade expression.


31 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Esri Developer Guide: Donut chart with size</title>
8

9
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
10
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
11
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
12

13
    <style>
14
      html,
15
      body,
16
      #viewDiv {
17
        height: 100%;
18
        margin: 0;
19
      }
20
    </style>
21

22
    <script type="module">
23
      const [WebMap, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
24
        "@arcgis/core/WebMap.js",
25
        "@arcgis/core/views/MapView.js",
26
        "@arcgis/core/layers/FeatureLayer.js",
27
        "@arcgis/core/widgets/Legend.js",
28
        "@arcgis/core/widgets/Expand.js",
29
      ]);
30

31

32
      const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
33
      const renderer = {
34
        type: "pie-chart",
35
        othersCategory: {
36
          threshold: 0.05,
37
          color: "gray",
38
        },
39
        attributes: [
40
          {
41
            field: "GRADDEG_CY",
42
            label: "Master's degree or higher",
43
            color: colors[0],
44
          },
45
          {
46
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
47
            label: "Undergraduate degree",
48
            color: colors[1],
49
          },
50
          {
51
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
52
            label: "High school degree",
53
            color: colors[2],
54
          },
55
          {
56
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
57
            label: "No high school",
58
            color: colors[3],
59
          },
60
        ],
61
        size: 18,
62
      };
58 collapsed lines
63

64

65
      const layer = new FeatureLayer({
66
        title: "Educational attainment",
67
        portalItem: {
68
          id: "1cbb0faa0f1f424bbe213bfae9319309",
69
        },
70
        renderer,
71
        popupTemplate: {
72
          title: "{COUNTY}, {STATE}",
73
          content:
74
            "{expression/percent-educated} of the adults in this tract have a college degree.",
75
          expressionInfos: [
76
            {
77
              name: "percent-educated",
78
              title: "Percent college educated",
79
              expression: `
80
                  var collegeEducated = $feature.GRADDEG_CY + $feature.BACHDEG_CY + $feature.ASSCDEG_CY;
81
                  return ROUND(((collegeEducated/$feature.EDUCBASECY)*100),2)+ '%'`,
82
            },
83
          ],
84
        },
85
      });
86

87
      const map = new WebMap({
88
        portalItem: {
89
          id: "9cf503b654144873a8e33f996f91ba1d",
90
        },
91
        layers: [layer],
92
      });
93

94
      const view = new MapView({
95
        container: "viewDiv",
96
        map: map,
97
        scale: 120000,
98
        center: [-112.0247, 33.4734],
99
        constraints: {
100
          snapToZoom: false,
101
        },
102
      });
103

104
      view.ui.add(
105
        new Expand({
106
          content: new Legend({
107
            view: view,
108
          }),
109
          view: view,
110
          expanded: false,
111
        }),
112
        "top-right",
113
      );
114
    </script>
115
  </head>
116

117
  <body>
118
    <div id="viewDiv"></div>
119
  </body>
120
</html>

The resulting renderer will use the color of each attribute to create a slice proportional to the value returned from the field or expression. The othersCategory defines a color used to shade wedges smaller than a given threshold. This helps consolidate small wedges that are otherwise too small to read.

Examples

Pie charts

The following example demonstrates how to create a pie chart style where all charts have a consistent size for each feature. Generally, you should try to avoid creating charts that overlap. The size used in this example works well for the starting view scale, but is less successful at other scales. You should make larger charts as you zoom in to large scales and smaller charts as you zoom to small scales.


31 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Esri Developer Guide: Donut chart with size</title>
8

9
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
10
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
11
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
12

13
    <style>
14
      html,
15
      body,
16
      #viewDiv {
17
        height: 100%;
18
        margin: 0;
19
      }
20
    </style>
21

22
    <script type="module">
23
      const [WebMap, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
24
        "@arcgis/core/WebMap.js",
25
        "@arcgis/core/views/MapView.js",
26
        "@arcgis/core/layers/FeatureLayer.js",
27
        "@arcgis/core/widgets/Legend.js",
28
        "@arcgis/core/widgets/Expand.js",
29
      ]);
30

31

32
      const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
33
      const renderer = {
34
        type: "pie-chart",
35
        othersCategory: {
36
          threshold: 0.05,
37
          color: "gray",
38
        },
39
        attributes: [
40
          {
41
            field: "GRADDEG_CY",
42
            label: "Master's degree or higher",
43
            color: colors[0],
44
          },
45
          {
46
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
47
            label: "Undergraduate degree",
48
            color: colors[1],
49
          },
50
          {
51
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
52
            label: "High school degree",
53
            color: colors[2],
54
          },
55
          {
56
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
57
            label: "No high school",
58
            color: colors[3],
59
          },
60
        ],
61
        size: 18,
62
      };
58 collapsed lines
63

64

65
      const layer = new FeatureLayer({
66
        title: "Educational attainment",
67
        portalItem: {
68
          id: "1cbb0faa0f1f424bbe213bfae9319309",
69
        },
70
        renderer,
71
        popupTemplate: {
72
          title: "{COUNTY}, {STATE}",
73
          content:
74
            "{expression/percent-educated} of the adults in this tract have a college degree.",
75
          expressionInfos: [
76
            {
77
              name: "percent-educated",
78
              title: "Percent college educated",
79
              expression: `
80
                  var collegeEducated = $feature.GRADDEG_CY + $feature.BACHDEG_CY + $feature.ASSCDEG_CY;
81
                  return ROUND(((collegeEducated/$feature.EDUCBASECY)*100),2)+ '%'`,
82
            },
83
          ],
84
        },
85
      });
86

87
      const map = new WebMap({
88
        portalItem: {
89
          id: "9cf503b654144873a8e33f996f91ba1d",
90
        },
91
        layers: [layer],
92
      });
93

94
      const view = new MapView({
95
        container: "viewDiv",
96
        map: map,
97
        scale: 120000,
98
        center: [-112.0247, 33.4734],
99
        constraints: {
100
          snapToZoom: false,
101
        },
102
      });
103

104
      view.ui.add(
105
        new Expand({
106
          content: new Legend({
107
            view: view,
108
          }),
109
          view: view,
110
          expanded: false,
111
        }),
112
        "top-right",
113
      );
114
    </script>
115
  </head>
116

117
  <body>
118
    <div id="viewDiv"></div>
119
  </body>
120
</html>

Pie charts with size

Varying pie chart sizes by the total or sum of all categories helps provide meaningful perspective to the map. Some patterns that emerge in pie chart styles may not be important if they represent very small populations. On the other hand, areas with large populations become more prominent when properly sized.

To vary pie charts by size, create a size variable using an Arcade expression that returns the sum of all categories considered in the pie chart’s attributes.


65 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Esri Developer Guide: Donut chart with size</title>
8

9
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
10
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
11
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
12

13
    <style>
14
      html,
15
      body,
16
      #viewDiv {
17
        height: 100%;
18
        margin: 0;
19
      }
20
    </style>
21

22
    <script type="module">
23
      const [WebMap, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
24
        "@arcgis/core/WebMap.js",
25
        "@arcgis/core/views/MapView.js",
26
        "@arcgis/core/layers/FeatureLayer.js",
27
        "@arcgis/core/widgets/Legend.js",
28
        "@arcgis/core/widgets/Expand.js",
29
      ]);
30

31

32
      const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
33
      const renderer = {
34
        type: "pie-chart",
35
        othersCategory: {
36
          threshold: 0.05,
37
          color: "gray",
38
        },
39
        attributes: [
40
          {
41
            field: "GRADDEG_CY",
42
            label: "Master's degree or higher",
43
            color: colors[0],
44
          },
45
          {
46
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
47
            label: "Undergraduate degree",
48
            color: colors[1],
49
          },
50
          {
51
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
52
            label: "High school degree",
53
            color: colors[2],
54
          },
55
          {
56
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
57
            label: "No high school",
58
            color: colors[3],
59
          },
60
        ],
61
        size: 18,
62
      };
63

64

65

66
      renderer.visualVariables = [
67
        {
68
          type: "size",
69
          valueExpression: `
70
            var all = [
71
              $feature.NOHS_CY, $feature.SOMEHS_CY, $feature.HSGRAD_CY,
72
              $feature.GED_CY, $feature.SMCOLL_CY, $feature.ASSCDEG_CY,
73
              $feature.BACHDEG_CY, $feature.GRADDEG_CY
74
            ];
75
            var total = Sum(all);
76
            return total;
77
          `,
78
          valueExpressionTitle: "Population 25+",
79
          minSize: "2px",
80
          maxSize: "48px",
81
          minDataValue: 1000,
82
          maxDataValue: 15000,
83
        },
84
      ];
58 collapsed lines
85

86

87
      const layer = new FeatureLayer({
88
        title: "Educational attainment",
89
        portalItem: {
90
          id: "1cbb0faa0f1f424bbe213bfae9319309",
91
        },
92
        renderer,
93
        popupTemplate: {
94
          title: "{COUNTY}, {STATE}",
95
          content:
96
            "{expression/percent-educated} of the adults in this tract have a college degree.",
97
          expressionInfos: [
98
            {
99
              name: "percent-educated",
100
              title: "Percent college educated",
101
              expression: `
102
                  var collegeEducated = $feature.GRADDEG_CY + $feature.BACHDEG_CY + $feature.ASSCDEG_CY;
103
                  return ROUND(((collegeEducated/$feature.EDUCBASECY)*100),2)+ '%'`,
104
            },
105
          ],
106
        },
107
      });
108

109
      const map = new WebMap({
110
        portalItem: {
111
          id: "9cf503b654144873a8e33f996f91ba1d",
112
        },
113
        layers: [layer],
114
      });
115

116
      const view = new MapView({
117
        container: "viewDiv",
118
        map: map,
119
        scale: 778263,
120
        center: [-112.0247, 33.4734],
121
        constraints: {
122
          snapToZoom: false,
123
        },
124
      });
125

126
      view.ui.add(
127
        new Expand({
128
          content: new Legend({
129
            view: view,
130
          }),
131
          view: view,
132
          expanded: false,
133
        }),
134
        "top-right",
135
      );
136
    </script>
137
  </head>
138

139
  <body>
140
    <div id="viewDiv"></div>
141
  </body>
142
</html>

Donut charts

Some people prefer to represent pie charts in a donut shape. This is easily configured by setting the holePercentage property of the PieChartRenderer. A value of zero indicates no hole (i.e. a pie), and any value greater than zero creates a hole by a fixed percentage of the pie. For example, a holePercentage of 0.5 removes 50% of the pie.

This can make pie charts look more modern and provide a space to place a number label if desired.


31 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6

7
    <title>Esri Developer Guide: Donut chart with size</title>
8

9
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
10
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
11
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
12

13
    <style>
14
      html,
15
      body,
16
      #viewDiv {
17
        height: 100%;
18
        margin: 0;
19
      }
20
    </style>
21

22
    <script type="module">
23
      const [WebMap, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
24
        "@arcgis/core/WebMap.js",
25
        "@arcgis/core/views/MapView.js",
26
        "@arcgis/core/layers/FeatureLayer.js",
27
        "@arcgis/core/widgets/Legend.js",
28
        "@arcgis/core/widgets/Expand.js",
29
      ]);
30

31

32
      const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
33
      const renderer = {
34
        type: "pie-chart",
35

36
        holePercentage: 0.5,
37

38
        othersCategory: {
39
          threshold: 0.05,
40
          color: "gray",
41
        },
42
        attributes: [
43
          {
44
            field: "GRADDEG_CY",
45
            label: "Master's degree or higher",
46
            color: colors[0],
47
          },
48
          {
49
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
50
            label: "Undergraduate degree",
51
            color: colors[1],
52
          },
53
          {
54
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
55
            label: "High school degree",
56
            color: colors[2],
57
          },
58
          {
59
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
60
            label: "No high school",
61
            color: colors[3],
62
          },
63
        ],
64
        size: 18,
65
      };
80 collapsed lines
66

67

68

69
      renderer.visualVariables = [
70
        {
71
          type: "size",
72
          valueExpression: `
73
            var all = [
74
              $feature.NOHS_CY, $feature.SOMEHS_CY, $feature.HSGRAD_CY,
75
              $feature.GED_CY, $feature.SMCOLL_CY, $feature.ASSCDEG_CY,
76
              $feature.BACHDEG_CY, $feature.GRADDEG_CY
77
            ];
78
            var total = Sum(all);
79
            return total;
80
          `,
81
          valueExpressionTitle: "Population 25+",
82
          minSize: "2px",
83
          maxSize: "48px",
84
          minDataValue: 1000,
85
          maxDataValue: 15000,
86
        },
87
      ];
88

89

90
      const layer = new FeatureLayer({
91
        title: "Educational attainment",
92
        portalItem: {
93
          id: "1cbb0faa0f1f424bbe213bfae9319309",
94
        },
95
        renderer,
96
        popupTemplate: {
97
          title: "{COUNTY}, {STATE}",
98
          content:
99
            "{expression/percent-educated} of the adults in this tract have a college degree.",
100
          expressionInfos: [
101
            {
102
              name: "percent-educated",
103
              title: "Percent college educated",
104
              expression: `
105
                  var collegeEducated = $feature.GRADDEG_CY + $feature.BACHDEG_CY + $feature.ASSCDEG_CY;
106
                  return ROUND(((collegeEducated/$feature.EDUCBASECY)*100),2)+ '%'`,
107
            },
108
          ],
109
        },
110
      });
111

112
      const map = new WebMap({
113
        portalItem: {
114
          id: "9cf503b654144873a8e33f996f91ba1d",
115
        },
116
        layers: [layer],
117
      });
118

119
      const view = new MapView({
120
        container: "viewDiv",
121
        map: map,
122
        scale: 778263,
123
        center: [-112.0247, 33.4734],
124
        constraints: {
125
          snapToZoom: false,
126
        },
127
      });
128

129
      view.ui.add(
130
        new Expand({
131
          content: new Legend({
132
            view: view,
133
          }),
134
          view: view,
135
          expanded: false,
136
        }),
137
        "top-right",
138
      );
139
    </script>
140
  </head>
141

142
  <body>
143
    <div id="viewDiv"></div>
144
  </body>
145
</html>

Pie charts

Sample Code

Clustering

Overview

API support

	3D	Lines	Polygons	Mesh
Unique types
Class breaks
Visual variables				¹
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping	²	³	³	³

Full SupportPartial SupportNo Support

Color only
Size variable creators only supported for points
Size variable creators not supported in 3D

Data-driven stylesDot density Data-driven stylesRelationship

What is a chart style?

How chart styles work

Examples

Pie charts

Pie charts with size

Donut charts

Related samples and resources

Pie charts

Clustering

API support