Showing posts with label ng2-charts. Show all posts
Showing posts with label ng2-charts. Show all posts


December 16, 2017
Beautiful charts for Angular2 based on Chart.js…

Usage & Demo

Sample in below website uses ng2-charts@1.1.0


  1. You can install ng2-charts using npm
     npm install ng2-charts --save
  2. You need to install and include Chart.js library in application via html or webpack bundler (more options can be found in official chart.js documentation)
     npm install chart.js --save
Important: Embedding Chart.js in application is mandatory!

Usage & Demo

Demo and API details of ng2-charts can be found here: demo and source code.


System.js bundles can be found in bundles directory of npm package or at npm cdn



 import { ChartsModule } from 'ng2-charts/ng2-charts';

// In your App's module:
imports: [

Chart types

There are one directive for all chart types: base-chart, and there are 6 types of charts: , line, bar, radar, pie, polarArea, doughnut.


Note: For more information about possible options please refer to original chart.js documentation
  • data (Array<number[]> | number[]) - set of points of the chart, it should be Array<number[]> only for line, bar and radar, otherwise number[];
  • datasets (Array<{data: Array<number[]> | number[], label: string}>) - data see about, the label for the dataset which appears in the legend and tooltips
  • labels (?Array<any>) - x axis labels. It's necessary for charts: line, bar and radar. And just labels (on hover) for charts: polarArea, pie and doughnut
  • chartType (?string) - indicates the type of charts, it can be: line, bar, radar, pie, polarArea, doughnut
  • options (?any) - chart options (as from Chart.js documentation)
  • colors (?Array<any>) - data colors, will use default and|or random colors if not specified (see below)
  • legend: (?boolean=false) - if true show legend below the chart, otherwise not be shown


  • chartClick: fires when click on a chart has occurred, returns information regarding active points and labels
  • chartHover: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels


There are a set several default colors. Colors can be replaced using the colors attribute. If there is more data than colors, colors are generated randomly.
Note: Special thanks to Valor Software
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.