How to Create a Bubble Chart in WordPress? 

Key Takeaways

  • Nexter Blocks includes an Advanced Chart block that allows users to create bubble charts for data comparison.
  • Users can customize individual dataset dot colors in the bubble chart by enabling the Multiple Background Colors toggle and adding hex codes.
  • The Advanced Chart block requires installation and activation of Nexter Blocks to function properly.
Table of Contents

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.

Requirement  – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.

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.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if my bubble chart isn't displaying correctly?

If your bubble chart isn't displaying correctly, ensure that you've added the data in the correct format. Each data entry in the Data field must consist of three values separated by a pipe sign (|) inside square brackets, like [4|15|20]. If the format is incorrect, the chart may not render properly.

What are the best practices for labeling data in a bubble chart?

When labeling data in a bubble chart, use clear and concise labels in the Label Values field, separated by a pipe sign (|). This ensures that viewers can easily understand the data being presented. Additionally, consider using distinct colors for each dataset to enhance visual clarity.

How do I add more datasets to my bubble chart?

To add more datasets to your bubble chart, click on the + Add Item button after setting up your initial data. This allows you to expand your chart with additional data entries, enhancing the depth of information you can present.

Last reviewed: April 14, 2026

Related Docs