search

techniq / layerchart

Composable Svelte chart components to build a wide range of visualizations
https://www.layerchart.com
MIT License
663 stars 12 forks source link

BarChart: Ability to style each part of Stack #263

Open huntabyte opened 1 month ago

huntabyte commented 1 month ago

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 commented 1 month ago

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