Bar Chart

Bar Chart layout 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 from the Data tab 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.

If you want your chart values to appear in the same order as you have them on Airtable, you need to select a specific view under Default View to fetch the same sorting or filtering that view has on Airtable.

Conditional Filters

You might want to get back to this section after reviewing block's Features and getting a better understanding of how everything works.

The Chart Conditional Filters work similar to List conditional filters and can be found at the bottom of the Data tab in block settings. 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

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

Mode

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

Dark and light modes

Type

Next, you have the Type parameter 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.

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.