Bubble / Scatter Chart

The Bubble / Scatter Chart component allows you to visualize numeric data from a collection on an X and Y axis.

Skill Level: Beginner

Before You Begin

• Know about MagicText, and Actions.

• 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.

• 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.

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

Additional options:

• Dot Size (Scatter only)

• Min / Max Bubble Size (Bubble only)

Colors

Color Mode

• 1-Color

• Monochrome

• Custom (uses hex codes from your collection)

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.

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.

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 and include a screenshot of your settings, your collection field types, and a short description of the issue