With the corresponding code-sandbox code =/src/Guage.js , I was able to bring up the Doughnut chart.

I need some help in making it a semicircle Doughnut and placing text in centre and also inside the colours like below.

Updated :: Added circumference: 90 * Math.PI , rotation: 69.9 * Math.PI to make it a semi circle. Still trying to place a text over chart and text in the centre

Thanks in advance.

With the corresponding code-sandbox code https://codesandbox.io/s/petent-jepsen-r7n3d?file=/src/Guage.js , I was able to bring up the Doughnut chart.

I need some help in making it a semicircle Doughnut and placing text in centre and also inside the colours like below.

Updated :: Added circumference: 90 * Math.PI , rotation: 69.9 * Math.PI to make it a semi circle. Still trying to place a text over chart and text in the centre

Thanks in advance.

• javascript
• reactjs
• charts
• react-chartjs

• 1 I have created a sample codebase - codesandbox.io/s/fast-fire-206ed?file=/src/Guage.js – Sarun UK Commented Oct 21, 2021 at 16:40
• Thank you, I will update once I'm done with the plete usecase – PremKumar Commented Oct 21, 2021 at 17:15
• In case it helps I will put it as an answer so that others also get the benefit. – Sarun UK Commented Oct 22, 2021 at 5:11

1 Answer 1

I will share how i did this

import { Doughnut } from "react-chartjs-2";
import { Chart, ArcElement } from "chart.js";

Chart.register(ArcElement);

const data = {
  datasets: [
    {
      data: [3, 10, 10, 10, 10, 10, 10, 10, 10, 10],
      backgroundColor: [
        "#336699",
        "#99CCFF",
        "#999933",
        "#666699",
        "#CC9933",
        "#006666",
        "#3399FF",
        "#993300",
        "#CCCC99",
        "#666666",
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF"
      ],
      display: true,
      borderColor: "#D1D6DC"
    }
  ]
};

const Chart = () => {
  return (
    <div>
      <Doughnut
        data={data}
        options={{
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            }
          },
          rotation: -90,
          circumference: 180,
          cutout: "60%",
          maintainAspectRatio: true,
          responsive: true
        }}
      />
      <div
        style={{
          position: "absolute",
          top: "55%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          textAlign: "center"
        }}
      >
        <div>Text Here</div>
      </div>
    </div>
  );
};

View it in codesandbox