Type: Bar Chart

Chart type overview.

Bar Chart
Bar Chart

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.

If you are using Airtable as a data source, 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 settings 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
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
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
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
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
Jonathan's record on Airtable
Filtered chart for Jonathan
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
Title and subtitle

Mode

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

Dark and light modes
Dark and light modes

Type

Next, you have the Type parameter where you select between different chart types. We'll discuss other types in the next sections under Charts 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 orientation
Changing 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
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
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 shortly.

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
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
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
Image download option

Selecting the Fields from a data source

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.

Mapping the cost and people fields
Mapping the cost and people fields

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
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.
Did this answer your question?
😞
😐
🀩

Last updated on December 6, 2022