CMS-driven Data Visualization Charts in Webflow

Have you ever needed to visualize some data on your Webflow website, but didn’t know how to get started? Well, then you’ve found the perfect article.

Today you’re gonna learn how to use Chart.js in Webflow to visualize your data directly through the Webflow CMS. It requires some custom code, but trust me, it’s super easy. Let’s go.

Chart.js bar chart

Before we start, I’ve made an example Webflow project for integrating Chart.js with Webflow that you can clone & check out by clicking here.

Chart.js

Chart.js is a quite small, easy-to-use data visualization Javascript library. It has tons of different charts and options to choose from, but in this article we’ll focus on just creating a simple bar chart with a few data points and labels.

Charts.js

CMS Setup

Let’s setup a new CMS collection that can be used as a dynamic database for multiple unique charts on the same page. We’ll go through each field needed one by one.

Title

As the Webflow CMS requires us to give each collection item a name or a title, we can use this as the title for our chart.

Chart ID

Each chart needs a unique ID. We can use a simple text field for this, but make sure that each ID is unique.

Chart type

Chart.js decides what type of chart to render by an option called type. It accepts text strings such as:

• bar
• doughnut
• line
• etc.

We can use a simple text field for this option as well.

Data points

In order to render a chart, we need some data. We can use a text field for this as well, but we’ll insert each data point as a comma separated string like this:

5, 92, 43, 123, 16

Labels

The last field we need is for the labels. This should be a text field as well, and similar to the data points, we’ll insert a comma separated string like this:

Horses, Ducks, Dogs, Cats, Capybaras

The collection

When we’re finished, an item in the collection should look something like the image below.

The collection

The code

Okay, now it’s time to write some code. The first step is to actually import the Chart.js library. You can do that by copying the CDN link from their documentation, and place it before the end body tag in the page/site settings of your Webflow project.

For each chart (or each collection item) we’ll need to add an embed element, where we’ll write the following code.

Creating a new canvas element

Chart.js renders each chart in a HTML canvas element. Therefore, we need to create a new canvas for each chart we want to render.

We can easily do this with the following line of code in our embed:

<div><canvas id=”chart-id”></canvas></div>

The chart ID has to be dynamic thought, since each chart needs its own unique canvas. We can use Webflow’s CMS embed fields and place our chart ID as the canvas id.

Embed fields

Converting a string to an array of integers

The first thing we need to understand is that Chart.js works with actual numbers (integers) in an array as data points.

When we’re using a text field for our data in the CMS, the data is actually a comma separated string, which Chart.js has no idea how to interpret.

To solve this, we can use the following function:

function intsToArray (data) {
  return data.split(‘,’).map(item => parseInt(item.trim(), 10));
}

This function will accept the data string as an argument, parse it, and will return an array of integers.

Converting a string to an array of strings

The second problem we’ll have to fix is to turn the labels string into an array of string. We can easily do this by writing another simple function:

function stringsToArray (data) {
   return data.split(‘,’).map(item => item.trim());
}

Initializing Chart.js

Feel free to reference the Chart.js documentation for this step.

A simple version of the needed boilerplate setup code looks like this:

new Chart(document.getElementById("chart-id"), {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3]
    }]
  }
});

As you can see, we need to fill in:

• The chart ID
• The type
• The labels for the data
• The label for the dataset
• The data

Since we already setup our CMS collection with all this data, we can use the embed fields to fill in each option.

As you can see, we’re using the “intsToArray” and “stringsToArray” functions for the data & labels respectively.

Publishing

That’s it! We’re done. When you publish your site, you’ll now see a pretty bar chart with the data from the CMS. It should look something like this:

Bar chart

If we simply change our chart type to “line”, you should see something like this:

Line chart

Conclusion

If you visit the Chart.js documentation, there are lots and lots of additional charts & options to play around with. Some of them need additional data, or parameters, but I’m sure you’ll figure it out.

If you have any questions, feel free to comment down below or hit me up through my website. Enjoy.

Don’t forget that you can clone my Chart.js example project on the Webflow showcase.