How to add data visualization in Bubble

You add data visualization in Bubble by placing a chart element on the page (usually from the built‑in Chart element or a plugin like “Chart.js” or “ApexCharts”) and then binding that chart’s Data Source to your Bubble database fields. Bubble charts read a list of things, so you usually create a Search for… and specify which field becomes the X‑axis and which becomes the Y‑axis. Once the chart can read a clean list of numbers or dates, it will render automatically.

What “data visualization” means in Bubble

Bubble doesn’t generate charts automatically. You add a Chart element to the page (Bubble’s built‑in or a plugin). A chart works just like a repeating group: it expects a list of Things. From this list, you tell the chart which field is the value to plot.

• Bar/Line charts need a list of numbers or dates.
• Pie/Donut charts need categorical data + a numeric value.
• Time‑based charts must use a date field returned from the database.

How to add a chart (simple practical steps)

Add the built‑in Chart element: go to the Visual Elements panel → drag Chart element onto the page. Choose the chart type in its property editor. Then set:

• Type of content → the Bubble data type you want to visualize (e.g., “Sales Record”).
• Data Source → “Search for Sales Records”.
• Value expression → the field to plot (e.g., “Amount”).
• Label expression → the field used as labels (e.g., “Created Date:formatted as…").

Helpful example

If your database has a type Transaction with fields amount (number) and date (date), the chart’s Data Source might be:

// Data Source inside the chart element
Search for Transactions:sorted by date

Then set:

• Value expression → Current item's amount
• Label expression → Current item's date:formatted as MM/dd

Useful plugin notes

Bubble’s built‑in charts are fine for simple visuals. For advanced styling or interactivity, install a plugin like ApexCharts. These work the same way: they expect a list of Things or a list of numbers you feed through their element properties.

Filtering and dynamic dashboards

You can add dropdowns or date pickers and use them to filter the chart’s Search for… expression. Anything that returns a list will instantly update the chart. This is how most Bubble dashboards are built.