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

Comments

Projects
None yet
4 participants
@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

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Dec 6, 2017

Contributor

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?

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Dec 6, 2017

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@sarah-koehler

sarah-koehler 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.

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Dec 12, 2017

Collaborator

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/.

Collaborator

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