Chart.js in Webflow

Tutorial

Step 1:

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

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

Step 2:

Initiate a canvas with this line
(You can use this id or choose a different one)

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

Step 3:

Insert the code with the chart settings

<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>

Step 4:

Have a great chart

Step 5 (Otional):

Edit settings by the documentation