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

Solid gauges with rounded corners show 0 values as circles #6653

Open
goodforenergy opened this Issue Apr 27, 2017 · 3 comments

Comments

Projects
None yet
3 participants
@goodforenergy

goodforenergy commented Apr 27, 2017

I'm afraid I'm not quite sure what the best behaviour is here. We moved our solid gauges to using rounded corners instead of flat (which look super nice!), and noticed spurious values start appearing.

On closer inspection, these were values of 0, which were invisible when using flat edges, but render as a circle when using rounded corners.

There is a further limitation of rounded corners that you can't show very small values.. below a point they all just render as that same sized circle - but I guess this is an understandable limitation of this type of chart.

For 0 values though, perhaps no circle should show?

Here's a fiddle showing the issue.

Thanks for your time :)

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Apr 28, 2017

Collaborator

Thanks for writing (and sorry for accidentally closing)! Here's an interactive demo so we can see what happens with various values: http://jsfiddle.net/highcharts/dqohbuo0/4/

I'm also not sure what to do with this - currently the rounded edges are applied at the end of the real data range. As can be seen in the demo above, when the square gauge stops at a certain tick, the rounded one actually goes past it. So there are some different ways of resolving this:

  1. Keep the current behaviour, but hide the graphic on 0.
  2. Keep the rounded edge within the actual data range, and when the width of the point becomes less than the rounding radius, the radius becomes less. In effect, it will start to squeeze as the value becomes closer to 0, and 0 will be invisible.

What do you think? @jon-a-nygaard @pawelfus

Collaborator

TorsteinHonsi commented Apr 28, 2017

Thanks for writing (and sorry for accidentally closing)! Here's an interactive demo so we can see what happens with various values: http://jsfiddle.net/highcharts/dqohbuo0/4/

I'm also not sure what to do with this - currently the rounded edges are applied at the end of the real data range. As can be seen in the demo above, when the square gauge stops at a certain tick, the rounded one actually goes past it. So there are some different ways of resolving this:

  1. Keep the current behaviour, but hide the graphic on 0.
  2. Keep the rounded edge within the actual data range, and when the width of the point becomes less than the rounding radius, the radius becomes less. In effect, it will start to squeeze as the value becomes closer to 0, and 0 will be invisible.

What do you think? @jon-a-nygaard @pawelfus

@TorsteinHonsi TorsteinHonsi reopened this Apr 28, 2017

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Apr 28, 2017

Contributor

Hiding a graphic sounds easier, but will tooltip show up? It has directTouch set to true.

Contributor

pawelfus commented Apr 28, 2017

Hiding a graphic sounds easier, but will tooltip show up? It has directTouch set to true.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 2, 2017

Collaborator

It's way easier, though not stricly correct, as 0 will give nothing and 0.00000001 will show a circular dot. The tooltip will probably not show unless we hide the element by setting the opacity to something very low.

Collaborator

TorsteinHonsi commented May 2, 2017

It's way easier, though not stricly correct, as 0 will give nothing and 0.00000001 will show a circular dot. The tooltip will probably not show unless we hide the element by setting the opacity to something very low.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment