While using generateLabel()
for some use case, but inn that case the legend text color are coming as black, I want to know if there's a way to get that done as well. As we know we can do many things with the help of generateLabel()
.
The config I'm using:
{
type: 'doughnut',
plugins: [ChartDataLabels],
data: {
labels: ['Historical', 'Dead Stock'],
datasets: [
<any>{
backgroundColor: ['#d927d6', '#437cb5'],
data: [65, 35],
color: 'white',
pointStyle: 'rect',
datalabels: {
anchor: 'center',
color: 'white',
font: {
size: 25,
weight: 'bold',
},
},
},
],
},
options: {
plugins: {
tooltip: { enabled: true },
legend: {
display: true,
labels: {
padding: 40,
font: { size: 24 },
color: '#FFFFFF',
usePointStyle: true,
generateLabels: <any>function (chart: any) {
const labels = chart.data.labels;
const datasets = chart.data.datasets;
const visibility: any = [];
chart.options.plugins.legend.labels.color = 'white';
for (let i = 0; i < datasets.length; i++) {
if (chart.isDatasetVisible(0) === false) {
visibility.push(true);
} else {
visibility.push(false);
}
}
return labels.map(function (label, index) {
const dataset = datasets[0];
const backgroundColor = dataset.backgroundColor[index];
const pointStyle = dataset.pointStyle;
// Customizing legend item appearance
return {
text: label,
fillStyle: backgroundColor,
strokeStyle: backgroundColor,
pointStyle: pointStyle,
index: index,
hidden: visibility[index],
};
});
},
},
position: 'right',
},
},
},
}
NOTE: I tried this way because I need same pointStyle in legend, which was not working if I tried mentioning pointStyle: 'rect' inside dataset object and inside options -> plugins -> legend -> labels -> usePointStyle: true. But this didn't worked.