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

BarChart: Ability to style each part of Stack #263

Open
huntabyte opened this issue Oct 23, 2024 · 1 comment
Open

BarChart: Ability to style each part of Stack #263

huntabyte opened this issue Oct 23, 2024 · 1 comment

Comments

@huntabyte
Copy link

In stacked bar charts, the entire bar is represented by a single <rect>, making it impossible to style each of them individually. It would be nice to have stacked bars render a rect per part of the stack so that we can style them differently.

Here's an example of what a stacked Bar Chart currently looks like:
CleanShot 2024-10-22 at 20 11 26@2x

And here's what we'd like it to look like:
CleanShot 2024-10-22 at 20 11 47@2x

Notice between the stack we want to be able to set a 0 radius for a more seamless transition between the two and avoid the gap.

@techniq
Copy link
Owner

techniq commented Oct 23, 2024

Hey @huntabyte , each of these segments is a separate <rect>, but exposing the styling for each rect is not convenient yet, but on my TODO (supporting exactly what you have shown, as well as a flat bottom and rounded top)

image

one thing that is confusing and like tripped you up is there are a set of transparent <rect>s for each band that are used as tooltip triggers when using <Chart tooltip={{ mode: 'band' }}> (which <BarChart> uses by default.

image

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

2 participants