114👍
We can do this in three ways
- By importing:
import { Chart, registerables } from 'chart.js';
and then register all the coponents
Chart.register(...registerables);
- finally there is an separate path to do just the above for you, in one line:
import Chart from 'chart.js/auto';
- By importing and registering the required part as commented by @Tatyana Molchanova
import { Chart, ChartConfiguration, LineController, LineElement, PointElement, LinearScale, Title} from 'chart.js'
and then register it in component before instantiating new Chart
Chart.register(LineController, LineElement, PointElement, LinearScale, Title);
29👍
Angular 12 here. Gaurev’s answer worked for me. I had to use:
import { Chart, registerables } from 'chart.js';
export class ChartTest {
constructor() {
Chart.register(...registerables);
}
// methods to actually make the chart per documentation
}
6👍
You get an error because you need to include Chart from chart.js/auto, and not from chart.js:
import { Chart } from 'chart.js/auto'
This is clearly stated in the documentation:
https://www.chartjs.org/docs/latest/getting-started/integration.html#helper-functions
Or you need to use dynamic import like this:
const { Chart } = await import('chart.js')
https://www.chartjs.org/docs/latest/getting-started/integration.html#commonjs
*checked on version ^4 Сhart.js
4👍
please upgrade npm package, its worked for me
npm i chart.js@2.9.4
- [Chartjs]-Skip decimal points on y-axis in chartJS
- [Chartjs]-Dynamically update values of a chartjs chart
3👍
This worked for me in Angular 14 as Bob Ramsey replied:
import { Chart, registerables } from 'chart.js';
export class ChartTest {
constructor() {
Chart.register(...registerables);
}
// methods to actually make the chart per documentation
}
Source:stackexchange.com