Angular Michelin charts

The package is a library to build charts in Angular applications.

This library is based on Chart.js 4

Usage

Internal : @michelin/charts External : @michelin-org/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();
  }
}