How to Create Awesome Charts with Chart.js-Part-2

In the first part of this tutorial, we discussed how to create bar charts using chart.js. Apart from that, we also discussed how to apply data labels to our charts and use more than one datasets in our charts. In this second part of the same tutorial., we will discuss how to create more types of awesome charts, and edit the tooltip.

As we already highlighted in the previous part, chart.js is an excellent tool for inserting awesome looking charts in html web pages. You can use it to insert charts in any website including those made using Wordpress. Particularly, if you want to use chart.js with Wordpress, you can insert the chart script into your page using the Gutenberg html block.

Now, we will take a look at how to create line charts, and other types of charts like pi charts and doughnut charts using chart.js. Chart.js also offers customizations including tooltip and datalabels, as well as the ability to change background color among the others.

We will start by creating a simple line chart with some basic data, which we have included below in the form of a table. This table includes data on the number of employees working for a specific company from 2018 to 2022.

Based on this data, we will draw a line chart.

Install Chart.js

As we have discussed in detail in the part 1 of this tutorial, you need to have chart.js installed on your server to create awesome charts using chart.js. You can install it on your server using npm with the following command:

npm install chart.js

However, the easiest method for installing chart.js on your website is to use the cdn link and include it in the header to create simple HTML5 charts. Just include the following script inside the head tag and you are ready to create and display awesome charts using chart.js

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

Draw Line Chart Using Chart.js

Now, let’s create our line chart with the data we have. There is no major difference in the process of creating a bar chart, a line chart or another type of chart. The only thing you need to do is to change the type of chart and then you can include the dataset in the same manner as you do for creating the bar chart. Change the chart type to line and your script will render a line chart with the same data instead of a bar chart.

We will begin by creating the canvas element to draw our chart.

<div>
  <canvas id="myChart"></canvas>
</div>

Following that, we will include the chart.js cdn link and then the script for rendering the chart.

CDN Link:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Chart Script:

<script>
  const ctx = document.getElementById('myChart');

new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['2018', '2019', '2020', '2021', '2022'],
      datasets: [{
        label: '# of Employees',
        data: [120, 180, 200, 220, 250],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Overall, our code will look like the following:

<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart');

new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['2018', '2019', '2020', '2021', '2022'],
      datasets: [{
        label: '# of Employees',
        data: [120, 180, 200, 220, 250],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

The above script outputs a chart that looks like the following:

Line Chart With Data Label Using Chart.js

However, you can see that there are no data labels included in the chart above. The user will be able to check out the values only when he scrolls on the chart area. Users can check out the values by scrolling on the chart area and checking out the tooltip.

So, if we want to add data labels also to our line chart, we will need to include the cdn link for the data label plugin in our script and then register datalabels.

The data label plugin can be installed using a cdn link. You can add the link as a script to the charts where you want to insert data labels.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script> //integrate dataLabels plugin

Once we have included the data label plugin, we need to register it for our chart.

Chart.register(ChartDataLabels);

The rest of the chart follows the same format as the initial bar chart.

<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>

<script>
  var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['2018', '2019', '2020', '2021', '2022'],
      datasets: [{
        label: '# of Employees',
        data: [120, 180, 200, 220, 250],
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Now, we have increased the borderwidth for the line chart so that we have a thicker line. We can make some more customizations to make the chart look more attractive. For example, we can fill a color in the background area by setting fill to true and then using backgroundColor property.

fill: true.
backgroundColor: 'rgb(127,255,212, 0.9)',

Apart from that, if we want, we can remove the grids. We can do that by setting the display property to false for the grids.

scales: {
        x: {
     ticks: {display: true},
grid: {display: false}
          },
          y: {
                    ticks: {display: false},
         grid: {
         display: false 
         }
        }

In the above code, you can see that we have also set the ticks to false on the Y axis, while ticks on the x axis are enabled. If you want, you can keep ticks on both the axes enabled. We will also enable a background color to fill the chart area. This is going to entirely change the look of our line chart.

<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
  var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
    type: 'line',

    data: {
      labels: ['2018', '2019', '2020', '2021', '2022'],
      datasets: [{
        label: '# of Employees',
        data: [120, 180, 200, 220, 250],
fill: true,
          backgroundColor: [
   
'rgb(127,255,212, 0.9)'
      
    ],

        borderWidth: 2
      }]
    },
    options: {
      scales: {
        x: {grid: {display: false}},
        y: {
          beginAtZero: true,
          ticks: {display: false}, grid: {display: false}
        }
      }
    }
  });
</script>

At the end, we have a beautiful line chart with colored background and more customizations. The grid lines are disabled for both the axes. If you want to have grid lines, just set them to true.

We will delve into more customizations in the coming sections but first let’s create charts of some more types.

Create a pie chart and doughnut chart

Creating pie or doughnut chart in chart.js does not require any special or different configuration. All that you need to do is to change the chart type from bar or line to pie to doughnut chart.

For example, we will create a pie chart with the following data:

The table above shows the revenue of a fashion brand from each of its fashion labels for one year. Now, we will create a pie chart with this data. Apart from changing the chart type to pie chart, we have not made any major changes to the chart’s code. We have removed the background color from the code since each slice of the pie will have a different background color automatically.

<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
  var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
    type: 'pie',

    data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [{
        label: '# of Employees',
        data: [25000, 54000, 34000, 30000, 20000],


        borderWidth: 2
      }]
    },
    options: {
      scales: {
        x: {grid: {display: false}},
        y: {
          beginAtZero: true,
          ticks: {display: false}, grid: {display: false}
        }
      }
    }
  });
</script>

Now, you can see that a beautiful looking pie chart is ready. There is no major difference between the pie and doughnut charts and except changing the chart type in these two cases, you do not have to make any other major changes.

You have seen that the chart automatically applies a different color to each of the slices. However, if you want you can assign a color of your own choice to each slice in the following manner:

backgroundColor: [
      'rgba(255, 99, 132, 0.5)',
      'rgba(255, 159, 64, 0.5)',
      'rgba(255, 205, 86, 0.5)',
      'rgba(75, 192, 192, 0.5)',
      'rgba(54, 162, 235, 0.5)',
    ],

Changing the position and color of datalabels:

Sometimes you may need to adjust the position of the data labels for your chart. The position of the data labels can be easily controlled using two properties - anchor and align. There are other properties also to adjust the positioning of datalabels. However, the align and adjust properties are the most important properties in this regard.

For anchor, you can set three values including start, end and center. However, for align, you can set six values including start, end,center, right, left, top and bottom. To find the most suitable position, it is best to try some different combinations.

For example, you can try align: right, anchor: center, or align: bottom, anchor: start and so on.

In the above example, if you want the data labels closer to the circumference of the circle, then you should try anchor: end, and if you want it near the center, then you should try anchor: start. The align option can be used to further optimize the position of data labels on the chart.

It is applicable in case of any chart including pie chart, doughnut chart, line chart, bar chart or any other type of chart. Since, data labels are useful for displaying information related to the chart on the canvas, it is also important to position them in the right manner and at the right position.

<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
  var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
    type: 'pie',

    data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [{
        label: '# of Employees',
        data: [25000, 54000, 34000, 30000, 20000],
        borderWidth: 2
      }]
    },
    options: { plugins: {
      datalabels: {
        color: 'black',
        anchor: 'end', 
        align: 'bottom',
        
      }
    },
      scales: {
        x: {grid: {display: false}},
        y: {
          beginAtZero: true,
          ticks: {display: false}, grid: {display: false}
 
        }
      }
    }
  });
</script>

In the above script, we have set the color of the data labels to black and the position of the data labels using anchor: ’end’, and align: ‘bottom’.