How to build charts and graphs in Bubble

You build charts in Bubble by adding a chart element (usually from the built‑in Chart plugin or a plugin like Chart.js), then connecting its Data source to a list of things in your database. The chart automatically reads your fields (like dates, numbers, categories) and turns them into bars, lines, or pies. The main work is preparing clean data using Search for..., grouping with Group by, and formatting the values so the chart can plot them.

How Bubble Charts Work

Bubble doesn’t generate values for you. A chart needs two things: a list of labels (like dates or categories) and a list of numeric values (like totals or counts). The chart element reads these directly from your database through Search for Things. If your data is messy, you use Group by to structure it.

• Label field → what appears on the X‑axis (example: Created Date:formatted as)
• Value field → numbers the chart plots (example: Sales Amount, Count of Users)

Basic Steps to Build a Chart

Add the element (Bubble’s built‑in Chart element). Then set:

• Type of data: usually your Thing (Sale, Task, Order)
• Data source: Search for YourThing
• Group by (optional): needed for totals per period or per category
• XAxis labels: choose the field for labels
• Values: choose the number to plot

Example: Total Sales Per Month

If you have a Sale data type with a amount (number) and a created date, you can group by month.

• Data source → Search for Sales:grouped by Created Date:month
• Label → This group’s Created Date:formatted as "MMM"
• Value → This group’s amount:sum

Example: Chart Using API Data

If your API returns a list of values, you can feed it directly to a chart if the response is a list of objects. Use the API Connector and then set the chart’s data source to the API call.

{
  "month": "Jan",
  "total": 1200
}

In the chart element:

• Labels → Current page data's month
• Values → Current page data's total

Common Fixes

• If a chart shows blank: check privacy rules (user may not be allowed to see the data).
• If values look wrong: ensure the Group by aggregation (sum, count, average) is correct.
• If dates look messy: use :formatted as on the label field.