Charts

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.

Expand
Use dark colors for code blocksCopy
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
        const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
        const renderer = {
          type: "pie-chart",
          othersCategory: {
            threshold: 0.05,
            color: "gray"
          },
          attributes: [
          {
              field: "GRADDEG_CY",
              label: "Master's degree or higher",
              color: colors[0]
            }, {
              valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
              label: "Undergraduate degree",
              color: colors[1]
            }, {
              valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
              label: "High school degree",
              color: colors[2]
            }, {
              valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
              label: "No high school",
              color: colors[3]
            }
          ],
          size: 18
        };
Expand

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.

Expand
Use dark colors for code blocksCopy
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
        const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
        const renderer = {
          type: "pie-chart",
          othersCategory: {
            threshold: 0.05,
            color: "gray"
          },
          attributes: [
          {
              field: "GRADDEG_CY",
              label: "Master's degree or higher",
              color: colors[0]
            }, {
              valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
              label: "Undergraduate degree",
              color: colors[1]
            }, {
              valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
              label: "High school degree",
              color: colors[2]
            }, {
              valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
              label: "No high school",
              color: colors[3]
            }
          ],
          size: 18
        };
Expand

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.

Expand
Use dark colors for code blocksCopy
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
        renderer.visualVariables = [{
          type: "size",
          valueExpression: `
            var all = [
              $feature.NOHS_CY, $feature.SOMEHS_CY, $feature.HSGRAD_CY,
              $feature.GED_CY, $feature.SMCOLL_CY, $feature.ASSCDEG_CY,
              $feature.BACHDEG_CY, $feature.GRADDEG_CY
            ];
            var total = Sum(all);
            return total;
          `,
          valueExpressionTitle: "Population 25+",
          minSize: "2px",
          maxSize: "48px",
          minDataValue: 1000,
          maxDataValue: 15000
        }];
Expand

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.

Expand
Use dark colors for code blocksCopy
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
        const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
        const renderer = {
          type: "pie-chart",

          holePercentage: 0.5,

          othersCategory: {
            threshold: 0.05,
            color: "gray"
          },
          attributes: [
          {
              field: "GRADDEG_CY",
              label: "Master's degree or higher",
              color: colors[0]
            }, {
              valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
              label: "Undergraduate degree",
              color: colors[1]
            }, {
              valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
              label: "High school degree",
              color: colors[2]
            }, {
              valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
              label: "No high school",
              color: colors[3]
            }
          ],
          size: 18
        };
Expand

API support

2D3DArcadePointsLinesPolygonsMesh
Unique types
Class breaks
Visual variables1
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping2333
Full supportPartial supportNo support
  • 1. Color only
  • 2. Size variable creators only supported for points
  • 3. Size variable creators not supported in 3D

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.