How To Add Chart.js In Your Blogger

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have graphical representation of their data on their site.

Basically, Graphical Representation widget is a very beneficial Widget to have , it improves the way of expression of data in the blog.This Graphical Representation can be done by implementing Chart.js code on your blogger site.

So today we are going to learn in this blog how can we do it.

Bar Chart Demo

STEP 1:ADD JavaScript CDN TO THE Page

• Open Blogger Dashboard
• Create A Static Page Or Post Page
• And copy the below given Javascript CDN.
• Now , Paste the copied code On The Page
• Click On Save Page 

STEP 2:ADD HTML Code TO THE Page

• Now Again Copy the below given HTML Code.
• Now ,Paste the copied code On The Page
• Click On Save Page 

Hope You've have followed all of our above mentioned steps.

Javascript CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script><script>

Html code

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

<script>

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

        datasets: [{

            label: '# of Votes',

            data: [12, 19, 3, 6, 9, 3],

            backgroundColor: [

                'rgba(255, 99, 132, 0.2)',

                'rgba(54, 162, 235, 0.2)',

                'rgba(255, 206, 86, 0.2)',

                'rgba(75, 192, 192, 0.2)',

                'rgba(153, 102, 255, 0.2)',

                'rgba(255, 159, 64, 0.2)'

            ],

            borderColor: [

                'rgba(255, 99, 132, 1)',

                'rgba(54, 162, 235, 1)',

                'rgba(255, 206, 86, 1)',

                'rgba(75, 192, 192, 1)',

                'rgba(153, 102, 255, 1)',

                'rgba(255, 159, 64, 1)'

            ],

            borderWidth: 1

        }]

    },

    options: {

        scales: {

            y: {

                beginAtZero: true

            }

        }

    }

});

</script>

Conclusion

So today we have discussed about How To Add Chart.js To Blogger. I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.

Copyright © The Taluat