FormidableLabs / FormidableLabs/victory
VictoryPie curved text labels
- Dominant language
- TypeScript
- Stars
- 11.2k
- Forks
- 536
- PR merge metrics
- No merged PRs in 30d
Description
I would like to have curved text labels on a pie chart. I spoke both @boygirl and Jani about this at a recent meetup.
I am more than happy to contribute, but as I mentioned I am not sure how best this would fit in.
I created a [pen](http://codepen.io/insidersbyte/pen/qagJjA?editors=0010) that shows a basic example of this.
The most important bit is this snippet which creates the segments.
``` js
const segments = (pie(data)).map((d, i) => (
{d.data.name}
));
```
One thing to note is that I had to figure out was how to get this to work when you have HTML5 based navigation. I originally had `xlinkHref={`#${id}-${i}`}` and it worked fine with hashbang navigation, but broke when used with HTML5 based navigation.
I am not an SVG wiz so not sure if there is a better way to fix it, but I ended up having to prepend `${window.location.href.replace(window.location.hash, "")}` to the `xlinkHref`. (see [here](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2))

(example pie chart)
> This tutorial helped me understand how to place text on an arc http://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html
Contributor guide
Assessment
This issue has not been assessed yet.