solidgauge : circle donut increases if value exceeds max range

[siddhant4u]

if in official example you change data value to say 250 you will see the effect

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/

It behaves weird if you change value to 400 and comes back to right shape (semi circle) if value is 3800.

Edit:
Fail case: http://jsfiddle.net/highcharts/EkE2K/

[siddhant4u]

On second note, is there any way to avoid using gradient to fill colour? Can I use plain green yellow and red once set threshold is crossed?

[TorsteinHonsi]

A value of 400 looks okay to me... http://jsfiddle.net/s5h9T/

The color arc goes all the way round to a full circle, which I would expect when I have set the min to 0 and the max to 200. Then the circle is clipped at the bottom of the plot area, which is also expected.

What is missing is perhaps some options to disallow overflowing of the min-max range?

[siddhant4u]

try 450 in your example.

[TorsteinHonsi]

Case: http://jsfiddle.net/highcharts/EkE2K/

[oysteinmoseng]

Here is a minimal example: http://jsfiddle.net/prPmC/

If in solidgauge.drawPoints we start drawing at the minimum angle it works. Example code:

var angle1 = rotation / (180 / Math.PI),
angle2 = yAxis.startAngleRad;
shapeArgs = {
    x: center[0],
    y: center[1],
    r: radius,
    innerR: innerRadius,
    start: Math.min(angle1, angle2),
    end: Math.max(angle1, angle2)
};

The problem with points that go more than 360° (either direction) is still present.

[pawelfus]

I think this should be reopened: http://jsfiddle.net/EkE2K/1/ - gauge isn't clipped at 0-200values.

[oysteinmoseng]

I thought we considered this as expected behaviour?

[pawelfus]

Ah, right, I missread discussion.

So to prevent that color outside the pane, we need to adjust value to 200, then in dataLabel display some true value?

[TorsteinHonsi]

I agree it doesn't look as intended. I think this can be compared to how a column chart behaves: if the column exceeds the plot area, it is clipped. And the plot area is defined by the min-max of the Y axis. So here's what I propose:

1. The solid gauge is clipped to the min-max of the Y axis, like in regular cartesian charts. This also complies with angular gauges behaviour.
2. The overshoot option is implemented as with angular gauges: http://api.highcharts.com/highcharts#plotOptions.gauge.overshoot

[carlhussey]

So from what I have gathered; if the value exceeds the max, you set the value to whatever the max was and then just make the label show its true value? How can I accomplish this as the image below certainly doesn't look as intended?

Max: 75 with data at 2724

[oysteinmoseng]

The bug is still present (although you should load from github.highcharts.com instead of code.highcharts.com to fix the twisting issue). I'll work on adding the clipping/overshoot functionality proposed by Torstein.

[carlhussey]

Same issue when I loaded it from (http://github.highcharts.com/highcharts.src.js) with the "twisting".

[oysteinmoseng]

Do you have a jsfiddle example? Note that you must load the solid-gauge module from github, not just the main file.

[carlhussey]

Okay thanks, that fixed the twisting. I will wait until the additional fix can be added. For now I just threw a function in the data so if it exceeds my max, I just return the max as my data and then change the label it self to the true value.

[siddhant4u]

There is similar issue when say max value is not multiple of hundred. in my example if max value is 235 instead of 250 the max label is not printed instead arbitrary value of 125 is printed halfway through

[Confman]

I found a solution to this problem.

Add these lines to your series' options:
isOvershoot: 'true',
overshoot: 0 // degrees

find 'Handle the wrap option' comment in solid-gauge.src.js and modify it with the following:
// Handle the wrap option
var isOvershoot = options.isOvershoot;
if (isOvershoot == 'true')
{
var overshoot = options.overshoot;
overshoot = overshoot / 180 * Math.PI;
rotation = Math.max(yAxis.startAngleRad - overshoot, Math.min(yAxis.endAngleRad +overshoot, rotation));
}
else if (options.wrap === false)
{
rotation = Math.max(yAxis.startAngleRad, Math.min(yAxis.endAngleRad, rotation));
}
rotation = rotation * 180 / Math.PI;

[oysteinmoseng]

I'm not able to reproduce any issues using the latest version (loaded from bugfix branch: http://github.highcharts.com/bugfix/modules/solid-gauge.src.js).

[barneycarroll]

I always forget how Highcharts modularity / versioning / release works every time I come to it. Is the bugfix branch merged into core and released in line with a feature-based release schedule?

[TorsteinHonsi]

More or less. But most bug fixes are actually done on the master branch.

[derekm]

This issue has been closed, but commit 85e3f47 has not been merged to a release. Is this an oversight? I'm evaluating your product in a new commercial project, and I would like to be able to set overshoot on solidgauge chart types. Thanks!

[TorsteinHonsi]

You're right, it was left in the bugfix branch. Now it's merged into the master, so it will be part of the next maintenance.