---
title: "How to Add a Chart in WordPress?"
url: https://nexterwp.com/docs/add-a-chart-in-wordpress/
date: 2024-12-09
modified: 2026-09-16
lang: en
author: "Aditya Sharma"
description: "A table of numbers asks a reader to do the work. A chart does it for them. Advanced Charts draws six kinds of chart from plain text you type —..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Chart-in-WordPress_-1024x519.jpg
word_count: 549
---

# How to Add a Chart in WordPress?

## Key Takeaways

- Advanced Charts dibuja seis tipos de gráfico desde texto plano con valores y etiquetas separados por una barra vertical, sin importar una hoja de cálculo ni un servicio externo.
- Nexter Blocks Pro.Block activa Advanced Chart bajo Nexter > Blocks, y el bloque usa campos de texto separados por | para Label Values y Datasets.
- Doughnut requiere poner todos los valores de las porciones en una sola fila separada por |, porque una fila por porción crea anillos completos; además, espacios alrededor de | aparecen en las etiquetas y Bar chart no cambia la dirección con Orientation.

A table of numbers asks a reader to do the work. A chart does it for them.

Advanced Charts draws six kinds of chart from plain text you type — no spreadsheet import, no external service, just labels and values separated by a pipe.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-charts-and-graph/)

## Before You Start

- **Edition:** **Pro** — the Advanced Charts block needs Nexter Blocks Pro.- **Block to enable:** Advanced Chart, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Every value is typed, separated by a pipe (`|`).** Labels, one row of series data, colours — all of it is a single line of text with `|` between the parts, not a spreadsheet-style grid.

https://www.youtube.com/watch?v=8zrDtrhtOv8

## Steps

- Add the **Advanced Charts** block and choose a chart **Style**.

![The Style picker](https://nexterwp.com/wp-content/uploads/2026/09/ac-style.webp)

- Type your axis labels into **Label Values**, separated by `|`.

- Open **Datasets** and enter your data — the shape depends on the chart, see below.

![A dataset's Data field](https://nexterwp.com/wp-content/uploads/2026/09/ac-data-bar.webp)

- Turn on Grid Lines, Legends or Tooltip under Style if you want them.

> ***Spaces around the pipe show up in the chart.** Measured: Q1 | Q2 renders the labels Q1 and Q2, trailing space included. Type your values with no space around the | for a tidy result.*

## The Six Chart Types

| Chart | Best for | Data entry | Guide |
| ----- | -------- | ---------- | ----- |
| Line | A trend over time | One row per line, pipe-separated values | — |
| Bar | Comparing a few categories | One row per bar series | [Bar chart](https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/) |
| Radar | Comparing several qualities at once | One row per shape | [Radar chart](https://nexterwp.com/docs/create-a-radar-chart-in-wordpress/) |
| Pie | A simple share-of-whole | One Data field, always proportional | [Pie and Doughnut chart](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/) |
| Doughnut | The same, with a hole in the middle | One Datasets row — see the guide first | [Pie and Doughnut chart](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/) |
| Polar Area | Share-of-whole with equal-angle slices | One Data field, always proportional | [Polar Area chart](https://nexterwp.com/docs/create-a-polar-area-graph-in-wordpress/) |
| Bubble | Three numbers per point | Bracketed x|y|r groups | [Bubble chart](https://nexterwp.com/docs/bubble-chart-in-wordpress/) |

## How It Behaves

- **Everything is typed, not dragged.** Labels, values and even multi-series data are all pipe-separated text fields — there is no grid or table UI.- **Doughnut has a trap worth knowing before you start.** **Doughnut Data is not one row per slice.** Measured: adding one row per slice draws a separate full ring for each row, not proportional slices, and the legend strikes through every entry after the first. Put every slice's value in **one** row, pipe-separated — add a second row only if you deliberately want a second, concentric ring. See the [Pie and Doughnut guide](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/).- **Bar's Orientation setting does not currently change the bar direction.** Measured: a Horizontal bar chart and a Vertical one produce the same upright bars. See the [Bar chart guide](https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/).- Spaces around the pipe show up in the chart. Measured: `Q1 | Q2` renders the labels `Q1 ` and ` Q2`, trailing space included. Type your values with no space around the `|` for a tidy result.

## Limitations

- **Pro only.**- No live data connections — every value is typed in, so the chart updates when you edit the block, not automatically.- Data entry is pipe-separated text, which takes some getting used to for a first chart.

## Troubleshooting

### My chart is blank

Check **Label Values** and the dataset's **Data** field both have values, and that they have the same number of pipe-separated items.

### My doughnut looks like solid rings, not slices

Put every slice's value in **one** Datasets row, pipe-separated, rather than one row per slice. See the [Pie and Doughnut guide](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/) for the full explanation.

### The block is missing from the inserter

Switch **Advanced Chart** on under **Nexter > Blocks**.

![Advanced Chart switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/ac-admin-enable.webp)

## Related Docs

- [Bar chart](https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/)- [Radar chart](https://nexterwp.com/docs/create-a-radar-chart-in-wordpress/)- [Pie and Doughnut chart](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/)- [Polar Area chart](https://nexterwp.com/docs/create-a-polar-area-graph-in-wordpress/)- [Bubble chart](https://nexterwp.com/docs/bubble-chart-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding a chart in WordPress with this block?**
A: The Advanced Charts block is Pro only, and it needs Nexter Blocks Pro.Block enabled under Nexter > Blocks in your WordPress dashboard. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the block as typed text input, not a spreadsheet import. That matters because every label and value is entered as pipe-separated text, so the first setup mistake is usually missing Pro access or leaving the block switched off.

**Q: What chart types can I create with Advanced Charts?**
A: Advanced Charts draws six chart types from plain text: Line, Bar, Radar, Pie, Doughnut, Polar Area, and Bubble. The practical difference is how you enter the data. Line and Bar use one row per series, Pie and Polar Area use one data field that stays proportional, Doughnut uses a datasets row pattern, and Bubble uses bracketed x|y|r groups. That makes the block useful when you want quick charts without importing a spreadsheet.

**Q: How should I format labels and values so the chart renders correctly?**
A: Pipe-separated text is the key detail here. Labels go into Label Values separated by |, and the dataset values are typed the same way instead of in a grid. Spaces around the pipe show up in the chart too, so Q1 | Q2 renders extra spaces in the labels. Keeping no space around | gives cleaner output and avoids odd-looking labels or values.

**Q: Why is my doughnut chart showing solid rings instead of slices?**
A: That usually happens when each slice is entered as its own Datasets row. For Doughnut charts, one row per slice draws separate full rings instead of proportional slices, and the legend strikes through every entry after the first. The fix is to put every slice value in one row with pipe-separated values. A second row only makes sense if you want a second concentric ring.

**Q: Why is my chart blank after I add it?**
A: A blank chart usually means Label Values or the dataset Data field is empty, or the two fields do not have the same number of pipe-separated items. Advanced Charts depends on matching text counts because it does not use a table UI or live data source. When those counts line up, the block has enough structure to draw the chart instead of rendering nothing.

**Q: Does Advanced Charts work with live data or page builders?**
A: Advanced Charts does not connect to live data sources; every value is typed in and updates only when you edit the block. The page also says Nexter works alongside major page builders, so this block sits inside that broader WordPress setup rather than replacing your builder workflow. That makes it better for static reporting or simple visual summaries than for charts that need automatic refreshes.