Angular ng2-charts chartsjs-plugin-labels options not working

Question

I'm working with Angular (v9), ng2-charts, chart.js (v2.9), and chartjs-plugin-datalabels

I got my chart displaying with labels, wonderful. Now I want to use some of the options to color the labels and position them.

I'm importing the labels like so:

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

This is working fine:

public barChartOptions = {
  maintainAspectRatio: false,
  scaleShowVerticalLines: false,
  responsive: true,
  plugins: {
    pluginDataLabels
  }

This is not:

public barChartOptions = {
    maintainAspectRatio: false,
    scaleShowVerticalLines: false,
    responsive: true,
    plugins: {
      pluginDataLabels: {
        color: 'blue'
      }
    }

Any help on this is greatly appreciated. When I attempt to add any options the labels simply disappear.

Answer 1

According to the docs, plugins go into the plugins array. Options for the plugins go into the options.plugins object under the plugin id. Which appears to be datalabels according to the docs.

public barChartOptions = {
  maintainAspectRatio: false,
  scaleShowVerticalLines: false,
  responsive: true,
  plugins: [pluginDataLabels],
  options: {
    plugins: {
      datalabels: {color: 'blue'}
    }
  }
};

Answer 2

You need to define the option plugins.labels.fontColor in order to obtain the desired result.

public barChartOptions = {
  ...
  plugins: {
    labels: {
      fontColor: 'blue'
    }
  }

From chartjs-plugin-labels documentation:

fontColor: font color, can be color array for each data or function for dynamic color.

Therefore, in case you need different label colors for different data values, fontColor may also be defined as follows:

public barChartOptions = {
  ...
  plugins: {
    labels: {
      fontColor: ['blue', 'red', 'green']
    }
  }