#1449·react-vis

Position labels in radial charts

Author: capucineSoumCreated May 13, 2022Updated Mar 30, 2023

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.

image

Inspecting the console I see that different values are attributing to <text> which are children of <g> where my style is applied.

Capture d’écran du 2022-05-13 12-17-20

How should I change that ?

Thank you