How to Build Charts in Angular Using Chart.js

To use charts.js in Angular, most tutorials suggest you use the library together with the ng2-charts library which comes with base charts standard directive to help build different charts. The problem with this approach is that both packages are sometimes built differently and are not updated at the same time. Therefore, each version of chart.js has a particular version of ng2-chart it can work with.

Implementing features in Angular is easy using packages, but sometimes working with packages that depend on each other in Angular can be very tricky because of differences in package versions. I struggled when I tried building charts in an Angular application using the chart.js and ng2-charts package. I finally had to implement the charts without using the ng2- package. As a result, this article will show you an easy way to build charts in Angular using chart.js, without installing the ng2-chart package.

Setting up the Angular Charts Project

To create a new Angular project, first you’ll have to make sure you have Angular CLI installed on your computer. If you don’t have Angular CLI installed make sure you have npm installed on your computer, as that is needed to  install Angular CLI. Follow this link to install npm and this link to install Angular CLI.

If Angular is already installed on your computer, run the below command to start a new project.

ng new angular-chart-app

The command above will create a new angular project with the name angular-chart-app.

Note: The angular-chart app is the name of the app and its name was used above for convenience, but you can choose any name for the project.

Installing chart.js

First, install chart.js and change the directory to the new Angular app you created.

npm install chart.js

The above command will install chart.js into your project.

Running Angular

Next, run your Angular app.

ng serve

If everything goes well your app, it should look like this:

Create Charts

To add charts to the project create a component.

ng g c chart my-chart

The above command will create a new component with the name my-chart. The component is made of four files: my-chart.components.css, my-chart.components.html, my-chart.components.spect.ts, my-chart.components.ts.

Replace the code inside the app.component.html file with the one below.

<app-my-chart></app-my-chart>

The code snippet above will render the my-chart component in the app-component.html. Once you run the app, your output should look like this:

Replace the code in the my-chart.component.html with the one below.

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

This should display your chart.

Add some styling to give the chart width and height.

#divChart{
    display: block;
    width: 400px;
    height: 400px;
}

In the my-chart.components.ts file, import chart.js and registerables.

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

Next, add the below code to ngOnInit function.

 var myChart = new Chart("myChart", {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 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
            }
        }
    }
});

In your my-chart.components.css file, add this code:

#divChart{
    display: block;
    width: 400px;
    height: 400px;
}

If you run your app, your chart should look like this:

Conclusion

Now we have created a bar chart in our Angular app without using the ng2-chart library. You look through this documentation to learn other ways to render charts using the chart.js library.

Follow this link to learn how to render other types of charts in the chart.js library.