How to import Chart.js chartjs-plugin-datalabels npm package into an Angular 7 project

Question

I have an Angular 7 (Ionic 4) project, where I trying out Chart.js and need to be able to custom draw some labels on a Pie chart, as I Have asked here.

I have been t

Answer 1

You can import the directive like this:

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

You can use Plugins in your ChartOptions like this:

chartOptions: ChartOptions = {
  ...
  plugins: {
    pluginDataLabels 
  }

Another way is to call it in your chart:

public barChartPlugins = [pluginDataLabels];

You can see it done here.

However, both ways declare it globally. The only way I could figure out not to see them in all charts is to not display them.

chartOptions: ChartOptions = {
  ...
  plugins: {
    datalabels: {
      display: false
    }, 
  }

This also solves the Problem @NakulSharma has. You can see the plugin options here.