--- title: "How to Create a Bubble Chart in WordPress? " url: https://nexterwp.com/docs/bubble-chart-in-wordpress/ date: 2024-12-09 modified: 2026-08-18 author: "Aditya Sharma" description: "Do you want to create a bubble chart in WordPress? Bubble charts are a visually appealing and effective way to present data. They are commonly used in presentations, reports, and..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Bubble-Chart-in-WordPress_-1024x519.jpg word_count: 427 --- # How to Create a Bubble Chart in WordPress?  ## Key Takeaways - Nexter Blocks Advanced Chart block creates a bubble chart in WordPress by selecting Bubble from the Style section under the Chart tab. - Dataset values use 3 pipe-separated numbers inside square brackets, such as [4|15|20], where 4 is the x-axis value, 5 is the y-axis value, and 20 is the size value. - Multiple Background Colors and Multiple Border toggles let the chart set individual dot background and border colors with hex codes separated by a pipe sign (|). Do you want to create a bubble chart in WordPress? Bubble charts are a visually appealing and effective way to present data. They are commonly used in presentations, reports, and dashboards to highlight relationships and trends among multiple variables. With the Advanced Chart block from Nexter Blocks, you can easily create a bubble chart to show comparisons between multiple data on your WordPress website. *To check the complete feature overview documentation of the Nexter Blocks Advanced Chart block, [click here](https://nexterwp.com/docs/add-a-chart-in-wordpress/).* ***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.*** [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-charts-and-graph/) To do this, add the Advanced Chart block to the page and follow the steps -  1. Select **Bubble** from the **Style** section under the **Chart** tab. 2. After that, in the **Label Values** field, you have to add chart labels separated by a pipe sign (**|**). 3. Then in the **Dataset** tab, you have to add the data for the chart. By default, you’ll find three repeater items open one item -  In the **Label** field, you can add the dataset label. Then in the **Data** field, you have to add 3 values separated by a pipe sign (**|**) inside square brackets. For example, [4|15|20], where 4 is the x-axis value, 5 is the y-axis value and 20 is the size value. You can add such multiple sets of values. By enabling the **Multiple Background Colors** toggle, you can change the individual dataset dot background color. To do so, you have to add the color hex codes in the **Background Color** field, separated by a pipe sign (**|**). Make sure that the number of colors added matches the quantity of datasets in the **Data** field. But if the **Multiple Background Colors** toggle is disabled, you can change all the dot background colors at once from the **Background Color** section. Similarly, from the **Multiple Border **toggle, you can change the individual dataset dot border color. In the **Border Color** field, you have to add the color hex codes separated by a pipe sign (**|**). But you can change all the dataset dot border colors at once from the **Border Color** field by disabling the **Multiple Border Colors** toggle. Following this process, you can edit the other items. Then you can click on the **+ Add Item** button to add more items. You can customize the chart further from the **Style** tab. Here you’ll find the same options that are available for the Line chart. Now you should have an interactive bubble chart. ## Frequently Asked Questions **Q: Why is my bubble chart not showing up in WordPress?** A: The usual blocker is that the Advanced Chart block belongs to Nexter Blocks, so it has to be installed and activated before the chart can render. The bubble chart itself is built by selecting Bubble in the Chart tab, then adding labels and dataset values. If the block is missing, the chart has nothing to load. For the full block reference, use [click here](https://nexterwp.com/docs/add-a-chart-in-wordpress/) or the [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-charts-and-graph/). **Q: What do I need before creating a bubble chart in WordPress?** A: The key requirement is Nexter Blocks, because the Advanced Chart block is part of it. Once that is installed and activated, you can add the Advanced Chart block to a page and build the bubble chart from there. The setup also depends on having your labels and data ready in advance, since the chart uses pipe-separated values and square-bracketed datasets. That preparation matters because bubble charts need consistent x-axis, y-axis, and size values. **Q: How do I format bubble chart data in WordPress?** A: Each dataset uses three values inside square brackets, separated by pipes, like [4|15|20]. In that example, 4 is the x-axis value, 5 is the y-axis value, and 20 is the size value. The page also says labels are separated by a pipe sign in the Label Values field. This formatting matters because bubble charts depend on all three numbers being aligned correctly for each point. **Q: Can I use different colors for each bubble in the chart?** A: The Advanced Chart block supports both shared colors and per-dataset colors. If Multiple Background Colors is enabled, you can assign individual dot background colors with hex codes separated by pipes, and the number of colors has to match the number of datasets. The same idea applies to borders with Multiple Border Colors. That makes it easier to distinguish datasets visually when a single color would blur them together. **Q: What is the best way to choose between one color and multiple colors for a bubble chart?** A: Use one color when you want a cleaner chart with less visual noise, and switch to multiple colors when you need each dataset to stand out clearly. Nexter Blocks lets you control this through the Multiple Background Colors and Multiple Border Colors toggles. The practical gotcha is consistency: if you enable multiple background colors, the number of hex codes must match the number of datasets in Data. **Q: Can I customize a bubble chart after adding it to a page?** A: The Style tab gives you room to refine the chart after the basic data is in place. The page says those options are the same ones available for the Line chart, so bubble charts are not locked into a single look once created. That matters if you want to adjust presentation without rebuilding the dataset. After that, you end up with an interactive bubble chart rather than a static graphic.