With the corresponding code-sandbox code https://codesandbox.io/s/competent-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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.