0

I'm using Doghnut type chart of React Chart.js in my React Project. What I need to do is to customize its styling. I want to place text inside its ring and show the percentage of each section outside. Here is it's code:

import React from "react";
import { CChart } from "@coreui/react-chartjs";
import "./App.css";
const DoghnutChart = () => {
  const options2 = {
    plugins: {
      legend: {
        labels: {
          usePointStyle: true
        },
        position: "bottom"
      }
    },
    elements: {
      customCutout: true
    },
    cutout: 40,
    spacing: -10,
    borderWidth: 0
  };

  return (
    <div className="px-6 pt-6">
      <h1>My design:</h1>
      <div className="chart">
        <CChart
          options={options2}
          type="doughnut"
          data={{
            labels: ["Category 1", "Category 2", "Category 3"],
            datasets: [
              {
                backgroundColor: ["#00c98b", "#ffc100", "#00ADE9"],
                data: [10, 20, 30],
                borderRadius: 10
              }
            ]
          }}
        />
      </div>

      <h1>What I need:</h1>
      <img src="/doghnut-chart.png" />
    </div>
  );
};

export default DoghnutChart;

And here is the link of codesandbox example for better demonstration and also have attached the image of what's needed: https://codesandbox.io/s/doghnut-chart-8rswwe?file=/src/App.js:0-993

Fuaad
  • 197
  • 15
  • It seems you need to include the css also in order to enable standard chart.js tooltips. I found using `import "@coreui/chartjs/dist/css/coreui-chartjs.css";` in your `App.js` does that. Also note that this coreui-react-chartjs thing includes chart.js v. 3.9.1 while linking to documentation for the "latest" version (that happens to be 4.3.0 now). I recommend using react-chartjs-2 which is also linked to by chart.js [integrations](https://www.chartjs.org/docs/latest/#integrations) section and is working with the latest version of chart.js – kikon May 18 '23 at 22:17

0 Answers0