Using Chart.js and ng2-charts in Angular

Chart.js is a popular JavaScript chart library, and ng2 chart is a wrapper of Angular 2+, which can easily integrate Chart.js into Angular. Let's look at the basic usage.


First, install Chart.js and ng2-charts in the project:

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

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

Of course, if you're building a project using Angular CLI, you can easily add Chart.js to the. angular-cli.json configuration file to bind it to the application at all times:

//: .angular-cli.json (partial)
"script": [

Now you need to import ng2-charts ChartsModule into your app module or function module:

//: app.module.ts

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

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

  declarations: [ AppComponent ],
  imports: [
  providers: [],
  bootstrap: [ AppComponent ]
export class AppModule {}


ng2-charts gives us a baseChart instruction that can be applied to HTML canvas elements. The following is an example showing some options for input and the chartClick event for output of the instruction:

//: app.component.html

<div style="width: 40%;">

This is what component classes look like now:

//: 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) {


The following are different optional inputs:


Set the basic type of chart, and the values can be pipe, doughnut, bar, line, polar area, radar or horizontalBar.


A Boolean value for displaying legends above a chart.


An array of objects containing data arrays and labels for each data set.


If your chart is simple and has only one data set, you can use data instead of datasets.


Set of labels on the x-axis


Objects that contain chart options. For more information on available options, see the official Chart.js documentation.

In the example above, we set the chart in adaptive mode and adjust it automatically according to the size of the viewport.


Not shown in the above example, but you can define your own color and pass in an array of object text containing the following values:

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 must provide a literal quantity of color objects for each data set.


Send out two events, chartClick and chartHover, which allow you to react to users interacting with charts. The current active point and label are returned as part of the launch event data.

Dynamic Update Data Set

Of course, the advantage of Chart.js is that your chart can easily update/respond data entered from the back end or user dynamically.

In the following example, we added a new data set for 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];


It can be used like this:

//: app.component.html(partial)

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

You may notice that instead of altering the data set of the chart, we use new data to return new objects containing previous data. Object.assign can do this easily.

In this particular example, if no parameters are provided, we set the default value of 100 for three data sets.

God's favored one

Thursday, August 17, 2017, Shenzhen

Tags: Javascript angular npm JSON

Posted on Fri, 11 Jan 2019 03:48:13 -0500 by veluit06