FormidableLabs / FormidableLabs/victory
Stacked Bar Charts - center label on Bar Segment
- Dominant language
- TypeScript
- Stars
- 11.2k
- Forks
- 536
- PR merge metrics
- No merged PRs in 30d
Description
# Bugs and Questions
### Checklist
- [x] This is not a `victory-native` specific issue. (Issues that only appear in `victory-native` should be opened [here](https://github.com/FormidableLabs/victory-native/issues/new))
- [x] I have read through the [FAQ](https://formidable.com/open-source/victory/docs/faq) and [Guides](https://formidable.com/open-source/victory/guides/) before asking a question
- [x] I am using the latest version of Victory
- [x] I've searched open issues to make sure I'm not opening a duplicate issue
### The Problem
In a stacked bar chart, I'm trying to add labels to each bar segment on top of the bar.
Sort of like this:

When adding labels to a stacked bar chart, the label for each chart segment seems to render "after" the segment, on top of the beginning of the next segment like this instead:

I'm really struggling to figure out how to center the labels over each segment. As the labels are their own elements and not children to the bar segments they belong to.
I played around with all combinations of `textAnchor` and `verticalAnchor` and ended up at a bit of a hacky solution where I calculate the offset based on domain range and chart width. But it's still a bit off...
Any ideas on how to center the labels? Maybe I just missed something simple?
### Reproduction
Sandbox based on the [100% column stacked bar example](https://formidable.com/open-source/victory/gallery/100-column-chart/) here:
https://codesandbox.io/s/basic-victory-example-yx95d
The main part being:
```
labelComponent={
{
// (graphWidth / (maxDomain-minDomain)) * (datum.y / 2)
// ^scale factor percent to pixels * half the width of segment in %
return (-(400 - 2*30) / (100 - 0)) * data.datum.y/2;
}}
/>
}
```
Is there any less hacky way to achieve the same?
Thanks!
Contributor guide
Assessment
This issue has not been assessed yet.