[Chartjs]-Chart.js core.js:6162 ERROR Error: "line" is not a registered controller

114👍

We can do this in three ways

  1. By importing:
import { Chart, registerables } from 'chart.js';

and then register all the coponents

Chart.register(...registerables);
  1. finally there is an separate path to do just the above for you, in one line:
import Chart from 'chart.js/auto';
  1. 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

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
}

Leave a comment