Softr Docs
Search…
Bar Chart
Bar Chart Block Overview
Bar Chart
With the Chart Block, you can add charts to your Softr app that get the data from Airtable. Let's review the configuration on the example of the Bar Chart layout. You can find the specifics of other chart types in corresponding articles under Chart.

Linking the Airtable Base

Linking Base and Table
This part is similar to the List block settings, where you need to select the Airtable Base and Table to get your chart data.
Please note, that you first need to have your Airtable account linked (through the Airtable API key) in Settings => Integrations => Airtable to be able to select a base and a table from your Airtable workspaces.
Here, you can also choose which View from the selected table you want to display and sort the data by one of the table fields. Now, let's see how we can set up the chart.

Conditional Filters

You might want to get back to this section after reviewing Chart Options and getting a better understanding of how everything works.
The Chart Conditional Filters work similar to List conditional filters. So, if you have a Bar chart that indicates the Event cost and the number of attendees for each day of the week, you can select to show only the records where the number of attendees is equal to 45. See below.
Setting a condition for the People field
In the data set we're using, there's only one entry where the value is "45, " so the chart will display just that.
The filtered version of the chart

Filtering Based on Logged-In User Parameters

Let's say we have a chart that shows how many tasks each member of the team has completed.
Each member's completed tickets
We can set a condition, so that each logged-in member only sees the number of his/her completed tasks.
Setting the condition for a logged-in user
So, if one of the team members (e.g. Jonathan) logs in and views the chart, he will only see his number as shown below.
Jonathan's record on Airtable
Filtered chart for Jonathan

Chart Options

Title and Subtitle

Here you set a Title and Subtitle for the block.
Title and Subtitle

Mode

It's possible to switch between dark and light modes as shown below.
Dark and Light modes

Type

Next, you have the Type dropdown where you select between different chart types. We'll discuss other types later on after reviewing the available config options on the example of the Bar Chart.

Orientation

This option can be used to change the orientation of the chart. In our example, the X axis (Horizontal axis) has the days of the week, and the Y axis (Vertical axis) has a numeric value to be assigned to each day of the week. As soon as you change the orientation, the days of the week will be moved to the vertical axis (and the numeric values to the horizontal one) thus changing the orientation of the chart bars from vertical to horizontal.
Changing the Orientation

Zoom Option

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

Legend

Using this option, you can show the chart legend at the top to indicate which bar color represents what. In the example below, we have a chart that represents how many people have attended a hypothetical event on each day of the week and how much the cost of organizing the event is for each day.
Legend
So, in the Y axis we have the Cost and People fields, which are shown in the Legend area at the top of the chart. We'll discuss the field selection for the horizontal and vertical axes in greater detail here.​
You can also change the position of the Legend to left or right using the Legend position option as well as use Legend direction to have the items listed below one another.
Lastly, users can hide any of the parameters by clicking on it as shown below.
Hiding a field

Tooltip Option

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.
Tooltip

Image Download Option

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

Selecting the Fields from Airtable

Now, let's see how we should organize our data on Airtable and link the fields to our chart block. Let's consider the same example we used previously, where for each day of the week we have the cost of the event and the number of people that showed up.
Fields added to X and Y axes
So, to display that through our chart, we can add the Day field (represent the days of the week) to the X axis (you can add only one field here) and the People and Cost fields to the Y axis. Generally speaking, you can add as many parameters to the Y axis as needed.
Here's how the data is organized on Airtable for these three fields we've used.
Data on Airtable
Please, also note that if you want the data to be displayed in the exact order you have on Airtable, you need to select that particular view (Grid view in this case) when linking the Airtable base.

​

​

Area Chart

Area Chart
The Area chart is basically a Line chart, where the area below the lines is color-filled.
Last modified 3mo ago