Oct 17, 2019
White Arrow icon
Back to all Elements

Chart.js in Webflow

A short tutorial on how to implement a Chart.js plugin in a Webflow project

1. Add the chart.js file to the project. Best is in the page/projects custom code section, before </body> tag.

2. Initiate a canvas with <canvas> tags (HTML embed widget)

3. Call the chart.js and configure options.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

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

<script>

 

 var ctx = document.getElementById('myChart');

 var myChart = new Chart(ctx, {

   type: 'bar',

   data: {

     labels: ["1st", "2nd", "3rd", "4th", "5th"],

     datasets: [{

       label: 'Some Label',

       data: [10, 20, 30, 40, 50],

       backgroundColor: ["white", "#A5DBFF", "#B6E5F9", "#D1F0FF", "#8ED3FF"],

     }]

   },

 });

</script>

Copy


Preview:

Share:

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon