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 three layers:

Neighborhood Crime Totals (unconfigured)
The unconfigured layer that can be used to follow along in this tutorial.

Neighborhood Crime Totals (charts)
This layer is styled using Counts and Amounts (color). The charts all use a single color (orange).

Neighborhood Crime Totals (charts with colors)
This layer is styled using multiple fields using the Predominant Category style. Because the charts use the same fields, they automatically mirror the colors seen in the map.


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 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 8 – Choose Chart.

Chart media

Step 9 – 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 10 – Repeat again (starting at Step 7), but choose a Line chart.

Line chart

Step 11 – 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 12 – Add a pie chart below the media group you just created.

Click Add content, then select Chart.

Add chart

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

Configure pie chart

Step 14 – 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 15 – 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


Add chart elements with color

The Neighborhood Crime Totals (charts) layer displays chart elements having a single color (orange). The layer uses a single field for the Counts and Amounts (color) style it uses.

Chart elements will automatically use color when multiple fields are used in the layer style and the chart elements use the same fields. The steps for creating the chart elements are the same as described above. The Neighborhood Crime Totals (charts with colors) is styled using multiple fields using the Predominant Category style. Because the chart elements use the same fields, they automatically mirror the colors seen in the map.

Chart colors
View larger image

Each neighborhood polygon is colored by the predominant value, in this case the year with the highest number of crimes. The chart elements use the same color scheme to show the yearly totals.

Chart colors

To take a closer look at the configurations, follow the steps below.

Step 1 – Open the Layers pane in the Contents (dark) toolbar. Hide the Neighborhood Crime Totals (charts) and Neighborhood Crime Totals (unconfigured) layers, and show the Neighborhood Crime Totals (charts with colors) layer.

Layers pane

Step 2 – Ensure that the charts with colors layer is selected. In the Settings (light) toolbar click Styles. You’ll see that all fields with yearly totals for crimes from 2001 to 2010 are checked and the layer uses the Predominant category style.

Predominant category style

Step 3 – In the Settings (light) toolbar click Pop-ups and expand the Media group.

Expand Media group

Step 4 – Select any of the chart elements in the media group and note that the same fields have been used to configure the element.

Configure chart

Step 5 – Experiment with different colors by going back to the Predominant Category style options and choosing a different color ramp.

Style options

Note that the chart element colors will change automatically. Compare the example below with the one at the top of this section.

Chart colors


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. Email or connect on LinkedIn (


Next Article

Join Hacktoberfest 2023: Celebrate Open Source with Us!

Read this article