[Chartjs]-Problem for display a chart with Chart.js and Angular

by

12👍

✅

Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.

Please take a look at Bundlers (Webpack, Rollup, etc.) from the Chart.js documentation.

In your case, this could be done as follows ():

import { Chart, BarElement, BarController, CategoryScale, Decimation, Filler, Legend, Title, Tooltip} from 'chart.js';

export class MyChartComponent implements OnInit {
  
    constructor() {
        Chart.register(BarElement, BarController, CategoryScale, Decimation, Filler, Legend, Title, Tooltip);
    }
    ...
}

39👍

import { Chart, registerables} from 'chart.js';

Chart.register(...registerables);

5👍

I have the same problem, I fixed it this way.
Use this:

import Chart from 'chart.js/auto';

Instead of this:

import { Chart } from 'node_modules/chart.js';

4👍

To register it lazily use the constructor

    constructor(){
       Chart.register(...registerables);
    }

Leave a comment