How to change label color of doughnut chart from react-chartjs-2

85 Views Asked by At

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"
    },
  }.
} 
0

There are 0 best solutions below