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.