Using Chart.js in Angular With ng2-charts

Chart.js is a popular JavaScript charting library and ng2-charts is a wrapper for Angular 2+ that makes it easy to integrate Chart.js in Angular. Let’s go over the basic usage.

Installation & Setup

The first step is to install both Chart.js and ng2-charts into your project:

# Yarn:
$ yarn add ng2-charts chart.js

# or npm:
$ npm install ng2-charts chart.js --save

Then, if you’re using the Angular CLI, you can simply add Chart.js to the list of scripts in your .angular-cli.json file so that it gets bundled with the app:

.angular-cli.json (partial)

"scripts": [
  "../node_modules/chart.js/dist/Chart.min.js"
],

Now you’ll want to import ng2-chart’s ChartsModule into your app module or a feature module:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

ng2-charts gives us a baseChart directive that can be applied on an HTML canvas element. Here’s an example showing-off some of the options to pass-in as inputs and the chartClick event that’s outputted by the directive:

app.component.html

<div style="width: 40%;">
  <canvas
      baseChart
      [chartType]="'line'"
      [datasets]="chartData"
      [labels]="chartLabels"
      [options]="chartOptions"
      [legend]="true"
      (chartClick)="onChartClick($event)">
  </canvas>
</div>

And here’s what it can look like in our component class:

app.component.ts

import { Component } from '@angular/core';

@Component({ ... })
export class AppComponent {
  chartOptions = {
    responsive: true
  };

  chartData = [
    { data: [330, 600, 260, 700], label: 'Account A' },
    { data: [120, 455, 100, 340], label: 'Account B' },
    { data: [45, 67, 800, 500], label: 'Account C' }
  ];

  chartLabels = ['January', 'February', 'Mars', 'April'];

  onChartClick(event) {
    console.log(event);
  }
}

Example chart with ng2-chart

Options

Here’s a quick breakdown of the different input options:

chartType

This sets the base type of the chart. The value can be pie, doughnut, bar, line, polarArea, radar or horizontalBar.

legend

A boolean for whether or not a legend should be displayed above the chart.

datasets

This should be an array of objects that contain a data array and a label for each data set.

data

If your chart is simple and has only one data set, you can use data instead of datasets and pass-in an array of data points.

labels

An array of labels for the X-axis.

options

An object that contains options for the chart. You can refer to the official Chart.js documentation for details on the available options.

In the above example we set the chart to be responsive and adapt depending on the viewport size.

colors

Not shown in the above example, but you can define your own colors with the colors input. Pass-in an array of object literals that contain the following value:

myColors = [
  {
    backgroundColor: 'rgba(103, 58, 183, .1)',
    borderColor: 'rgb(103, 58, 183)',
    pointBackgroundColor: 'rgb(103, 58, 183)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(103, 58, 183, .8)'
  },
  // ...colors for additional data sets
];

When using custom colors, you'll have to provide a color object literal for each data set.

Events

Two events are emitted, chartClick and chartHover, and they allow to react to the user interacting with the chart. The currently active points and labels are returned as part of the emitted event’s data.

Updating Datasets Dynamically

Of course, the beauty of Chart.js is that your charts can easily by dynamic and update/respond to data received from a backend or from user input.

In the bellow example we add a new data points for the month of May:

app.component.ts(partial)

newDataPoint(dataArr = [100, 100, 100], label) {

  this.chartData.forEach((dataset, index) => {
    this.chartData[index] = Object.assign({}, this.chartData[index], {
      data: [...this.chartData[index].data, dataArr[index]]
    });
  });

  this.chartLabels = [...this.chartLabels, label];

}

And it can be used like this:

app.component.html(partial)

<button (click)="newDataPoint([900, 50, 300], 'May')">
  Add data point
</button>

You’ll notice that we don’t mutate the datasets for our chart, but instead return new objects containing the previous data with the new data. Object.assign makes it really easy to do so.

In this particular example we also give our method's argument a default value of 100 for our 3 datasets in case nothing is passed.

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...