Chart.js Angular Tutorial

What is Chart.js

Chart.js is known for its simplicity and ease of use. It creates responsive charts out-of-the-box and will look good on most devices natively. Chart.js uses HML5 canvas elements, which is more scalable than an SVG rendering approach. it is well documented with good community support. Chart.js isn't as highly customizable as other options on the market, which can be a negative for those looking to fully customize their end experience.

What is Angular?

Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.

Chart.js Angular Code Example

In this tutorial, we'll explore how to use Chart.js with Angular to create dynamic and interactive charts. Chart.js is a popular open-source library for building charts, and when combined with Angular, it allows for the creation of customizable charts within an Angular application.

Step 1: Setting Up Your Angular Project

First, create a new Angular project by running:

ng new chartjs-angular-example

Navigate to the project directory:

cd chartjs-angular-example

Step 2: Install Chart.js and Angular ng2-charts

To use Chart.js in our Angular project, we also need to install ng2-charts, a library that provides Angular directives for Chart.js. Run the following command:

npm install chart.js ng2-charts

Step 3: Import NgChartsModule

Next, import NgChartsModule from ng2-charts into your app module (app.module.ts). This step is crucial for making Chart.js components available in your Angular application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgChartsModule } from 'ng2-charts';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   NgChartsModule // Add this line
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Add Chart to Your Component

Now, let's add a chart to one of your components. Open the app.component.html file and add the following code to include a canvas element where the chart will be rendered.

<div style="display: block">
 <canvas baseChart
   [data]="lineChartData"
   [labels]="lineChartLabels"
   [options]="lineChartOptions"
   [colors]="lineChartColors"
   [legend]="lineChartLegend"
   [chartType]="lineChartType">
 </canvas>
</div>

In your component's TypeScript file (app.component.ts), add the chart configuration:

import { Component } from '@angular/core';
import { ChartData, ChartType } from 'chart.js';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 public lineChartData: ChartData<'line'> = {
   datasets: [
     {
       data: [65, 59, 80, 81, 56, 55, 40],
       label: 'Series A',
       fill: false,
     }
   ],
 };
 public lineChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 public lineChartOptions = {
   responsive: true,
 };
 public lineChartColors = [
   {
     borderColor: 'black',
     backgroundColor: 'rgba(255,255,0,0.28)',
   },
 ];
 public lineChartLegend = true;
 public lineChartType: ChartType = 'line';
}

Step 5: Run Your Application

Finally, start your Angular application to see the Chart.js chart in action:

ng serve

Open your browser and go to http://localhost:4200 to view your chart.

This simple example demonstrates how to integrate Chart.js in an Angular application to create a line chart. You can easily switch chart types and customize the charts to fit your data visualization needs by altering the chart configuration in your Angular component.

ABOUT EXPLO

Explo, the publishers of Graphs & Trends, is an embedded analytics company. With Explo’s Dashboard and Report Builder product, you can a premium analytics experience for your users with minimal engineering bandwidth.
Learn more about Explo →