Library

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();
}
}