---
title: "How to add a chart to a custom popup"
description: "Add a bar or pie chart to a custom popup so each feature draws its own chart from several numeric attributes, and learn when a chart is the right choice."
sidebar:
  label: "Add a chart"
---

A chart in a custom popup lets each feature draw its own bar or pie from its values — a four-quarter revenue bar chart that's different for every site, or a category-breakdown pie that's unique per feature. Click `Insert chart` in the popup editor and pick `Bar Chart` or `Pie Chart`, then tick the numeric attributes that supply the data; charts need at least two comparable numeric attributes, and for a single value a plain `{field_name}` line scans faster.

**[See it on an example map](https://mangomap-staging.com/examples-staging/maps/y4h0ctdr/popup-media-logic-lab)**

Open the Popup Media & Logic Lab. In the legend, turn on `Sites — Charts` and turn off `Sites — Default`. Click a site. Its popup shows a bar chart of that site's revenue for each quarter.

## Before you start

- The popup type must be `Custom`. See [How to write a custom popup template](/docs/configuring-popups/write-custom-popup-template).
- The layer must have multiple numeric attributes that belong together. A chart needs more than one value per feature — a single attribute won't form a meaningful chart.
- Plan which chart type fits: bar charts compare categories side by side; pie charts show proportions of a whole.

## Open the chart configuration

In the Custom popup editor, place the cursor where you want the chart. Click `Insert chart` in the toolbar. A `Bar Chart` block appears in the editor. On the block, click `Configure chart` (the pencil) to open `Chart Configuration`.

<img src="/_assets/configuring-popups/add-charts-to-popup--modal.png" alt="Chart Configuration modal: Chart Type set to Bar Chart, four fields ticked and labelled Q1 to Q4 under Select Numeric Fields, a Colour palette list, and a Preview bar chart with four bars" width="1600" height="960" />

## Pick the chart type

Under `Chart Type`, choose:

- **Bar Chart** — vertical bars, one per selected attribute. Good for comparing similar measures.
- **Pie Chart** — circular slices, sized by attribute value. Good for parts-of-a-whole.

These are the only two chart types available.

## Pick the attributes that supply the data

Under `Select Numeric Fields`, every numeric attribute on the layer appears as a row with a checkbox and an editable label. Tick the attributes that should become bars or slices.

The label defaults to the attribute's underlying name and is what the viewer sees next to each bar or slice. Overwrite it in the row to show a friendlier name — `St perimet` becomes `Site perimeter`, for example. Labels apply to both `Bar Chart` and `Pie Chart`.

The list order matches the layer's attribute order. You can't reorder rows.

For example, on a layer with quarterly revenue attributes (`q1_revenue`, `q2_revenue`, `q3_revenue`, `q4_revenue`), tick all four to produce a chart with four data points per feature — one per quarter, labelled with whatever you've typed in each row.

## Insert the chart

The `Preview` updates as you tick fields and edit labels. It draws the chart with made-up sample values, not your data.

When the configuration looks right, click `Save Chart`. The chart block in the popup editor keeps the configuration. Each feature's values show when its popup opens.

## How values render per feature

A missing value shows as zero.

## When a chart is the right choice

Use charts when:

- The data is naturally comparative (quarters, categories, before/after).
- A reader benefits from seeing the relative sizes quickly.
- Multiple attributes share a unit (all revenue, all percentages, all counts).

For one or two values, a plain `{field_name}` line is faster to scan and easier to format.

## When a chart isn't the right choice

Skip charts when:

- The values aren't comparable (mixed units, mixed scales).
- You only have one value per feature.
- The popup is already busy with other content.

For trends across a numeric range (population over time as a single line), pure attribute display works better than coercing the data into a bar chart.

## Save the popup

After inserting the chart, click `Save Changes` at the bottom right of the editor. Verify by clicking a feature on the map — the chart should render with that feature's data.

## Related

- [How to write a custom popup template](/docs/configuring-popups/write-custom-popup-template)
- [How to add dynamic content to a custom popup](/docs/configuring-popups/add-dynamic-content-to-popup)
- [How to insert attribute values into a custom popup](/docs/configuring-popups/insert-attribute-values-into-popup)
- [Popup tab controls](/docs/configuring-popups/popup-reference)