Build your first chart with Angular and Chart.js

Anh Nguyen Dang
Nov 13, 2019 · 3 min read

Chart.js is an open-source JavaScript library which makes it very easy to build charts for your website. On this tutorial, I’d like to provide step by step guide how to combine chart.js with another angular package - ‘ng2-charts’.

Firstly, we need to understand about some properties of chart.js:

  • data: Set of points of the chart, it should be MultiDataSet only for line, bar, radar and doughnut, otherwise SingleDataSet
  • datasets: Data see about, the label for the dataset which appears in the legend and tooltips
  • labels: x-axis labels. It’s necessary for charts: line, bar, and radar. And just labels (on hover) for charts: polarArea, pie, and a doughnut. Label is either a single string, or it may be a string[] representing a multi-line label where each array element is on a new line.
  • type: Indicates the type of charts, it can be: line, bar, radar, pie…
  • options: Chart options. See Chart.js documentation for more details.
  • colors: Data colors, will use the default and|or random colors if not specified
  • legend: If true show legend below the chart, otherwise not be shown

Let’s start to create a sample chart

  1. We need to create an angular application with Angular CLI:

$ ng new myChart — routing

  • This command is downloading the default Angular project template and all dependencies are being installed.

2. Install ng2-charts and chart.js dependency. Go to your root project and run commands

npm install ng2-charts — save

npm install chart.js — save

Now, you need to import ChartsModule into your app module or feature module. In this example, I will import to AppModule

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 {}

ng2-charts chart types

There is one directive for all chart types: baseChart, and 8 types of charts: line, bar, radar, pie, polarArea, doughnut, bubble and scatter.

Let’s build a sample bar chart using below and update your app.component.html

<div class="chart-container" style="display: block"><canvas baseChart   [datasets]="barChartData"   [labels]="barChartLabels"   [options]="barChartOptions"   [legend]="barChartLegend"   [chartType]="barChartType"></canvas></div>

And the last step, we need to init chart data for the chart. Update your app.component.ts as below

import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss']})export class AppComponent {  constructor() {}  public barChartOptions = {    scaleShowVerticalLines: false,    responsive: true};  public barChartLabels =['2006','2007','2008','2009','2010','2011','2012'];  public barChartType = 'bar';  public barChartLegend = true;  public barChartData = [   { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },   { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }  ];}

Start your application and view your result in http://localhost:4200

$ ng serve

Noted: Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes.

InnomizeTech

We are an offshore software development and IT consulting…

Anh Nguyen Dang

Written by

InnomizeTech

We are an offshore software development and IT consulting company based in Vietnam. Our aim is to create awesome products that will make your everyday life easier. As a start-up company, we always put humans on first priority and welcome young people to join our team

More From Medium

More on Angular from InnomizeTech

More on Angular from InnomizeTech

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade