I am using doughnut chart from react-chartjs-2 and the default label color is black, I want to change it
This is my data and options objects
export const data = {
labels: ["Left", "Remaining"],
datasets: [
{
data: [3, 7],
backgroundColor: ["#1f2733", "white"],
borderColor: ["#1f2733", "white"],
},
],
};
export const options = {};
export const textCenter = {
id: "textCenter",
beforeDatasetsDraw(chart, args, pluginOptions) {
const { ctx, data } = chart;
ctx.save();
ctx.font = "bolder 20px Roboto";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseLine = "middle";
ctx.fillText(
`${data.datasets[0].data[0]} Days Left`,
chart.getDatasetMeta(0).data[0].x,
chart.getDatasetMeta(0).data[0].y
);
},
};
this is the react component for doughnut chart
import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
import { data, options, textCenter } from "./config";
ChartJS.register(ArcElement, Tooltip, Legend);
const DoughnutChart = () => {
return (
<Doughnut data={data} options={options} plugins={[textCenter]}></Doughnut>
);
};
export default DoughnutChart;
I tried this which is the way for chart.js I guess but it did not changed the color
export const options = {
legend: {
labels: {
fontColor: "white"
},
}.
}