Chart Block Overview

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

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.

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.

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

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

Here you set a Title and Subtitle for the block.

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.

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.

As you can see, each record has a Type field, a Sub-type, and a corresponding value, which is negative in case of expenses.

Let’s say we want to display the sum of incomes and expenses for each month.

For that, we have to define what is our metric. In our case incomes and expenses are stored in Airtable Value field, and the metric should be a sum of those.

In the chart block settings, we need to choose Aggregate function → Sum, and Field → Value

The Aggregate function has the following options:

Under Groupings, we need to select the field by which we want our metric to be grouped and shown on the X-axis. In our case it is the Date field.

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

Now, let’s explore each setup option in greater detail.

Time interval

When using date or timestamp fields, you can further group your date-like records by Time interval option:

Let’s say our time interval is set to month:

When we change time interval to a year, metric values get aggregated for each year:

For the day and month time intervals you can choose relevant display formats:

Sort by

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

Example: If our Group by field is the Date field, and we select “Categories //A-Z,” we’ll have the following ordering: 2019-01, 2019-02, 2019-03, etc. (by alphabetical order), as on the screenshot above.

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.

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.

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

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.

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

Sub-grouping

Next, you can enable the Sub-grouping 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.

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

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

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.

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.

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

Sometimes, you might want to hide data freshness information, typically in cases where a chart serves purely as a visual aid for your narration on a website, rather than being the object of analysis.

Here’s a little custom CSS snippet that will allow you to hide the data freshness information: