Streaming live at 10am (PST)

Chart.js - SOLUTION


#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: https://cdnjs.com/libraries/Chart.js

  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/