--- title: "How to Create a Bar Chart in WordPress?" url: https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/ date: 2024-12-09 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A bar chart answers one question well: which is bigger? Set the Advanced Charts block to Bar, and each Datasets row becomes one series of bars across your labels. For..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Bar-Chart-in-WordPress_-1024x519.jpg word_count: 459 --- # How to Create a Bar Chart in WordPress? ## Key Takeaways - Advanced Charts block in Nexter Blocks Pro requires the Advanced Chart block to be switched on under Nexter > Blocks, and every value is typed as pipe-separated text, not a spreadsheet grid. - Datasets rows each become one series of bars, so adding a second row compares one year against another across the same labels. - Orientation currently has no visible effect: measured on a published page, Horizontal and Vertical produce the same Chart.js configuration and every bar chart renders upright. A bar chart answers one question well: which is bigger? Set the Advanced Charts block to Bar, and each Datasets row becomes one series of bars across your labels. *For every Dynamic Device setting in one place, see the [Advanced Charts block guide](https://nexterwp.com/docs/add-a-chart-in-wordpress/).* [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. ![A published bar chart with one dataset across four labels](https://nexterwp.com/wp-content/uploads/2026/09/ac-fe-bar.webp) ## 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 `|`. - Type your category names into **Label Values**, one per bar group. - Open **Datasets**, add a row, and type your numbers into **Data** — one value per label, pipe-separated. ![A dataset](https://nexterwp.com/wp-content/uploads/2026/09/ac-data-bar.webp) - Add more Datasets rows for more bars per group. > ***Orientation does not currently change the bar direction.** Measured on a published page: setting Orientation to Horizontal produced the identical Chart.js configuration as Vertical, and the chart rendered as upright bars either way. Reported to the dev team; this doc does not promise a working horizontal mode.* ## How It Behaves - **Each Datasets row is one series** — add a second row to compare, say, this year against last year across the same labels.- **Background can be a single colour or one per bar.** Turn on **Multiple Dot Background** on a row and give each bar its own colour from a pipe-separated list.- Bar Size and Bar Space (under Style) control the thickness of each bar and the gap between groups.- 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 - **Orientation has no visible effect — measured.** Every bar chart currently renders upright regardless of the setting.- There is no way to sort bars automatically — the order follows the order of your labels.- Data is typed, not linked to a spreadsheet or external source. ## Troubleshooting ### My bars are not showing Check **Label Values** and each dataset row's **Data** field have the same number of pipe-separated values. ### I wanted a horizontal bar chart Measured: the Orientation setting currently has no effect, and every bar chart renders upright. Consider a [Radar chart](https://nexterwp.com/docs/create-a-radar-chart-in-wordpress/) instead if orientation matters for your layout. ### Some bars are the wrong colour Check whether **Multiple Dot Background** is switched on for that row — with it on, the single Background colour is ignored in favour of the pipe-separated list. ## Related Docs - [Advanced Charts block guide](https://nexterwp.com/docs/add-a-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/)- [Bubble chart](https://nexterwp.com/docs/bubble-chart-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before creating a bar chart in WordPress with Nexter?** A: The Advanced Charts block needs Nexter Blocks Pro, and the block itself must be enabled under Nexter > Blocks in your WordPress dashboard. The page also says every value is typed as pipe-separated text, not a spreadsheet-style grid, so the data format matters as much as the block setup. That matters because bar charts in this workflow are driven by plain text labels, series data, and colours all on one line. **Q: How do I make a bar chart with multiple series in WordPress?** A: Each Datasets row becomes one series of bars across the same labels, so adding a second row is how you compare things like this year versus last year. The chart uses your label values as the shared axis and each dataset row as a separate series. That structure is what makes the bar chart useful for quick comparisons instead of single-value display. **Q: Why are my bars not showing in the chart?** A: The most common cause is a value count mismatch. Label Values and each dataset row’s Data field need the same number of pipe-separated values, or the chart has nothing consistent to map across the labels. Since the page uses typed data rather than a spreadsheet, one missing or extra value can break the visual result fast. **Q: Can I create a horizontal bar chart with this setup?** A: The Orientation setting currently has no visible effect. The page says measured tests showed Horizontal produced the same Chart.js configuration as Vertical, and the chart still rendered as upright bars either way. If orientation matters for your layout, the doc points to a Radar chart as the alternative to consider. **Q: Why are some bars showing the wrong colour?** A: That usually comes down to Multiple Dot Background on that dataset row. When it’s switched on, the single Background colour is ignored and each bar takes its colour from the pipe-separated list instead. This is useful when you want per-bar colouring, but it also means one wrong list entry can make the row look inconsistent. **Q: What is the best way to format labels and values for a bar chart?** A: Use pipe-separated text with no spaces around the | character. The page notes that spaces around pipes show up in the chart, so `Q1 | Q2` renders with trailing spaces included, while tighter formatting keeps labels clean. That small detail matters because it affects both label appearance and how tidy the final chart looks.