How to add a responsive chart to Blogger using ChartJS

How to add a responsive chart to Blogger with ChartJS - A blog will look more attractive if there are pictures or charts in it. Of course, you'll also want to add at least a chart, say a statistical chart, to your blog page. It's been a really good day! You are lucky because I have prepared a very easy way for you. In this tutorial, I will explain to you the easiest way to use ChartJS to add a responsive chart on any page on your blog.

What is ChartJs?

If you don't know what ChartJS is, it doesn't hurt me to give a brief explanation about ChartJS.

ChartJS is a JavaScript library or framework that functions to create lines or shapes on a canvas element based on the array provided. The created lines and shapes will display a graphic with adjustable labels. ChartJS also supports various types of charts, from line charts, bar charts, radar charts, and so on. For more details, you can go directly to the official ChartJS website.

Add a Responsive Chart to Blogger

By default, the charts displayed by ChartJS are unresponsive unless we set some options in the script. But you don't have to worry because I have arranged it for you.

Make a div element

To add a chart with ChartJS, we recommend that you create a div element that will hold a canvas element. This div element should have a width of 100% and a height of about 350 pixels. Use the style attribute on the div to set the width and height.

In this example, I will create a div element with the id myStatBox and set the width to 100% and the height to 350px.

<div id="myStatBox" style="width:100%; height:350px;"></div>

Keep in mind that in this div element there is only one element, namely the canvas element which ChartJS will go to to draw a chart.

Make a canvas element within the div element

The next step is to create a canvas element inside the div element you just created above. This canvas element only has one attribute, namely Id. In this example, I'm using dailyStat as the id. By adding these elements, then your HTML code will be like below.

<div id="myStatBox" style="width:100%; height:350px;">
<canvas id="dailyStat"></canvas>
</div>

Add the Scripts

The final step is to add JavaScript at the very bottom of your blog page (post). Don't add it in Blogger template. Add the script to your page or blog post. This way, you can create different charts on different pages or blog posts.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const data = {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
   datasets: [{
   label: 'Daily Visits',
   data: [15, 22, 16, 13, 13, 21, 40],
   backgroundColor: [
      'rgba(255, 26, 104, 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)',
      'rgba(0, 0, 0, 0.2)'
  ],
  borderColor: [
     'rgba(255, 26, 104, 0.5)',
     'rgba(54, 162, 235, 0.5)',
     'rgba(255, 206, 86, 0.5)',
     'rgba(75, 192, 192, 0.5)',
     'rgba(153, 102, 255, 0.5)',
     'rgba(255, 159, 64, 0.5)',
     'rgba(0, 0, 0, 0.5)'
 ],
 borderWidth: 1
 }]
};
const config = {
   type: 'bar',
   data,
    options: {
       responsive: true,
       maintainAspectRatio: false,
       scales: {
            y: {
                  beginAtZero: true
             }
         }
     }
};
const myChart = new Chart(
    document.getElementById('dailyStat'),
     config
);
</script>

If you notice, the script above has labels, label, data, and type variables. Here is a brief explanation:

1. Labels: this is a variable that holds the labels of your data. Ini this case, if you want to show daily statistics, your labels may be days in a week.
2. Label: this is a variable that holds the title of your chart. For example, in this case, we use Daily Visit.
3. Data: this is a variable that holds the numbers of visit that your blog get daily, or anything. The number of data must be in line with the number of labels, including the sequence.
4. type: this is a variable that holds the type of the chart. In this case, we use bar so that a bar chart is drawn on the canvas. You can change it to line, radar, bubble, area, and so on. You can check the complete list of chart types on ChartJS website.

Now, what you need to do is adjust the variables to match your need (what statistic you want to show?). Adjust the labels, label, data, and type. Then, last, save changes. When you refresh the page, you will see a chart on that page. You can test whether or not it is responsive by resizing the window of your browser. Of course, I know it is responsive.

That is how you can add a responsive chart to Blogger using ChartJS. You can download the script below. Thank you for reading.