1.0.6 • Published 5 years ago
@synapsium/ngx-chartjs v1.0.6
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 localOptions
.