Chart.js core.js:6162 ERROR Error: "line" is not a registered controller

user_13488354 0
Viewed 17290

 const gainContext = this.gainRef.nativeElement.getContext('2d')
  gainContext.canvas.height = '300px'

  new Chart(gainContext, createChartConfig(gainConfig))


function createChartConfig({type, labels, data, label, color}: ChartConfig): ChartConfiguration<"line">{

  console.log('3 Chart.defaults', Chart.defaults)

  return {
type: "line",
data: {
  labels,
  datasets: [
    {
      label,
      data,
      borderColor: color,
      stepped: false,
      fill: false
    }
  ]
}
  }

This is not working: It not recognize the type property as it must in official documentation.

let myChart = new Chart(gainContext, { type: 'line',

What I do wrong?

chart.js angular
3 Answers

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);
user_86616260

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
}
user_93228090

please upgrade npm package, its worked for me

npm i chart.js@2.9.4
user_31576970
Related