Oct 17, 2019
Back to all Elements
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>
Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.
.png)
.png)