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

by

2👍

✅

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

0👍

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']
    }
  }

Leave a comment