@michelin/charts
v7.2.0
Published
The package contains Michelin charts tools.
Downloads
125
Maintainers
Readme
Angular Michelin charts
The package is a library to build charts in Angular applications.
This library is based on Chart.js 4
Usage
Internal with Artifactory : @michelin/charts
External with NPM : @michelin/charts
1. Install Michelin Theme
Make sure Michelin theme is correctly installed.
2. Install Michelin Charts
- Install chart.js
npm i chart.js
, (version >= 4.0.0) - Install michelin chart plugin
npm i @michelin/charts
3. Include Michelin Charts modules
Michelin modules can be imported in the shared module
For example :
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ChartModule } from '@michelin/charts';
@NgModule({
imports: [
CommonModule,
ChartModule
],
providers: [],
declarations: []
})
export class SharedModule {}
4. Moment adapter
Moment adpater can be use to display timeseries
- Install moment adapter plugin
npm i chartjs-adapter-moment
, (version > 1.0.0) - Import dependency before chart initialization :
import 'chartjs-adapter-moment';
5. Install plugins
Plugins can be register with ChartService.
For example for a Zoom plugin :
- Install zoom plugin
npm i chartjs-plugin-zoom
, (version > 1.0.0) - Register plugin globally :
import { Component } from '@angular/core';
import { ChartService } from '@michelin/charts';
import zoomPlugin from 'chartjs-plugin-zoom';
@Component({
selector: 'mic-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
constructor(chartService: ChartService) {
chartService.addPlugins([zoomPlugin]);
chartService.registerPlugins();
}
}