Bubblechart
🧭 Overview
The Bubble Chart is a multi-dimensional chart type used to visualize relationships between three or more variables within a two-dimensional space. Each data point is represented as a bubble positioned along the X and Y axes, with its size—and optionally color or opacity—representing additional values.
This chart type is ideal for scenarios where understanding the interplay between variables is essential and when a simple scatterplot would not capture the full nuance of the dataset.
📊 Example Use Case
Market positioning analysis (e.g. price vs. performance vs. market share)
Risk vs. impact assessments
Financial growth across regions or categories
Customer segmentation based on behavior and value
Product comparisons across multiple metrics
⭐ Key Features
Drill-down: Reveal more detailed data or navigate to subcategories.
Bubble size: Determines the bubble’s area or diameter based on a numeric value.
Configuration
Learn how to create a bubblechart using the new design with this step-by-step guide. Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.
Chart Configuration Step-by-Step
Dimension
Bubble category
The bubble category corresponds to a column in your dataset, such as 'Product Type'.
Enable drill-down
Allows users to click on individual bubbles to reveal more detailed data or navigate to subcategories.
Show labels on bubbles
Displays names, categories, or values directly on bubbles for quick identification.
Measure
X-Axis
Represents the horizontal metric—typically a continuous or ordinal variable.
Y-Axis
Represents the vertical metric—used together with the X-axis to define bubble positioning.
Precision
Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.
Example:
A value of 3.14159 will be displayed as 3.14 when using .2f formatting.
Unit
Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.
Sentiment
Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.
Note: Sentiments can be customized in the app theme.
Set bubble size
Adds a third dimension to the chart to visually represent an additional measure such as volume, count, or revenue.
Additional parameters
ID
Unique chart Id
Add complementary value
The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.
Add user chart guide
Lead your chart viewers through the narrative of your data.
Chart performance
Technical performance
Style Configuration
Bubbles
Bubbles
Customize the bubble color to align with your branding preferences.
Bubble opacity
Controls the transparency of bubbles to reduce visual clutter and support overlapping data points.
This page provides a step-by-step guide for creating a barchart using the legacy design.
*Mandatory parameters
Dataset*
Select the dataset used by the chart
X axis*
Column containing x axis value
Y axis*
Column containing y axis value
Legend
Display legend
Toggle to activate legend display
Legend
Additional info
Add another column for more information on the legend
Legend
Default selected bubble
Choose the first, last or the name of the label
Legend
Display a color gradient legend
Toggle to display a color gradient legend
Legend
Modify gradient color
Enter the min and max color (HEX (‘#…’) code)
Drill
Drill
The first bubble you see is the parent bubble.
Click on it to see it’s children
Drill
Level
Column containing parent or child level information
Drill
Group
Column containing the name of the parent bubbles to group them
Drill
Levels order
Enter the value of the parent bubbles as the 1st entry and the level value of the child bubbles as 2nd entry
Colored Zone
Quadrants
Divide your bubble chart in 4 colored zones
Colored Zone
Quadrants - Configuration type
Select the configuration type for quadrant:
hardcoded: static position of the quadrant
dynamic: depending on values within the dataset
from decile: typing figures between 1 to 10 to automatically divide the chart
Colored Zone
Quadrants - X
Column containing x axis value
Colored Zone
Quadrants - Y
Column containing y axis value
Colored Zone
Color coding
Add a color coding in the zones Input Order (4 max): top left, top right, bottom left, bottom right
Colored Zone
Quadrant legend
Add a legend in the zones Input Order (4 max): top left, top right, bottom left, bottom right
Colored Zone
Bisector
Divide your chart in 2 zonesDon’t forget to add a color coding and a legend!
Colored Zone
Bisector X axis
Column containing x axis value
Colored Zone
Bisector Y axis
Column containing y axis value
Colored Zone
Bisector - Color coding
Add a color coding in the zones Input Order (2 max): top left & bottom right
Colored Zone
Bisector - Zones legend
Add a legend in the zones Input Order (2 max): top left & bottom right
Enrich Chart
Bubble size
Column containing bubble size value
Enrich Chart
Bubble color
Column containing bubble color value/category: it can be a number or a text
Enrich Chart
Line
Add a line on top of your bubble chart to display an average, an objective of revenue...
Enrich Chart
Line - X axis
Column containing x axis value
Enrich Chart
Line - Y axis
Column containing y axis value
Display
Display bubbles' values
Toggle to display the value on the bubbles
Display
X axis scale
Use it to define the scale for the X axis: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)
Display
Y axis scale
Use it to define the scale for the Y axis: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)
Display
Bubble size scale
Use it to define the bubbles size scale: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)
Display
Overwrite default bubble's opacity
Display
Recycle bubbles colors
Reuse bubbles color when chart data changes (filters or requesters).
Display
Zoom
Toggle to enable zoom
Display
Overwrite the default min and max zoom of [1, 5]
Input a value from 1 to 5 to set a default zoom on the chart
Display
Size
Enter a proportion of the total screen (a number from 0 to 1)
Use on multiple charts only
Display
Mobile size
Enter a proportion of the total mobile screen (Use on multiple charts only): enter a number from 0 to 1
Display
Custom CSS class
Set a customm CSS class to target this specific chart with CSS
Tutorial
ID
Enter an ID.
Change the ID to display the tutorial again.
All tutorials with the same ID will be displayed only once.
Tutorial
Message
Enter your message. This will be displayed to your users
Tutorial
Always show this tutorial
By default the tutorial is shown once only
⭐️ New
Legacy
Bubble category
Label
Enable drill-down
Drill
Show label on bubbles
Display bubbles' labels
X-axis
X axis
Y-axis
Y axis
Set bubble size
Bubble size
Show value on line
Show all values on line
Add complementary value
Additional info
Add user chart guide
Tutorial
Bubble opacity
Bubble opacity
Last updated
Was this helpful?