Angular Michelin plotly

⚠️ BETA VERSION - This package is currently in beta. APIs may change in future releases.

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

Usage

Internal with Artifactory : @michelin/plotly External with NPM : @michelin/plotly

1. Install Michelin Theme

Make sure Michelin theme is correctly installed.

2. Install Michelin Plotly

Install the required dependencies:

npm install plotly.js-dist-min @types/plotly.js-dist-min @michelin/plotly

Required versions:

• plotly.js-dist-min: >= 3.1.1
• @types/plotly.js-dist-min: >= 2.3.0
• Angular: >= 21.0.4

Note: The @types/plotly.js-dist-min package is required for TypeScript support and must be installed alongside the runtime library.

3. Include Michelin Plotly modules

Michelin modules can be imported in the shared module.

For example :

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { PlotlyModule } from '@michelin/plotly';

@NgModule({
  imports: [CommonModule, PlotlyModule],
  providers: [],
  declarations: []
})
export class SharedModule {}

4. Create charts

Use mic-plotly-chart with Plotly data, layout and config to build line charts, bar charts, scatter charts and dashboards.

Troubleshooting

Common Installation Issues

Missing Type Definitions

Error: Cannot find module 'plotly.js' or its corresponding type declarations

Solution: Make sure you have installed @types/plotly.js-dist-min:

npm install @types/plotly.js-dist-min

Peer Dependency Conflicts

Error: ERESOLVE unable to resolve dependency tree or peer dependency warnings

Solution: Ensure your Angular version is >= 21.0.4. If using an older version, you may need to use --legacy-peer-deps:

npm install --legacy-peer-deps

Module Resolution Issues

Error: Cannot find module 'plotly.js-dist-min'

Solution:

1. Clear your node_modules and package-lock.json:

   rm -rf node_modules package-lock.json
   npm cache clean --force

2. Reinstall dependencies:

   npm install

TypeScript Compilation Errors

Error: Type errors related to Plotly types

Solution: Verify all peer dependencies are installed correctly:

npm ls @michelin/plotly @michelin/theme plotly.js-dist-min @types/plotly.js-dist-min