---
title: "How to Create a Bubble Chart in Elementor?"
url: https://theplusaddons.com/docs/bubble-chart-in-elementor/
date: 2024-02-05
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to create a bubble chart in Elementor? Bubble charts are a visually appealing and effective way to display data. They are often used in presentations, reports, and..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Bubble-Chart-in-Elementor_-1024x536.jpg
word_count: 459
---

# How to Create a Bubble Chart in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Chart widget allows users to create bubble charts to display data comparisons.
- Users can customize individual dataset dot background colors by enabling the Multiple Background Colors toggle and adding color hex codes.
- To add data for the bubble chart, users input values in the Data field using the format [x|y|size], with each value separated by a pipe sign.

Do you want to create a bubble chart in Elementor? Bubble charts are a visually appealing and effective way to display data. They are often used in presentations, reports, and dashboards to showcase relationships and trends between multiple variables.

With the Chart widget from The Plus Addons for Elementor, you can easily create a bubble chart to show comparisons between multiple data sets on your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Chart widget, [click here.](https://theplusaddons.com/docs/chart-widget-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-advanced-charts/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Chart widget to the page and follow the steps - 

1. You can select **Custom **from the **Chart** **Type **dropdown under the **Layout **tab.

2. You have to select **Bubble** from the **Select Chart** section under the **Chart** tab.

3. After that, in the **Label Value** field, you have to add chart labels separated by a pipe sign (**|**).

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-type-bubble-2.gif)

4. Then, in the Dataset tab, you have to add the data for the chart. By default, you’ll find three 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 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 field, separated by a pipe sign (|). Make sure that the number of colors added matches the number 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** section.

Similarly, from the **Multiple Border Colors** toggle, you can change the individual dataset dot border color. In the **Dot Border Colors** 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 **Dot Border** 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 **Extra Options** tab. Here you’ll find the same options that are available for the Line chart.

Now you should have an interactive bubble chart.

![Bubble chart demo](https://theplusaddons.com/wp-content/uploads/2024/02/bubble-chart-demo-1.gif)

Suggested Read: [How to create a pie chart in Elementor ](https://theplusaddons.com/docs//pie-chart-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if my bubble chart is not displaying correctly?**
A: If your bubble chart isn't displaying correctly, check the data format in the Dataset tab. Each data entry must be formatted as three values separated by a pipe sign (|) inside square brackets, like [4|15|20]. If the format is incorrect, the chart may not render as expected.

**Q: What are the best practices for labeling data in a bubble chart?**
A: For effective labeling in a bubble chart, use clear and concise labels in the Label Value field, separated by a pipe sign (|). This ensures that viewers can easily understand what each bubble represents. Proper labeling enhances the chart's readability and impact.