ng2-charts

1. Install ng2-charts using the schematics:

ng add ng2-charts

Usage

In order to use ng2-charts you need to import the directive in your standalone component:

import { BaseChartDirective } from 'ng2-charts';

@Component({
standalone: true,
imports: [BaseChartDirective],
})
export class MyComponent { }

Global configuration

You also need to provide a global configuration in your app.config.ts (or wherever that makes sense if you are lazy-loading things):

import {
provideCharts,
withDefaultRegisterables,
} from 'ng2-charts';

bootstrapApplication(AppComponent, {
providers: [
provideCharts(withDefaultRegisterables()),
],
}).catch((err) => console.error(err));

Alternatively, include a minimal configuration to reduce the bundle size, eg:

provideCharts({ registerables: [BarController, Legend, Colors] })

Chart types

There are one directive for all chart types: baseChart, and there are 8 types of charts in the default chart.js package: line, bar, radar, pie, polarArea, doughnut, bubble and scatter.

Properties

Note: For more information about possible options please refer to original chart.js documentation

• data - set of points of the chart. See https://www.chartjs.org/docs/latest/general/data-structures.html for some examples and further reference. Use this property or datasets/labels depending on what's convenient.
• datasets - Same as the datasets property for the data input. data Has priority over this.
• labels - Same as the labels property for the data input. data has priority over this.
• type (ChartType) - indicates the type of charts. Defaults to bar.
• options (ChartOptions) - chart options (as from Chart.js documentation)
• legend: (boolean = false) - if true show legend below the chart, otherwise not be shown

Events

• chartClick: fires when click on a chart has occurred, returns information regarding active points and labels
• chartHover: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels

Chart instance

You can get access to the chart instance by using the @ViewChild annotation and a suitable selector for the directive (see the Angular docs). For example, to get the chart instance and call the toBase64Image() method, you can add the following to the parent component:

@ViewChild(BaseChartDirective) chart?: BaseChartDirective;

public someAction(): void {
this.chart?.toBase64Image();
}

Colors

There are a set several default colors. If there is more data than colors, more colors are generated randomly. Colors can be replaced using the dataset options or overriding the global defaults.

Dynamic Theming

The ThemeService allows clients to set a structure specifying colors override settings. This service may be called when the dynamic theme changes, with colors which fit the theme. The structure is interpreted as an override, so in order to reset any existing option or customization you will have to define undefined properties explicitly. For example:

type Theme = 'light-theme' | 'dark-theme';

private _selectedTheme: Theme = 'light-theme';
public get selectedTheme() {
return this._selectedTheme;
}
public set selectedTheme(value) {
this._selectedTheme = value;
let overrides: ChartOptions;
if (this.selectedTheme === 'dark-theme') {
overrides = {
scales: {
x: [{
ticks: { fontColor: 'white' },
gridLines: { color: 'rgba(255,255,255,0.1)' }
}],
y: [{
ticks: { fontColor: 'white' },
gridLines: { color: 'rgba(255,255,255,0.1)' }
}]
}
};
} else {
overrides = {
scales: undefined
};
}

this.themeService.setColorschemesOptions(overrides);
}

constructor(private themeService: ThemeService) { }

setCurrentTheme(theme: Theme) {
this.selectedTheme = theme;
}

The overrides object has the same type as the chart options object ChartOptions, and wherever a simple field is encountered it replaces the matching field in the options object. When an array is encountered (as in the xAxes and yAxes fields above), the single object inside the array is used as a template to override all array elements in the matching field in the options object. So in the case above, every axis will have its ticks and gridline colors changed.