ChartJS

Install

npm install @odx/angular-chart-js

Import the Charts CSS theme file @import '@odx/ui/core/charts-theme.css' from @odx/ui;

Usage

Add provideChartsTheme() from @odx/angular-chart-js to the providers to set the ODX color palette for your charts.

Similar to provideCharts() from ng2-charts, this provider sets configuration options for ODX charts. It offers a range of customizable settings and styles to create visually appealing and interactive charts. For more details, refer to the ng2-charts documentation. Additionally, this provider responds to changes in the ODX theme.

You can also provide custom configurations:

import { withDefaultRegisterables } from 'ng2-charts';
import { provideChartsTheme } from '@odx/angular-chart-js';

bootstrapApplication(AppComponent, {
  providers: [
    provideChartsTheme(withDefaultRegisterables(), {
      defaults: {
        font: { family: 'Verdana' },
        backgroundColor: '#297f31',
      },
    }),
  ],
}).catch((err) => console.error(err));

Use BaseChartDirective:

<canvas baseChart [data]="yourChartData" type="yourChartType"></canvas>

Live demo

Please refer to our Storybook, to see sample charts.