@odx/angular-chart-js
TypeScript icon, indicating that this package has built-in type declarations

5.1.0 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @odx/angular-chart-js

Weekly Downloads

62

Version

5.1.0

License

SEE LICENSE IN LICENSE

Unpacked Size

673 kB

Total Files

229

Last publish

Collaborators

  • kevin.wardenga
  • michael23
  • breeze_ds