Pie chart

[lenin-anzen]

How can i add a rounded corner to a pie chart like:

• http://jsfiddle.net/pDdcd/

Is possible with the latest version of HighCharts?

[TorsteinHonsi]

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/

[lenin-anzen]

Hi @TorsteinHonsi how can i add an space between the data series?

• http://jsfiddle.net/leninanzen/w5arfhpw/2/

[TorsteinHonsi]

Currently you can't. A very ugly workaround would be to add hidden points in between. http://jsfiddle.net/highcharts/w5arfhpw/4/

[maximmold]

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.

[TorsteinHonsi]

@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?

[maximmold]

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.

[TorsteinHonsi]

SVG filters offer an alternative: http://jsfiddle.net/highcharts/1ye6j47m/

[maximmold]

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?

[TorsteinHonsi]

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/

[Sovai]

+1