'Apexcharts radial chart counter-clockwise progress bar
I am using React Apexcharts to create a radial chart. By default, the progress bar goes in a clockwise direction but I need it to go counter-clockwise. Is there any option property available I can use?
What my graph looks like now:
What I need it to look like (bar going in opposite direction):
My options object:
let options = {
colors: ["#857EFF"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
}
},
dataLabels: {
name: {
offsetY: -10,
color: "#fff",
fontSize: "13px"
},
value: {
color: "#fff",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#05E996"],
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Progress"]
}
Any help is appreciated, thank you!
Solution 1:[1]
have you tried dir='rtl' on parent div ?
Solution 2:[2]
Change startAngle
and endAngle
options
https://apexcharts.com/docs/options/plotoptions/radialbar/
plotOptions: {
radialBar: {
startAngle: -360,
endAngle: 0,
...
Solution 3:[3]
I'm looking to do this same thing and after reading apexcharts docs as well as experimenting around with it I don't think it's currently possible.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | mohammad hosseini |
Solution 2 | Patryk Laszuk |
Solution 3 | Zachary Khan |