# Bubblechart

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-151b05b0da154cc5ead0b960b164e50d5424644f%2Fillustration_bubblechart_NEW.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## 🧭 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

{% tabs %}
{% tab title="New Bubblechart" %}
**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.

{% @arcade/embed url="<https://app.arcade.software/share/aW9Zf0mmQBNpuEs6mLWx>" flowId="aW9Zf0mmQBNpuEs6mLWx" %}

**Chart Configuration Step-by-Step**

|                           | Option                  | How does it work?                                                                                                                                                                                                                                                                                                                       |
| ------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **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               | <p>Precision determines the level of detail in how your values are displayed. By default, measures use a <code>.2f</code> format, meaning they are shown with two decimal places.</p><p><strong>Example:</strong><br>A value of <code>3.14159</code> will be displayed as <code>3.14</code> when using <code>.2f</code> formatting.</p> |
|                           | 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               | <p>Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.</p><p><em>Note: Sentiments can be customized in the app theme.</em></p>                                                                                                                            |
|                           | 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**

|              | Option         | How does it work?                                                                                  |
| ------------ | -------------- | -------------------------------------------------------------------------------------------------- |
| **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. |
| {% endtab %} |                |                                                                                                    |

{% tab title="Legacy Bubblechart" %}
This page provides a step-by-step guide for creating a barchart using the legacy design.

<mark style="color:red;">\*</mark>**Mandatory parameters**

<table><thead><tr><th width="144.33333333333331">Section</th><th width="247">Option</th><th>Configuration tutorial</th></tr></thead><tbody><tr><td></td><td>Dataset<mark style="color:red;"><strong>*</strong></mark></td><td>Select the dataset used by the chart</td></tr><tr><td></td><td>X axis<mark style="color:red;"><strong>*</strong></mark></td><td>Column containing x axis value</td></tr><tr><td></td><td>Y axis<mark style="color:red;"><strong>*</strong></mark></td><td>Column containing y axis value</td></tr><tr><td>Legend</td><td>Display legend</td><td>Toggle to activate legend display</td></tr><tr><td>Legend</td><td>Additional info</td><td>Add another column for more information on the legend</td></tr><tr><td>Legend</td><td>Default selected bubble</td><td>Choose the first, last or the name of the label</td></tr><tr><td>Legend</td><td>Display a color gradient legend</td><td>Toggle to display a color gradient legend</td></tr><tr><td>Legend</td><td>Modify gradient color</td><td>Enter the min and max color (HEX (‘#…’) code)</td></tr><tr><td>Drill</td><td>Drill</td><td><p>The first bubble you see is the parent bubble.</p><p>Click on it to see it’s children</p></td></tr><tr><td>Drill</td><td>Level</td><td>Column containing parent or child level information</td></tr><tr><td>Drill</td><td>Group</td><td>Column containing the name of the parent bubbles to group them</td></tr><tr><td>Drill</td><td>Levels order</td><td>Enter the value of the parent bubbles as the 1st entry and the level value of the child bubbles as 2nd entry</td></tr><tr><td>Colored Zone</td><td>Quadrants</td><td>Divide your bubble chart in 4 colored zones</td></tr><tr><td>Colored Zone</td><td>Quadrants - Configuration type</td><td><p>Select the configuration type for quadrant:</p><ul><li>hardcoded: static position of the quadrant</li><li>dynamic: depending on values within the dataset</li><li>from decile: typing figures between 1 to 10 to automatically divide the chart</li></ul></td></tr><tr><td>Colored Zone</td><td>Quadrants - X</td><td>Column containing x axis value</td></tr><tr><td>Colored Zone</td><td>Quadrants - Y</td><td>Column containing y axis value</td></tr><tr><td>Colored Zone</td><td>Color coding</td><td>Add a color coding in the zones Input Order (4 max): top left, top right, bottom left, bottom right</td></tr><tr><td>Colored Zone</td><td>Quadrant legend</td><td>Add a legend in the zones Input Order (4 max): top left, top right, bottom left, bottom right</td></tr><tr><td>Colored Zone</td><td>Bisector</td><td>Divide your chart in 2 zonesDon’t forget to add a color coding and a legend!</td></tr><tr><td>Colored Zone</td><td>Bisector X axis</td><td>Column containing x axis value</td></tr><tr><td>Colored Zone</td><td>Bisector Y axis</td><td>Column containing y axis value</td></tr><tr><td>Colored Zone</td><td>Bisector - Color coding</td><td>Add a color coding in the zones Input Order (2 max): top left &#x26; bottom right</td></tr><tr><td>Colored Zone</td><td>Bisector - Zones legend</td><td>Add a legend in the zones Input Order (2 max): top left &#x26; bottom right</td></tr><tr><td>Enrich Chart</td><td>Bubble size</td><td>Column containing bubble size value</td></tr><tr><td>Enrich Chart</td><td>Bubble color</td><td>Column containing bubble color value/category: it can be a number or a text</td></tr><tr><td>Enrich Chart</td><td>Line</td><td>Add a line on top of your bubble chart to display an average, an objective of revenue...</td></tr><tr><td>Enrich Chart</td><td>Line - X axis</td><td>Column containing x axis value</td></tr><tr><td>Enrich Chart</td><td>Line - Y axis</td><td>Column containing y axis value</td></tr><tr><td>Display</td><td>Display bubbles' values</td><td>Toggle to display the value on the bubbles</td></tr><tr><td>Display</td><td>X axis scale</td><td>Use it to define the scale for the X axis: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)</td></tr><tr><td>Display</td><td>Y axis scale</td><td>Use it to define the scale for the Y axis: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)</td></tr><tr><td>Display</td><td>Bubble size scale</td><td>Use it to define the bubbles size scale: choose 2 bounds (if you’re displaying %, use bounds between 0 and 100)</td></tr><tr><td>Display</td><td>Overwrite default bubble's opacity</td><td></td></tr><tr><td>Display</td><td>Recycle bubbles colors</td><td>Reuse bubbles color when chart data changes (filters or requesters).</td></tr><tr><td>Display</td><td>Zoom</td><td>Toggle to enable zoom</td></tr><tr><td>Display</td><td>Overwrite the default min and max zoom of [1, 5]</td><td>Input a value from 1 to 5 to set a default zoom on the chart</td></tr><tr><td>Display</td><td>Size</td><td><p>Enter a proportion of the total screen (a number from 0 to 1)</p><p>Use on multiple charts only</p></td></tr><tr><td>Display</td><td>Mobile size</td><td>Enter a proportion of the total mobile screen (Use on multiple charts only): enter a number from 0 to 1</td></tr><tr><td>Display</td><td>Custom CSS class</td><td>Set a customm CSS class to target this specific chart with CSS</td></tr><tr><td>Tutorial</td><td>ID</td><td><p>Enter an ID.</p><p>Change the ID to display the tutorial again.</p><p>All tutorials with the same ID will be displayed only once.</p></td></tr><tr><td>Tutorial</td><td>Message</td><td>Enter your message.<br>This will be displayed to your users</td></tr><tr><td>Tutorial</td><td>Always show this tutorial</td><td>By default the tutorial is shown once only</td></tr></tbody></table>
{% endtab %}

{% tab title="New vs. Legacy Configuration" %}

| **⭐️ 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          |
| {% endtab %}            |                         |
| {% endtabs %}           |                         |