# Bubblechart

<figure><img src="/files/9pJiRznLdhSal1ZcxdDE" 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 %}           |                         |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-v3.toucantoco.com/visualizations-and-layouts/creating-visualizations/viz-gallery/new-viz-designs/bubblechart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.