ArcGIS Online

Pop-ups: chart element essentials

Charts in pop-ups provide a visual and meaningful way to display numeric attribute information. You can add pie charts, bar charts, column charts, and line 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.

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.

Pie charts are effective for showing the parts of a whole. All the attributes shown in the pie should add up to 100 percent.

Chart elements (and image elements) are a type of media element. They can be arranged vertically or arranged horizontally in a media group. 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


About this tutorial

In this tutorial, you will learn how to configure bar, line, and pie charts in pop-ups. Open the completed sample map to view the configured pop-up charts. Click any feature to view the bar, line, and pie charts. The sample data focuses on crime statistics by neighborhood.

Note that the bar, horizontal bar, and line charts are in a media group. Use the arrows on the left and right of the chart in the group to advance to the next chart. The pie chart displays below the media group.

The map contains two layers, one is unconfigured and you can use it to follow along in this tutorial. The other layer is configured with the charts described below.


Add chart elements to pop-ups

Step 1 – Open the sample map and Sign In. You can also follow along without signing in.

Step 2 – Open the Layers pane in the Contents (dark) toolbar. Hide the Neighborhood Crime Totals (charts) layer and show the Neighborhood Crime Totals (unconfigured) layer.

Layers pane

Step 3 – Ensure that the unconfigured layer is selected. In the Settings (light) toolbar click Configure pop-ups.

Configure pop-ups

Step 4 – We will not need the default Fields list element, so it can be deleted. Click options (…), then Delete.


Step 5 – Add a chart element. Click Add content, then choose Chart.

Add chart element

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 are also options.

a – Choose a title, caption, and alternative text for the chart (optional).

b – Click Select fields.

Configure chart

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

Click Done when finished selecting fields. When finished configuring the chart, click Done again.

Step 7 – Add a horizontal bar chart to create a media group. Click the blue circle with + to add another media element. This will create a media group.


Add media

Step 7 – Choose Chart.

Chart media

Step 8 – Choose the same fields as you did in Step 6 above. When finished click Done, then scroll to the bottom and set the orientation to Horizontal. When finished, click Done again.

Horizontal orientation

Step 9 – Repeat again (starting at Step 7), but choose a Line chart.

Line chart

Step 10 – Complete the chart configuration using the same yearly total fields (2001-2010).

The media group you have just created contains three charts: vertical bar, horizontal bar, and line. Hover over the chart to learn more about the data. Click the arrows on the left and right side of the media group to advance to the next chart.

Chart media group
View larger image

Step 11 – Add a pie chart below the media group you just created.

Click Add content, then select Chart.

Add chart

Step 12 – Select Pie as the chart type, then click Select fields.

Configure pie chart

Step 13 – Select the fields that total the types of crimes: Theft, Assault, Battery, and so on. Make sure to include All Other Crimes. Click Done when finished.

Select fields

Step 14 – Complete the chart configuration by adding an optional title and description. Click Done when finished.

The pie chart appears below the media group created above and shows the various crime types. Hover over a pie slice to get more information about the data.

Pie chart


More information

For more information, see the following:


This post was originally published on March 23, 2011, and has been updated.


About the author

Corporate technology evangelist and advocate at Esri, focusing on ways to broaden access to geographic information and helping customers succeed with the ArcGIS system. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email


Next Article

Get Ready for ArcGIS Pro 3.0

Read this article