ngx-chartjs

Quickly way to integrate Chart.js components with Angular

chart.js

One of the most popular and powerful open source library to create a data visualization. To use this library you should get familiar with the Chart.js documentation.

Setup

Installation

Install chart.js and ngx-chartjs library from npm

npm install chart.js @synapsium/ngx-chartjs --save

Install @types/chart.js library from npm

npm install @types/chart.js --save-dev

Module usage

Add ChartjsModule to module

import { ChartjsModule, ChartjsConfig, CHARTJS_CONFIG } from '@synapsium/ngx-chartjs';

const DEFAULT_CHARTJS_CONFIG: ChartjsConfig = {
    options {
        responsive: true,
        maintainAspectRatio: false
    }
};

@NgModule({
  ...
  imports: [
    ...
    ChartjsModule
  ],
  providers: [
    {
      provide: CHARTJS_CONFIG,
      useValue: DEFAULT_CHARTJS_CONFIG
    }
  ]
})

Check out the API Doc for the available options.

How to use

In your target component integrate chartjs element :

<chartjs [className]="chart" 
         [type]="type" 
         [data]="data" 
         [options]="options">
</chartjs>

Inputs

Input	Type	Default	Description
className	string		Custom css class name applied on parent container of chart canvas
type	string	'doughnut'	Type of chart : 'doughnut', 'line', 'bar', 'radar', 'pie', 'polarArea', 'bubble', 'scatter'
data	ChartData	'{}'	Data of chart
options	ChartOptions	{ responsive: true, maintainAspectRatio: false}	Options of chart

Options properties of global config will be replaced by local Options.