Bubble Chart
In this article, we will explain how to create and customize a bubble chart. So let's get started!
📈 Bubble Chart
A Bubble Chart is a powerful way to visualize multi-dimensional data in a single view. It’s especially useful when you want to:
Compare multiple metrics across categories
Identify patterns or outliers
Show correlations between variables
Represent a fourth variable using bubble size or color
🧠 When to Use a Bubble Chart
Use a bubble chart when:
You have at least three numerical measures to plot.
You want to highlight how categories compare across multiple dimensions.
You need to visualize volume or magnitude (with bubble size) and intensity (with bubble color).
Common use cases:
Market performance (e.g. sales vs. profit vs. discount)
Product comparisons (e.g. revenue vs. cost vs. margin)
Regional analysis (e.g. growth vs. customer base vs. churn)
🧩 Bubble Chart Attributes
Each bubble represents one data point (e.g. a market or product) and can encode up to five attributes:
Bubble Name
Label/ID for the bubble (e.g. Market)
✅
X-Position
Value on the X-axis (e.g. Sales)
✅
Y-Position
Value on the Y-axis (e.g. Profit)
✅
Color
Value used for gradient coloring or grouping (e.g. Quantity)
⭕ Optional
Size
Determines the diameter of the bubble (e.g. Discount)
⭕️ Optional
Order By
Optional sorting field (e.g. Market)
⭕️ Optional
ℹ️ Color can be either:
a string to group bubbles by category
a number to apply a color gradient (e.g., intensity)
🛠️ Creating a Bubble Chart
Step 1: Enter Your Prompt in the builder
In the Intent panel, describe what you want to visualize. Example prompt:
Display a bubble chart showing the sum of sales, profit, quantity, and discount by market.
Click Next to proceed.
Step 2: Map Attributes
The AI would map your fields to the bubble chart properties:
Bubble Name →
MarketX-Position →
Sum(Sales)Y-Position →
Sum(Profit)Color →
Sum(Quantity)(optional)Size →
Sum(Discount)(optional)Order By →
Market(optional)
Click Save to generate the chart.
🎨 Customizing the Chart
To access customization options:
Click Advanced Editor at the top of the chart.
Open the Styles tab on the right panel.
From there, you can adjust:
Chart Title
Gridlines (horizontal/vertical)
Legend (position and display)
Bubble Opacity
Color Range (gradient stops and min/max)
Bubble Font (text style, color, size)
Chart Padding & Zoom
Background Styling
⚙️ Advanced users can also switch to the JSON tab to directly edit chart config options.
Last updated