We use cookies to improve our service. Learn more.

Reference / App Components

Charts

Visualize data in colorful charts.

When we add a Chart component, we can display data from either:

  1. A sheet in your spreadsheet
  2. A Relation column in the data editor

Once we choose the source, the chart will automatically present our data. We can now choose a style of chart and affect how the data is calculated and displayed.

Choosing a chart style
Choosing a chart style

Presenting the data

Whether we choose a sheet or a relation for the source, the chart will default to presenting the data for all the rows based on the first column. However, we can use the Label and Quantity properties to change this.

For example, suppose we have a sheet which shows three orders for a shop.

OrdersQuantityCustomer
Apple pie muffin20Sam Smith
Bread pudding1Lana Del Ray
Honey Chia8Barry Manilow
Apple pie muffin3Freddy Mercury

If we have only the Label property connected to the Orders column, then the chart will count all of the rows with the same value in that column and group those in the chart as three segments, each with a count of one. The chart then shows the total in the middle.

However, if we change the Quantity property to our Quantity column, then the calculation for the chart changes.

Now the chart shows how many of that particular item were ordered. We could also change the label to show the name of the customer instead.

Using a relation as a data source

A relation column can also be the data source for a chart. This allows you to make the chart component show the relevant data for different list items. For example, in this task management app, each user's chart shows their personal stats on their tasks.

To do this you need to have an existing relation column setup in the table in which you are adding the chart.

Updated 2 weeks ago
Was this helpful?