Chart Block Overview

Adding charts to your Softr app.

Using the Chart block, you can add different types of charts to your Softr app. The charts get the data from data sources.

💡
Please, note that the feature is only available for Professional and Business users.

In the following articles, you can get familiar with different chart layouts that are available. In this article, we’ll set up a chart (using a Bar Chart as an example) from the scratch and explain each configuration option.

To start configuring the chart, you first need to link it to a data source to start displaying your data. We are going to use Airtable for that purpose. So, let’s start.

Linking a data source

Linking an Airtable base and table
Linking an Airtable base and table
 

This part is similar to the List block settings, where you need to connect a data source from the Data tab to get your chart data.

💡
Please note, that you first need to have your data source linked in Settings => Data Sources to be able to connect a specific database.

Conditional Filters

Under the Source tab, you also have the Conditional Filters section. Chart Conditional Filters work similar to List conditional filters.

Features

Now, let's see what we have in the Features tab of block's settings.

Title and Subtitle

Here you set a Title and Subtitle for the block.

Title and subtitle
Title and subtitle
 

Type

Next, you have the Type parameter where you select between different chart types. Let’s select the Bar Chart type and move on to configuring our data.

Categories

Here’s when we start connecting our data to display it through the chart. We’re going to use an Airtable table with a database of quarterly incomes and expenses as shown below.

Airtable table with data
Airtable table with data

As you can see, each record has a Type field, a Sub-type, and a corresponding value, which is negative in case of expenses. So, our purpose is to calculate the sum of all the records for each month (January, February, and March) and show it with our Bar chart.

Under Categories, we need to select the field that we need to show on the X axis, which is the Date field in our case.

Setting up categories
Setting up categories

And under Value we are going to select the field that stores the values we want to aggregate (in our case, that’s the Value field) as well as the Aggregate function.

Selecting Value field and Aggregate function
Selecting Value field and Aggregate function

As a result, we have the following chart that shows the sum of incomes and expenses for each month.

Chart with income/expense value for each month
Chart with income/expense value for each month

So, that’s the basic setup we’ll be dealing with. Now, let’s explore each setup option in greater detail.

Sort by

Next, we have the Sort by dropdown, which will have the following options:

  • Categories // A-Z. Order by the Category field values from A to Z.
  • Categories // Z-A. Order by the Category field values from Z to A.
  • Values // A-Z. Order by the Value field values from A to Z.
  • Values // Z-A. Order by the Value field values from Z to A.

Thus, if our Category field is the Date field, and we select “Categories //A-Z,” we’ll have the following ordering: February, January, and March (by alphabetical order). See below.

Categories
Categories //A-Z sorting

We can also sort by the Value field. So, if we select “Values // Z-A,” the month with the highest value will come first, and chart bars will be sorted in ascending order as shown below.

“Values // Z-A” sorting
“Values // Z-A” sorting

Max categories

Further on, we can select how many categories (i.e. chart bars) should be displayed at most. So, if we set the number to 2, only the first two months will be visible on our chart.

Notion image

Lastly, we have two toggles. The first lets you Show axis label, which is the Date field in our example.

Showing axis label
Showing axis label

Include empty cells

The last toggle lets you choose whether you want to include empty cells in the category field. In the example below, we’ve removed one of the values in the Date field.

Data with an empty cell
Data with an empty cell

So, with “Include empty cells” toggle turned on, the chart will look as follows.

“Empty” shown as separate category
“Empty” shown as separate category

Value

Here, we set the field that’s going to be assigned to the Y axis as well as select an aggregate function that’s going to be applied if there are multiple records for each category.

The Aggregate Function has the following options:

  • Sum. Calculates the Sum of all the values for a given category.
  • Average. Calculates the average of all the values for a given category.
  • Min. Picks the smallest value of all the values of the category.
  • Max. Picks the biggest value of all the values of the category.
  • Distinct value. Adds up the number of records that contain a unique value. In our example, if we change the values for “January 2023,” so that there are two records with a value of “$4500,” this number will be 3.
    • Notion image
  • Count records. Adds up the number of records present in the category. In our example, each category has 4 records, so the value will be “4.”

Segment by

Next, you can enable the Segment by toggle to split up the chart into subcategories. In our data, we have a Sub-type field that indicates the exact type of each income or expense record. So, we’re going to segment our data by this field. The following image shows the resulting bar chart, where each month has four bars corresponding to each Sub-type value.

Notion image
 

Lastly, we can choose to Treat empty cells as 0 as well as Show axis label.

Options

Orientation

This option can be used to change the orientation of the chart from horizontal to vertical.

Switching chart orientation
Switching chart orientation

Show zoom

When this option is enabled, the users will be able to zoom into any area of the chart. There's also a Zoom out option that reverts the last zoom in action. See below how that works.

Zoom in and out
Zoom in and out

Show tooltip

When this option is enabled, the users will see a tooltip when hovering over each individual bar. The tooltip contains all the information about that specific bar.

Enable download

When this option is enabled, the users will be able to download the chart to their device in .png format.

Data sampling

To optimize performance, we use only a small sample of records to generate your charts in edit mode. But don’t worry. In both the live app and the preview mode, we use the max number of “records per dynamic block” specified in your plan.

Did this answer your question?
😞
😐
🤩

Last updated on March 28, 2023