--- title: "How to Create a Bubble Chart in WordPress? " url: https://nexterwp.com/docs/bubble-chart-in-wordpress/ date: 2024-12-09 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A scatter plot shows two numbers per point. A bubble chart shows three. Each bubble has an X position, a Y position, and a radius — useful for anything with..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Bubble-Chart-in-WordPress_-1024x519.jpg word_count: 451 --- # How to Create a Bubble Chart in WordPress?  ## Key Takeaways - Advanced Charts block en Nexter Blocks Pro requiere activar la opción Advanced Chart en Nexter > Blocks dentro del panel de WordPress. - Bubble chart usa datos escritos como grupos con corchetes [x|y|r], donde cada burbuja tiene posición X, posición Y y radio, y una fila de Datasets dibuja un color de burbujas. - Limitaciones del gráfico: cada punto necesita exactamente tres números separados por |, los corchetes mal formados se omiten sin aviso y el radio se mide en las mismas unidades que los ejes. A scatter plot shows two numbers per point. A bubble chart shows three. Each bubble has an X position, a Y position, and a radius — useful for anything with three numbers worth comparing at once, like price, rating and sales volume. *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 bubble chart with three bubbles](https://nexterwp.com/wp-content/uploads/2026/09/ac-fe-bubble.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 `|`. - Set **Style** to Bubble. ![The Style picker](https://nexterwp.com/wp-content/uploads/2026/09/ac-style.webp) - Open **Datasets**, add a row, and type your points into **Data** as bracketed groups: `[x|y|r][x|y|r]`. ![The bracketed data format](https://nexterwp.com/wp-content/uploads/2026/09/ac-data-bubble.webp) - Add more rows to plot a second group of bubbles in a different colour. > ***Each bubble is its own bracket.** Measured with [10|20|8][15|10|12]: two bubbles, at (10, 20) and (15, 10), with radii 8 and 12 — exactly as typed.* ## How It Behaves - **Label Values names the rows, not the bubbles** — bubble positions come entirely from the x/y numbers inside each bracket, not from the label list.- **Radius is in the same units as the axes**, so very different X/Y ranges can make bubbles look oddly large or small — scale your radius numbers to suit your data.- Grid Lines, Legends and Tooltip all work the same way as on Line or Bar.- One Datasets row is one colour of bubble; add a second row for a second group to compare. ## Limitations - Every point needs all three numbers — there is no way to plot X/Y without a radius.- Brackets must be well-formed; a missing `]` or a bracket without exactly three pipe-separated numbers is silently dropped rather than shown as an error.- Data is typed, not linked to a spreadsheet or external source. ## Troubleshooting ### Some of my bubbles are missing Check every bracket has exactly three pipe-separated numbers — `[x|y|r]`. A bracket with more or fewer values is skipped without a warning. ### My bubbles are all the same size Check the third number in each bracket (the radius) actually varies — if every point uses the same r value, every bubble will be the same size. ### The bubbles are too big or too small for the chart Radius is plotted in the same scale as the axes. Adjust your r values down or up until they sit comfortably against your X/Y range. ## 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/)- [Bar chart](https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/)- [Pie and Doughnut chart](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/) ## Frequently Asked Questions **Q: What do I need before creating a bubble chart in WordPress with Nexter?** A: The Advanced Charts block in Nexter Blocks Pro is the key requirement, and it has to be enabled under Nexter > Blocks in your WordPress dashboard. Bubble charts also use typed data, not a spreadsheet-style grid, so the values are entered as one line with pipe separators. That matters because the chart reads each point from bracketed groups like [x|y|r], not from separate cells. **Q: How do bubble charts work differently from scatter plots?** A: A scatter plot uses two numbers per point, while a bubble chart uses three. In Nexter, each bubble has an X position, a Y position, and a radius, so you can compare three values at once, like price, rating, and sales volume. The radius is part of the data itself, which is why bubble size is tied to the numbers you enter. **Q: What is the correct data format for a bubble chart in Nexter?** A: Each point must be typed as a bracketed group with exactly three pipe-separated values: [x|y|r]. For example, [10|20|8][15|10|12] creates two bubbles at (10, 20) and (15, 10) with radii 8 and 12. That format matters because every bracket is treated as one bubble, and any missing or extra value can cause the point to be skipped. **Q: Why are some bubbles missing from my chart?** A: Missing bubbles usually mean one of the brackets is malformed. Every point needs exactly three pipe-separated numbers inside square brackets, and a missing ] or an extra value causes that bubble to be silently dropped. In practice, this is easy to miss when typing long data strings, so checking each [x|y|r] group is the fastest way to spot the problem. **Q: Why are all my bubbles the same size?** A: Bubble size comes from the third number in each bracket, the radius. If every point uses the same r value, every bubble will look identical even if X and Y change. That makes the chart less useful for comparing volume or intensity, so varying only x and y will not change size in Nexter’s Advanced Charts block. **Q: How do I keep bubble sizes readable when my chart range is wide?** A: Radius uses the same scale as the axes, so very different X/Y ranges can make bubbles look too large or too small. The practical fix is to scale your r values up or down until they sit comfortably against your X/Y range. Grid lines, legends, and tooltips behave like they do on Line or Bar charts, so sizing is mostly about balancing the radius against your data spread.