Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Position labels in radial charts #1449

Open
capucineSoum opened this issue May 13, 2022 · 3 comments
Open

Position labels in radial charts #1449

capucineSoum opened this issue May 13, 2022 · 3 comments

Comments

@capucineSoum
Copy link

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

@matsomo
Copy link

matsomo commented Aug 23, 2022

you can override the class directly

.rv-xy-plot__series--label-text {
    text-anchor: middle;
    dominant-baseline: middle;
  }

@capucineSoum
Copy link
Author

Thank you for your answer

@lrNas
Copy link

lrNas commented Mar 30, 2023

you can override the class directly

.rv-xy-plot__series--label-text {
    text-anchor: middle;
    dominant-baseline: middle;
  }

Very usefull to me, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants