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

position of start/end label in solid gauge #10587

Closed
kzoon opened this issue Apr 19, 2019 · 8 comments

Comments

Projects
None yet
3 participants
@kzoon
Copy link

commented Apr 19, 2019

In arc-shaped solid gauges there are typically 2 labels: the axis min and the axis max value. The axis itself is typically not shown.

Expected behaviour

Center the min and max label below the start/end of the pane background/series

Actual behaviour

The labels are rendered relative to the y-axis that is not shown, resulting in the min lining out to the left and the max lining out to the right.

Live demo with steps to reproduce

http://jsfiddle.net/kzoon/9ktr7vw2/

I understand this is because these are axis labels. However, I can't explain that to my customers, because there is no axis visible.
Maybe an option to show only min and max label would help. If selected the min and max would be rendered in their proper location.

@sebastianbochan

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2019

Hi @kzoon,
Thank you for reporting about the problem. Im not sure if it is a bug, because when you set oversized chart (130%) the shape is also out of edges. Please elaborate the use case of this kind of scenario.

@kzoon

This comment has been minimized.

Copy link
Author

commented Apr 19, 2019

I think solid gauge is typically used like in your demo: https://www.highcharts.com/demo/gauge-solid.

The grey background plus the axis min and max labels (0 and 200, 0 and 6) neatly signify the possible range of data. For the user the min and max labels are part of the arc-background. A location centered at the base of the arc-background is the most logical location for these labels.

But technically they are part of y-axis, which determines where these labels are rendered. With the current axis label options, I can't guarantee the centered location that I want.

In my application the same chart can be rendered in very different sizes. Currently the size of the chart influences the location oft he min and max labels. Compare these three fiddles, which only differ in size:

http://jsfiddle.net/kzoon/9ktr7vw2/4/
http://jsfiddle.net/kzoon/9ktr7vw2/5/
http://jsfiddle.net/kzoon/9ktr7vw2/6/

You will see that the label position is all over the place.

An option that would center these labels for me would be ideal: they would always be in the right place. Ideally it would also handle the y position, which I now have to change depending on the font size.

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2019

Thanks for the details @kzoon

What we need is kind of "auto" distance, like this:

Snippet:

(function(H) {
  H.wrap(H.Axis.prototype, 'render', function(proceed) {

    if (this.isRadial && this.isCircular && !this.isXAxis) {
      this.options.labels.distance = -(this.center[2]) / 8;
    }

    return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
})(Highcharts);

Workaround:
Use responsive.rules to define chart's size thresholds and distances for labels.

@kzoon

This comment has been minimized.

Copy link
Author

commented Apr 19, 2019

Exactly.

Thanks for the snippet. I was struggling with translating the percentages in the radius settings into pixels for the distance setting. Yours looks like a good approach for this!

Would allowing the setting of distance as a percentage (just like inner/outerRadius) be a solution?

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2019

Hmm.. interesting idea. Percentage of what? Size of the chart, just like pane/axis? That might be confusing, why label distance has any relation to size of the chart.

Maybe simple align: "left"|"center"|right" should align label to the edge of arc shape instead of setting "text-anchor"? But, what if someone needs more labels, because of the design? Like this: http://jsfiddle.net/BlackLabel/r1zm4ae5/

Still, the tricky part is to apply this change only for "solid-gauge" series. As you noticed, it's still an axis. We have some similar changes (where series determines an axis options/behaviour) and this causes bugs like #6408..

@kzoon

This comment has been minimized.

Copy link
Author

commented Apr 19, 2019

The percentage would have the same base as:
pane.Background.innerRadius
pane.Background.outerRadius
series.radius
series.InnerRadius

As for your last remark: axis.labels.distance is already only applicable for gauges (according to the API). The change would concern how you set axis.labels.distance. In pixels or percentage.

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2019

Added percentage support, as you suggested. Take a look: http://jsfiddle.net/BlackLabel/z7Lmkovw/

Let us know if you find any issues with that solution.

@kzoon

This comment has been minimized.

Copy link
Author

commented Apr 19, 2019

Works very well so far. Thanks for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.