FormidableLabs / FormidableLabs/victory

VictoryPie curved text labels

Open
#405 2 comments 0 reactions 1 assignee Claimed by @acharyakavita View on GitHub
Issue: Accepted Type: Enhancement :pencil2:
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))

![screen shot 2016-10-24 at 11 53 04](https://cloud.githubusercontent.com/assets/6938575/19643422/257b7562-99e2-11e6-876a-40da17d9aaaf.png)
(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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.