Ng2-charts: Change label color

[suparnavg]

Is it possible to change the color of labels (axis labels, legend labels?). Seems to be a default grey.

charts.js does provide an option inside the labels object and the legend object - would be fantastic if these options was exposed in the ng2-charts library.

[imkevk]

Hi @suparnavg,

There are some options to update the labels color. Check my code below; it provides you an example of a chart options object.

 {
    responsive: true,
    title: {
      display: true,
      text: 'Your chart title',
      fontColor: 'black',  // chart title color (can be hexadecimal too)
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          fontColor: 'black',  // x axe labels (can be hexadecimal too)
        },
        gridLines: {
          color: '#5f5e5e'  // grid line color (can be removed or changed)
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          fontColor: 'black',  // y axes numbers color (can be hexadecimal too)
          min: 0,
          beginAtZero: true,

        },
        gridLines: {
          color: '#5f5e5e'  // grid line color (can be removed or changed)
        },
        scaleLabel: {
          display: true,
          labelString: 'nombre de DI',
          fontColor: 'black',  // y axe label color (can be hexadecimal too)
        }
      }]
    },
    legend: {
      display: true,
      labels: {
        fontColor: 'black', // legend color (can be hexadecimal too)
      },
    }
 }

Hope it helps,
Kevk.

[93Alliance]

please this chart https://github.com/93Alliance/ng-chartjs

[paviad]

@DSKevk answer should close this.

[iryanjan18]

Is this also the same when changing the color values inside the chart? Like the pie chart slices have numbers inside it in dark color. I wanted to change it to light font color.

[ishwarThakare]

In pieChartOptions write,

public pieChartOptions: ChartOptions = {
plugins: {
datalabels: {
color: '#3c3c3c'
},
}
}