[Chartjs]-How do I use plugins in ng2-charts?

by

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.

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.

1👍

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();
      },
    },

0👍

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>

Leave a comment