Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gap between slice and halo on Pie/Donut chart #7495

Closed
sarah-koehler opened this issue Dec 6, 2017 · 4 comments
Closed

Gap between slice and halo on Pie/Donut chart #7495

sarah-koehler opened this issue Dec 6, 2017 · 4 comments

Comments

@sarah-koehler
Copy link

@sarah-koehler sarah-koehler commented Dec 6, 2017

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.

bildschirmfoto 2017-12-06 um 10 17 50

Affected browser(s)

Testet it in Chrome, Firefox, Safari

@sebastianbochan
Copy link
Contributor

@sebastianbochan sebastianbochan commented Dec 6, 2017

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
Copy link
Contributor

@KacperMadej KacperMadej commented Dec 6, 2017

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
Copy link
Author

@sarah-koehler sarah-koehler commented Dec 7, 2017

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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Dec 12, 2017

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 added a commit that referenced this issue Dec 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants