Follow Us On Google News. Follow Now!

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/chart.js@2.9.3/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

4 comments

  1. Dear brother💛 Can u show us How to Create Comment like this template? Thank u

    From: Your big friend💚
    1. If you're looking for pop up style comments in blogger , then please go to settings in blogger dashboard and choose the style of comments you are looking for
    2. If your asking for code parsing style comments in blogger then please wait for our next article . I'll try to upload it within a week .
    3. https://www.thetaluat.xyz/2022/01/how-to-add-message-comments-with-parse.html

      Check out post
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.
Created By

M Taluat .xyz

All Posts are Protected By DMCA.
Reproduction in Any Form is Strictly Prohibited!

Developed by M Taluat