Chart.js - SOLUTION

Community resources Webflow Tips
1

Hi, I found a few threads around trying to implement chart.js into Webflow. I have used an html embed element, but you can use a div if you like.

  1. Add the following code to your footer:

    Check here for the latest CDN links: Chart.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

  2. Add a html embed element to your page. Note that if you want a responsive chart, can you set those properties to the html embed element itself.

  3. Add the following code into the embed:

<canvas id="donut" width="400" height="400"></canvas>

  1. Now you need to add your chart code into the footer in the page settings. To get the chart you want, you will need to be able to read / work with / write JS, or at least understand the Chart.js documentation.

    new Chart(document.getElementById(“donut”), {
    “type”: “doughnut”,
    “data”: {
    “labels”: [“Year to Date”, “Target”, "Year "],
    “datasets”: [{
    “label”: “Progress Year to date”,
    “data”: [100, 80, 270],
    “backgroundColor”: [“rgb(56, 232, 180)”, “rgb(0, 174, 239)”, “rgb(227, 227, 227)”]
    }]
    }
    });

  2. Publish and enjoy.

Finished Result: http://chart-js-e4d0b0.webflow.io/

12 Likes
2

greta solution, thank you for that

4

Hi,

With some difficulty I have managed to implement the chartjs solution after a couple of hours of troubleshooting!

Just in case there is anyone visiting this post I think there are some problems with your code above as I just couldn’t get it to work, there seems to be some differences with the code I eventually got to work for a doughnut:

new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }
    }
});

Anyone trying to implement this can visit two useful sites, the chartjs getting started page:

You can then go to an individual chart page like this for doughnuts:

Also here is a useful page with examples of the full code you need for each sort which was useful for me as I am not a coder and the chartjs site gives examples but not full as they presume you can fill in the gaps!

Another useful link showing animated examples: Chart.js | Samples

Also just for clarity:

  1. The script calling js file from cloudflare goes in the custom code field for header in site settings or the inside header tag on the page settings
  2. The code with the chart options goes into the beforetag field in page options
  3. The canvas id code goes into the HTML embed document custom code field (make sure you use the same ID as you have called out in the chart details, in my example above it is “doughnut-chart”). Give your DIV some width and height.
2 Likes
5

@johnsherwin Do you have a read-only webflow link I can look at to see how you did this? I can’t seem to figure it out. Thanks for your help!

6

@AlexMurton Do you have a read-only webflow link I can look at to see how you did this? Having problems…

7

Anyone had any luck with it, i’ve followed another example and can’t get it to work?

8

This works!!

Thanks!!!

9

Multiple charts on same page renders issues, any hints on this?