rounded-corners
rounded-corners copied to clipboard
highcharts
Pie chart
How can i add a rounded corner to a pie chart like:
- http://jsfiddle.net/pDdcd/
Is possible with the latest version of HighCharts?
One way to do that is to set the border color to null and increase the border width, but as you can see there's now a problem with overlapping: http://jsfiddle.net/highcharts/pDdcd/325/
Hi @TorsteinHonsi how can i add an space between the data series?
- http://jsfiddle.net/leninanzen/w5arfhpw/2/
Currently you can't. A very ugly workaround would be to add hidden points in between. http://jsfiddle.net/highcharts/w5arfhpw/4/
I'd like to see this as a first class option as well. We are currently weighing a couple of different charting libraries and this works well a different library we are considering.
@maximmold Do you mean rounded corners for the pie series, or space between the slices? Maybe we can see a sketch of what you want to achieve?
We'd like something more like this. We want rounded corners with just a little sliver of space between them.
This is the best I could do with highcharts which clearly doesn't look great particularly in regards to the outer arc and the uneven space.
SVG filters offer an alternative: http://jsfiddle.net/highcharts/1ye6j47m/
Hmm... not bad at on the corners, but the arc looks blurrier than normal. I guess setting an additional arc on the svg path at the corners isn't an easy task?
Yes, it looks like antialiasing is broken when using the filters.
Adding arc at the corners requires some complicated math, but if you want to have a go, you can extend the SVGRenderer.prototype.symbols.arc function. Here's a boilerplate that you can work on: http://jsfiddle.net/highcharts/1ye6j47m/12/
