Problem for display a chart with Chart.js and Angular

Question

I want to display a chart using chart.js in angular. In first time I try to implement a example took on the net and I have no problem during the compilation. This is the code in my .ts :

import { Component, OnInit } from '@angular/core';
import { Chart } from "chart.js";

@Component({ 
   ...
})

export class MyChartComponent implements OnInit {
    constructor(){
    }

    ngOnInit(): void {
      new Chart("myChart", {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
    }
}

And in my .html I have :

<div id="divChart">
  <canvas id="myChart"></canvas>
</div>

But when i start the serve, I have this error :

ERROR Error: "linear" is not a registered scale.
    _get chart.esm.js:4622
    getScale chart.esm.js:4576
    buildOrUpdateScales chart.esm.js:5224
    each helpers.segment.js:102
    buildOrUpdateScales chart.esm.js:5211
    update chart.esm.js:5336
    Chart chart.esm.js:5096
    ngOnInit my-chart.component.ts:32
    Angular 37
    zUnb main.ts:11
    Webpack 6

ERROR TypeError: area is undefined
    _isPointInArea helpers.segment.js:1266
    getNearestItems chart.esm.js:2465
    nearest chart.esm.js:2548
    getElementsAtEventForMode chart.esm.js:5503
    _handleEvent chart.esm.js:5737
    _eventHandler chart.esm.js:5720
    listener chart.esm.js:5617
    proxy chart.esm.js:3022
    throttled helpers.segment.js:28
    Angular 17
    throttled helpers.segment.js:26
    Angular 14
    addListener chart.esm.js:2905
    createProxyAndListen chart.esm.js:3028
    addEventListener chart.esm.js:3071
    _add chart.esm.js:5605
    bindEvents chart.esm.js:5619
    each helpers.segment.js:102
    bindEvents chart.esm.js:5619
    _initialize chart.esm.js:5129
    Chart chart.esm.js:5094
    ngOnInit my-chart.component.ts:32
    Angular 13

and many other errors. Can you help me please ?

Can you try creating the chart inside ngAfterViewInit lifecycle? — Mir entafaz Ali
– Mir entafaz Ali, Commented Apr 24, 2021 at 4:36

Jeff Nyak · Accepted Answer · 2021-05-22 16:38:58Z

64

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

Chart.register(...registerables);

answered May 22, 2021 at 16:38

Jeff Nyak

8131 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user5432838 Over a year ago

Hey this worked like a charm, but what is three dot syntax in Chart.resgister(...registerables)??

Prince Singh Over a year ago

@user5432838 I know it's too late, but this is something known as the Spread operator which essentially expands registerables at the place

Ananthu K Kumar Over a year ago

Damn it worked like magic

jbgt Over a year ago

Just keep in mind that this solution will register every controller, scale etc, so they will all be included in your final bundle. If you need to keep your bundle size small and have the benefits of tree shaking, you should only import the controllers you need, as described in the accepted answer. chartjs.org/docs/4.4.3/getting-started/integration.html

uminder · Accepted Answer · 2021-04-24 06:44:53Z

17

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);
    }
    ...
}

answered Apr 24, 2021 at 6:44

uminder

26.4k6 gold badges45 silver badges91 bronze badges

2 Comments

Mohammad Reza Mrg Over a year ago

Thank you, And in this case, LinearScale must be import and register by Chart too. Chart.register(LinearScale ,BarElement, ...

Dinesh Gurjar Over a year ago

This one working fine in PWA but not in android APK.

ouflak · Accepted Answer · 2021-11-19 14:19:17Z

10

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';

edited Nov 19, 2021 at 14:19

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Nov 19, 2021 at 13:48

mary

1212 silver badges4 bronze badges

2 Comments

Ayenew Yihune Demeke Over a year ago

Short and working. Also available in the official doc as the shortest format

Sathnindu Kottage Over a year ago

The solution is LGTM!

Vishal Munagekar · Accepted Answer · 2022-09-18 09:19:11Z

5

To register it lazily use the constructor

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

edited Sep 18, 2022 at 9:19

answered Sep 18, 2022 at 9:18

Vishal Munagekar

831 silver badge5 bronze badges

2 Comments

A Yashwanth Over a year ago

How is it different than @jeff-nayak answer?

Vishal Munagekar Over a year ago

egger initialization it is.

A.Khalil · Accepted Answer · 2024-03-09 18:55:45Z

0

try this it works well (i'm using next js 14)

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

Chart.register(...registerables);

answered Mar 9, 2024 at 18:55

A.Khalil

11 silver badge

Collectives™ on Stack Overflow

Problem for display a chart with Chart.js and Angular

5 Answers 5

4 Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related