DEV Community

Cover image for How to use Chart.js your Angular 13+ project
Chadwin Deysel
Chadwin Deysel

Posted on

How to use Chart.js your Angular 13+ project

Charts are one of the best, if not the best, too to use to visualize data. Every developer should be able to use charts in their project. In this tutorial I'm going to show you how to add charts into your project using the library, Chart.js.

Note: This tutorial was made using the latest versions at the time of writing:

  • Angular ~13.3.1
  • Chart.js ~3.7.1

Getting started

First we'll need to create a new Angular project.

ng new angular-chart-js-tutorial
Enter fullscreen mode Exit fullscreen mode

We'll select no routing and CSS.

Then we'll create a new component for the Chart itself. So navigate into your project file and use use the following command:

ng g c components/chart
Enter fullscreen mode Exit fullscreen mode

I'm using the short hands for generate component and creating a new file for our components.
Once completed, open the project your code editor and navigate to the "app.component.html" file. Once there, replace all the existing code with the following:

<h1>Chart.js Example</h1>

<app-chart>

</app-chart>
Enter fullscreen mode Exit fullscreen mode

Creating the chart

Now let's go to the "chart.component.html" file in the "components" file and add the following code:

<div class="chart-container" style="width: 800px; height: 600px;">
    <canvas id="my-chart">
    </canvas>
</div>
Enter fullscreen mode Exit fullscreen mode

Chart.js, uses the canvas element to draw charts. Now let's switch to the "chart.component.ts" file and add the following imports:

import {Chart, ChartConfiguration, ChartItem, registerables} from 'node_modules/chart.js'
Enter fullscreen mode Exit fullscreen mode

Then we'll create a method and call it in the ngOnInit() method. This method is going to be responsible for creating our chart. Your code should look something like this:

ngOnInit(): void {
    this.createChart()
}

createChart(): void {

}
Enter fullscreen mode Exit fullscreen mode

In createChart(): void method, we'll need to following along some steps. Start by registering the chart.

Chart.register(...registerables);
Enter fullscreen mode Exit fullscreen mode

Now we'll setup the data our chart is going to be using.

const data = {
      labels: ['January','February','March','April','May'],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [10, 5, 2, 20, 30, 45],
      }]
};
Enter fullscreen mode Exit fullscreen mode

Chart.js, also allows us to customise the Chart itself by configuring the options.

const options = {
      scales: {
        y: {
          beginAtZero: true,
          display: false
        }
      }
    }
Enter fullscreen mode Exit fullscreen mode

All these options do is to start the y-axis from zero and hide the y-axis to give a cleaner feel. Once that's completed, we'll configure the chart.

const config: ChartConfiguration = {
      type: 'line',
      data: data,
      options: options
    }
Enter fullscreen mode Exit fullscreen mode

Note the type of chart we'll be creating will be a line chart. You can use other options such as pie, doughnut, bar, bubble etc. For a list of all the types, you can get started here. Now we'll grab the chart item, the canvas on which the chart will be displayed on.

const chartItem: ChartItem = document.getElementById('my-chart') as ChartItem
Enter fullscreen mode Exit fullscreen mode

Finally, we'll create the chart with this final line of code.

new Chart(chartItem, config)
Enter fullscreen mode Exit fullscreen mode

End Result

To view the end result, open up the terminal, type ng serve and navigate to localhost:4200 in your browser once your app startup is completed.

The end result should look something like this
chartjs-end-result.JPG

Conclusion

For more details about Chart.js, be sure to check our their website, official repository and be sure to give them a star!

I've also created a repository for you to follow along in case you get stuck.

If you found this post useful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.

Thanks for reading and have a great day! 😄

Discussion (0)