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

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