This post was originally published on March 23, 2011, and has been updated. The last previous update was August 8, 2022.
Charts in pop-ups provide a visual, meaningful, and easy to understand way to display numeric attribute information. You can add pie charts, bar charts, column charts, and line charts to pop-ups.
For an overview, see Pop-ups: the essentials. This blog tutorial focuses on using pop-up chart elements, covering the essentials to enable you to get started.
About the example map
The following sections use the Neighborhood Crime – Pop-up chart element examples map. Once you open the map, Sign In to save the map to your Content. You can also follow along without signing in. Each pop-up configuration is presented in a unique layer, with the layer name and title indicating how the pop-up has been configured.
Open the layer pane from the Contents (dark) toolbar, then toggle the visibility to show only the desired layer and select it. Click Pop-ups from the Settings (light) toolbar to see how the pop-up has been configured.
The sample data focuses on crime statistics by neighborhood. The map contains five layers that are described below.
Neighborhood Crime: Default (not configured)
The unconfigured layer that can be used to follow along in this tutorial. The pop-up uses a Fields list element to display a list of fields and values. Note how using charts can make this data much more understandable.
![Default fields list pop-up Default fields list pop-up](https://www.esri.com/arcgis-blog/wp-content/uploads/2024/03/puce-3.png)
Neighborhood Crime: Random colors
An example of the default random chart colors. The random colors can be changed. See sections below.
![Random colors in chart Random colors in chart](https://www.esri.com/arcgis-blog/wp-content/uploads/2024/03/puce-4.png)
Neighborhood Crime: Single color
This pop-up chart is configured with a single color. This may be a good option over using random colors since it avoids confusing color use when exploring features in the map.
![Single color chart Single color chart](https://www.esri.com/arcgis-blog/wp-content/uploads/2024/03/puce-5.png)
Neighborhood Crime: Predominant category matching color
This layer uses a predominant category color style. When the same fields are used for the chart, the colors will automatically match.
![Predominant category style matching colors Predominant category style matching colors](https://www.esri.com/arcgis-blog/wp-content/uploads/2024/03/puce-6.png)
Neighborhood Crime: Chart media group
An example using a chart media group. Multiple charts and multiple types of charts can be added to a media group. Navigation is horizontal, using the arrows in the bottom right to advance or go back.
![Media group Media group](https://www.esri.com/arcgis-blog/wp-content/uploads/2024/03/puce-7.png)
Note that by docking the pop-up, more of it can be seen (see docking section below).
Pop-up chart types
Pop-ups support bar charts, line charts, and pie charts.
Bar charts are best used to show data in discrete categories. Spaces between the elements separate the values. Bar charts can be oriented vertically or horizontally.
![Chart orientation Chart orientation](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-10s.png)
Line charts can be used to show change over time or a progression. A line chart implies an inherent order, progressing from left to right.
![Line chart Line chart](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-12.png)
Pie charts are effective for showing the parts of a whole. All the attributes shown in the pie should add up to 100 percent.
![Pie chart Pie chart](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-11.png)
Docking pop-ups
By default, pop-ups are undocked but can be docked to display more information. Click the Dock button in the upper right of the pop-up.
![Dock pop-up Dock pop-up](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-1.png)
Add chart elements to pop-ups
Pop-ups are composed of different elements that are added and configured. To configure layer pop-ups, select the layer in the Layer pane in the Contents (dark) toolbar. Next, click Pop-ups from the Settings (light) toolbar.
Step 1 – Open the sample map and Sign In. You can also follow along without signing in.
Step 2 – Select the Neighborhood Crime (unconfigured) layer.
![Select layer Select layer](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-14.png)
Step 3 – In the Settings (light) toolbar click Pop-ups.
![Configure pop-ups Configure pop-ups](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-4.png)
Step 4 – We will not need the default Fields list element, so it can be deleted. Click options (…), then Delete.
![Options Options](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-5.png)
Step 5 – To add a chart element, click Add content, then choose Chart.
![Add chart element Add chart element](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-6.png)
Step 6 – Configure the chart.
While each chart is different, the chart configuration pane is similar for each chart type. Bar charts are the default, but note that Line and Pie charts are options.
a – Choose a title, caption, and alternative text for the chart (optional).
b – Click Select fields.
![Configure chart Configure chart](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-7.png)
c – Choose the desired fields to populate the chart. In this example we will use the yearly count fields (2001 to 2010). A checkmark appears next to the selected field.
![Select fields Select fields](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-8.png)
Click Done when finished selecting fields. When finished configuring the chart, click Done again. Note that you can hover over chart fields to view the names and values.
![Chart hover text Chart hover text](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-16.png)
When you add charts to pop-ups, the appearance and default color scheme are determined by the chart type, how you configure the chart, and the layer’s smart mapping style.
Random colors are used in charts except when a predominant category style is used. With predominant category styles, the chart color will match the style colors if the same fields are chosen for the chart. Colors can be edited for all chart types regardless of layer style.
Step 7 – Change colors by changing the color ramp, or by changing individual field colors.
![Change chart field colors Change chart field colors](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-17s.png)
Step 8 – Add a media group by adding additional chart (or image) elements. Click the blue circle with + to add another media element. This will create a media group.
![Add media Add media](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-18.png)
Step 8 – You can Chart or Image elements to a media group. Choose Chart to configure and add a different type of chart or a chart showing different fields.
![Chart media Chart media](https://www.esri.com/arcgis-blog/wp-content/uploads/2020/06/chart-10.png)
Examine the media group in the sample map to view an example of three charts, bar, line, and pie, which can be viewed by using the arrows for navigating the media group.
![Media group Media group](https://www.esri.com/arcgis-blog/wp-content/uploads/2022/08/chart-20.png)
More information
For more information, see the following:
- Configure pop-ups (Help)
- View pop-ups (Help)
- Pop-ups: the essentials (Blog)
Commenting is not enabled for this article.