How do I use plugins in ng2-charts?

Question

I'm not sure how exactly to import a plugin into ng2-charts, specifically the annotation plugin. I'm using Angular2 / Ionic2. There doesn't seem to be any documentation or answers on this.

score 7 · Answer 1 · edited Oct 17 '18 at 12:10

7

I would avoid to declare Chart like this. Instead you can do import {Chart} from 'chart.js' since it is a subdependency of ng2-charts anyway.

By this approach your IDE can still do autocompletion and you are not telling angular to just believe that there is something called Chart.

To be consistent you should also add it to your package.json.

edited Oct 17 '18 at 12:10

Lerk

946
1
15
21

answered Jan 29 '18 at 15:51

Paquan

71
1
3

mrshickadance · Answer 2 · 2018-05-07T20:14:10.367

4

Maybe follow this thread (https://github.com/valor-software/ng2-charts/issues/496) in case there becomes a more "official" way, but here is what I did:

At the top of your component:

declare var Chart: any;

That will stop TypeScript from complaining and give you access to the Chart object.

Then you can use:

Chart.pluginService.register

Here's an example of code for a plugin that I was using: https://github.com/chartjs/Chart.js/issues/78#issuecomment-220829079

Update (May 2018): This answer is likely not valid or the best way to do this anymore.

edited May 07 '18 at 20:14

answered Feb 01 '17 at 18:28

mrshickadance

1,213
4
20
34

I can confirm this works on angular2+, just added the `Chart.pluginService.register({})` definition at the bottom of my component that imports ng2-charts – Gabriel Balsa Cantú Dec 20 '17 at 21:25
1

How can i register plugin for just this one chart using this approach? – zaitsman Apr 13 '18 at 05:32
This isn't working. ```import {Chart} from 'chart.js'``` works – kgfaith Apr 27 '18 at 15:19

score 1 · Answer 3 · answered Jan 15 '20 at 09:30

for example drawing in center of doughnut chart i find workaround using it in options animation, so no need to refister a plugin

    animation: {
      onProgress: function(chart) {
        let width = chart.chart.width,
          height = chart.chart.height,
          ctx = chart.chart.ctx;

        ctx.restore();
        let fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";
        ctx.fillStyle = '#dddddd';

        let text = "75%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;

        ctx.fillText(text, textX, textY);
        ctx.save();
      },
      onComplete: function(chart) {
        let width = chart.chart.width,
          height = chart.chart.height,
          ctx = chart.chart.ctx;

        ctx.restore();
        let fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";
        ctx.fillStyle = '#dddddd';

        let text = "75%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;

        ctx.fillText(text, textX, textY);
        ctx.save();
      },
    },

score 0 · Answer 4 · answered Jun 24 '21 at 14:23

This took me forever to figure out so adding what worked for me here in case anybody else struggles with this in Angular 2+:

app.module.ts:

import * as ChartLabels from 'chartjs-plugin-labels';

...

export class AppModule {
  constructor() {
    BaseChartDirective.unregisterPlugin(ChartLabels); // this makes chart plugins work in components
  }
}

component.ts:

... // other imports
import * as ChartLabels from 'chartjs-plugin-labels';

  ... // component annotations
  export class MyChartComponent {

    ... // other chart members

    public doughnutChartPlugins = [ChartLabels];
    public doughnutChartOptions: ChartOptions = { 
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'value',
        }
      },
    };

   ... // constructor and so on

component.html

<canvas baseChart
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [options]="doughnutChartOptions"
    [plugins]="doughnutChartPlugins"
    [legend]="doughnutChartLegend"
    [colors]="doughnutChartColors"
>
</canvas>

How do I use plugins in ng2-charts?

4 Answers4