Position labels in radial charts
capucineSoum opened this issue · comments
capucineSoum commented
Hello,
I am struggling with positioning labels in radial charts. Here is my code:
const DonutChart = () => {
const data = [{ angle: 4, label: "Yes" }, { angle: 4, label: "No" }, { angle: 4, label: "Dont know" }]
return (
<>
<RadialChart
data={data}
width={300}
height={300}
innerRadius={68}
radius={100}
showLabels={true}
labelsStyle={{
fill: "red",
dominantBaseline="middle",
textAnchor="middle"
}}
padAngle={0.1}
/>
</>
)
}
To style the labels I am using labelsStyle as indicated in the documentation. With fill, the text color of the labels is indeed red. But the position doesn't change with setting the dominantBaseline and textAnchor.
Inspecting the console I see that different values are attributing to <text>
which are children of <g>
where my style is applied.
How should I change that ?
Thank you
Mats Aadahl commented
you can override the class directly
.rv-xy-plot__series--label-text {
text-anchor: middle;
dominant-baseline: middle;
}
capucineSoum commented
Thank you for your answer
Lucas Rodrigues do Nascimento commented
you can override the class directly
.rv-xy-plot__series--label-text { text-anchor: middle; dominant-baseline: middle; }
Very usefull to me, thanks!