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.

Neighborhood Crime: Random colors

An example of the default random chart colors. The random colors can be changed. See sections below.

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.

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.

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.

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.

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.

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.

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.

Click a neighborhood to view the pop-up, the visible layer (Neighborhood Crime: Default) uses a Fields list element to display attributes and values. In the steps below, charts will be add to add more meaning and reveal trends and patterns.

Step 2 – Select the Neighborhood Crime: Default (not configured) layer.

Step 3 – In the Settings (light) toolbar click Pop-ups.

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

Step 5 – To add a chart element, click Add content, then choose Chart.

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.

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.

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.

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.

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.

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.

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.

 

More information

For more information, see the following:

• Configure pop-ups (Help)
• View pop-ups (Help)
• Pop-ups: the essentials (Blog)