Gap between slice and halo on Pie/Donut chart

[sarah-koehler]

Expected behaviour

On a donut/pie chart the halo should be positioned at an equal distance all around the chart. More specific: There should be no gap between a slice of the chart and its halo.

Actual behaviour

The halo has a small offset on approx. half the chart meaning that the background can be seen between pie slice and halo.

Live demo with steps to reproduce

http://jsfiddle.net/68db3jjm/

Hover over the big slice and take a close look at the halo: On the left side, it directly touches the slice, while on the right there is a small gap where the yellow background shines through.

Affected browser(s)

Testet it in Chrome, Firefox, Safari

[sebastianbochan]

Hi @sarah-koehler
Thank you for the reporting.

Internal note
Maybe we should consider renderer the halo, below slice and "more inside" ? But the problem will be with transparent slices. Any better ideas?

[sebastianbochan]

Hi @sarah-koehler
Thank you for the reporting.

Internal note
Maybe we should consider renderer the halo, below slice and "more inside" ? But the problem will be with transparent slices. Any better ideas?

[KacperMadej]

After further investigation:
the problem is caused by browser rendering and anti-aliasing. If your browsers supports different shape-rendering then you could use crispEdge - demo with high contrast colors used: http://jsfiddle.net/BlackLabel/68db3jjm/1/

This is not something that we could fix - this is how SVG rendering works in browsers.

[KacperMadej]

After further investigation:
the problem is caused by browser rendering and anti-aliasing. If your browsers supports different shape-rendering then you could use crispEdge - demo with high contrast colors used: http://jsfiddle.net/BlackLabel/68db3jjm/1/

This is not something that we could fix - this is how SVG rendering works in browsers.

[sarah-koehler]

Thank you for the very quick reply. I see it working in your example, but for some reason even with shape-rendering: crispedges I still have a gap in my chart. I will try to provide a minimal example that reproduces the issue.

For now I am using a different workaround using a border that hides the gap.

[sarah-koehler]

Thank you for the very quick reply. I see it working in your example, but for some reason even with shape-rendering: crispedges I still have a gap in my chart. I will try to provide a minimal example that reproduces the issue.

For now I am using a different workaround using a border that hides the gap.

[TorsteinHonsi]

Using crispEdges also makes the edges - er - crisp, which is very ugly.

I support Sebastian's proposal of rendering it with a small overlap. I've committed a fix now where 1px is substracted from the inner radius of the halo. See it live at http://jsfiddle.net/highcharts/68db3jjm/2/.

[TorsteinHonsi]

Using crispEdges also makes the edges - er - crisp, which is very ugly.

I support Sebastian's proposal of rendering it with a small overlap. I've committed a fix now where 1px is substracted from the inner radius of the halo. See it live at http://jsfiddle.net/highcharts/68db3jjm/2/.