# Bubble / Scatter Chart

*Skill Level: Beginner*

## Before You Begin

* Know about [MagicText](https://help.adalo.com/component-basics/inserting-dynamic-text), and [Actions](https://help.adalo.com/action-basics/action-basics).
* You'll need a collection with at least 2 records and at least two Number fields (for X and Y values). A third Number field is needed if you plan to use bubble sizing.

***

## Overview

The Bubble / Scatter Chart component visualizes numeric data from your collections as an interactive chart. Each record in your collection becomes a data point on the chart, positioned by two Number fields and, optionally, sized by a third.

It supports two chart types:

**Bubble Chart:** Each data point is displayed as a circle. The X and Y positions represent two numeric values, and the bubble size represents a third. Use this when you want to compare three dimensions of data at once.

**Scatter Plot:** Each data point is displayed as a fixed-size dot. Only X and Y values are used. Use this for simpler two-variable comparisons.

This component is useful for dashboards, comparisons, and visual data analysis. It does not modify your data. It reads from your collection and renders it visually.

When first added to a screen, the chart displays placeholder data so you can preview the layout and styling. Once connected to a collection with valid records, it automatically switches to real data.

***

## How to Use

### Adding the Component

* Drag the **Bubble / Scatter Chart** component onto your screen.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FBZd3jtgoaj7Tw5V6jY2M%2Fimage.png?alt=media&#x26;token=2b44aee3-503a-425c-b08c-89d20ab6f75b" alt="" width="375"><figcaption></figcaption></figure>

* When first added, the chart displays placeholder data so you can preview the layout and styling.
* Once connected to a collection with valid records, the chart automatically displays real data.

### Connecting Your Data

#### What Data to Display

Select the collection that contains the data you want to visualize.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F6FjrHW9MdFXEUmBl47Uo%2Fimage.png?alt=media&#x26;token=2a4f8c66-5030-4cf0-83d6-a29a38283168" alt="" width="188"><figcaption></figcaption></figure>

Each record becomes one bubble or dot.

* X Value: Select a Number field for the horizontal (X-axis) position.
* Y Value: Select a Number field for the vertical (Y-axis) position.
* Size Value (**Bubble Chart Only**): Select a Number field that determines bubble size. Larger values produce larger bubbles.
* Bubble Label: Select a Text field used for either Tooltips or Legend entries.

#### Chart Type

* Bubble Chart
* Scatter Plot

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fl8lGYW41w1jbzVeihRcA%2Fimage.png?alt=media&#x26;token=a331efb1-0f31-45bf-9730-0979cfe86264" alt="" width="321"><figcaption></figcaption></figure>

Additional options:

* **Dot Size** (Scatter only)
* **Min / Max Bubble Size** (Bubble only)

### Choose Your Colors

#### Color Mode

* 1-Color
* Monochrome
* Custom (uses hex codes from your collection)

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F7dcL9Vr5exZB2h7rnogv%2Fimage.png?alt=media&#x26;token=9f571b05-921e-4509-bdef-c18d11a8c0a9" alt="" width="316"><figcaption></figcaption></figure>

If using Custom mode, your field must contain valid hex values:

```
#FF5733
```

### Axis & Grid

* Set **X Axis Range** and **Y Axis Range** to Auto or Manual.
* Enable or disable grid lines.
* Show or hide axis labels.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FPIrS37GsExqGmkdvT3ye%2Fimage.png?alt=media&#x26;token=6c22b645-1e1d-4b74-a270-a7fb667a4119" alt="" width="316"><figcaption></figcaption></figure>

If bubbles are missing, switch axis ranges to **Auto** to test.

### Tooltips & Legend

* Choose when tooltips appear: On Hover, Always, or None.
* Toggle **Show Legend** on or off.
* Set legend position.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FxD9qsdjKNNIRy1k9OAdb%2Fimage.png?alt=media&#x26;token=d102bc46-0f21-4f57-a017-b2d949ce8d8f" alt="" width="322"><figcaption></figcaption></figure>

On mobile, tap a bubble to show its tooltip.

### Interaction

* Choose **Action Trigger** behavior.
* Add a **Bubble Click Action** to make bubbles interactive.

## Troubleshooting

**Only placeholder data appears**

Make sure:

* Your collection has at least 2 records.
* X and Y fields are Number fields.
* Records are not empty.

**No bubbles are showing**

Check:

* X and Y are mapped to Number fields.
* Manual axis ranges include your data values.
* Size Value (Bubble mode) is mapped correctly.

Switch the axis range to **Auto** to test.

**Custom colors are not working**

Ensure:

* Values start with `#`
* They are valid hex codes (e.g. `#FF5733`)
* Named colors like `red` are not used

**Bubbles overlap**

Try:

* Lowering Bubble Opacity
* Reducing Max Bubble Size
* Filtering your collection

### Still Need Help?

If needed, contact [**Adalo Support**](https://info.adalo.com/submit-a-support-ticket) and include a screenshot of your settings, your collection field types, and a short description of the issue