Skip to main content

Create charts from Airtable data

QuickChart is an open-source project for rendering charts. Generated chart images can be embedded in static locations such as websites, emails, PDFs, chat services, and many other places.

This guide shows how to create a chart that uses Airtable as a data source. Once you've connected a chart with Airtable, the chart will update automatically as data changes in the table or view.

QuickChart pulls data from Airtable and renders a chart image that is embeddable anywhere.
QuickChart pulls data from Airtable and renders a chart image that is embeddable anywhere.

Step 1: Put data in Airtableโ€‹

I am assuming basic familiarity with Chart.js and the QuickChart renderer. To learn more about how to get started, check out the Getting Started guide.

Let's suppose we have some data that looks like this:


We want to create a chart that shows Usage count and Payment bars for each Name.

Begin by creating a table in Airtable and entering your data into it. I've reproduced the above example in Airtable here.

Note that you can also create a view of an existing dataset.

Create a table or view with 1 column containing labels and 1+ data columns.
Create a table or view with 1 column containing labels and 1+ data columns.

Step 2: Get your Airtable personal access tokenโ€‹

In order for QuickChart to pull in your chart data, you'll need to provide a Personal Access Token.

To generate an access token, go to

Give it the following scopes:

  • data.records:read - See the data in records
  • schema.bases:read - See the structure of a base

Then, grant it access to whichever bases you want to use data from. Or, grant access to all workspaces.

Create an Airtable personal access token
Create an Airtable personal access token

Step 3: Create the chartโ€‹

Go back to your table and copy the Airtable URL from your browser. The URL should look something like this:

Next, we'll construct our Chart.js configuration and add a custom plugin called airtable. Here's an example:

type: 'bar',
data: {
datasets: [{
type: 'line',
label: 'Usage',
lineTension: 0.4,
borderColor: '#f82b60',
backgroundColor: '#f82b60',
}, {
label: 'Payments',
backgroundColor: '#19c0ff',
options: {
plugins: {
airtable: {
url: '',
labelField: 'Name',
dataFields: ['Usage', 'Payment'],

๐Ÿ‘‰ Edit the above configuration interactively in our chart editor.

The following parameters tell the plugin how to access your data:

  • apiKey: Airtable personal access token, required to connect QuickChart with Airtable
  • url: URL to Airtable, required to download data from the table

These parameters tell the plugin how to map the data onto a chart:

  • labelField: The field/column to treat as labels on the X-axis of the chart.
  • dataFields: The field/column to treat as numeric data series on the chart.

Like any other QuickChart chart, we will URL-encode the configuration and pack it into the QuickChart endpoint at

When you render the above URL in an image tag, you'll see the image below:

<img src="" />
Data for this image is pulled dynamically from Airtable
Data for this image is pulled dynamically from Airtable

This data is being pulled directly from Airtable. If you update the data in Airtable, future chart loads will pull in the new data (there might be up to a 60 second lag).

This image can be directly embedded in on a website, email, PDF, etc. using a standard <img> tag.


It's best practice to URL encode the chart JSON parameter. Nearly every programming language has a built-in function to do this. URL encoding your JSON will avoid problems with more complex chart specifications.

Filtering dataโ€‹

QuickChart supports Airtable views, so you can always provide a filtered view url. QuickChart also supports dynamic filtering using the filter property.

For example, this configuration will display specific labels according to custom Javascript logic:

// ...
plugins: {
airtable: {
url: '',
labelField: 'Name',
dataFields: ['Usage count', 'Payment'],
filter: {
// Exclude Joe's column
label: (labelName) => labelName !== 'Joe',

Customizing your chartโ€‹

QuickChart supports a huge range of charts and data visualizations. Pulling your data from Airtable will let you spread your data across nearly any digital format.

Have a look at the Chart Gallery to see what's possible. We showed a bar chart and a line chart above, but you can also do pie charts, radar charts, sparklines, financial charts, and much more!

You can also customize the look and feel of the chart. Refer to the documentation to learn how to customize titles, axes, tick marks, colors, labels, and more.

Because QuickChart is based on Chart.js, we also highly recommend using the Chart.js documentation as you're building the chart configuration. For starters, try altering the colors and labels in the Chart Editor.

Further readingโ€‹

Feel free to reach out with any questions!

QuickChart is open source for individuals and organizations that wish to self-host. Or, you can sign up for QuickChart in order to generate charts on our infrastructure.

Ian Webster

About the author

Ian Webster is a software engineer and former Googler based in San Mateo, California. He has helped Google, NASA, and governments around the world improve their data pipelines and visualizations. In 2018, Ian created QuickChart, a collection of open-source APIs that support data visualization efforts.

Email ยท LinkedIn ยท Twitter