Highcharts not rendering properly on legend clicks

0
votes

Problem: When series of the charts are set hidden and visible by clicking the legends the YAxis on right side do not render properly:

enter code here

http://jsfiddle.net/yzqdekhr/5/

Steps To Reproduce:

1) Click Diversion % Monthly Legend and Hide right side y axis
2) Click on both Diverted Tons and Trash Tons Legend (Complete chart will be blank)
3) Click Diversion % Monthly Legend to show it again
4) Click both Diverted Tons and Trash Tons Legend to show chart data

See now both axis have their own plotlines which should not be, see below image

enter image description here

Expected Result Plot lines must be common as in the first load

2
javascriptjquerychartshighcharts
jsfiddle.net/yzqdekhr/5 – Abhishek Sharma
not able to understand the issue, everything looks fines, I tried to reproduce using your steps – Nishith Kant Chaturvedi
did you tried the steps above, at first there were only 4 gridlines / plot lines but after performing steps above the lines turned to be 9, – Abhishek Sharma
yes tried your steps – Nishith Kant Chaturvedi
at first there were only 4 gridlines / plot lines but after performing steps above the lines turned to be 9, – Abhishek Sharma

2 Answers

1
votes

This is a known issue reported as a bug here - https://github.com/highslide-software/highcharts.com/issues/4374

Suggested workaround is to add a wrapper that will realign ticks.

H.wrap(H.Axis.prototype, 'setScale', function(p) {
        if(this.options.alignTicks !== false || this.chart.options.alignTicks !== false) {
             this.forceRedraw = true;   
        }
        p.call(this);
    });
})(Highcharts)

JSFiddle example: http://jsfiddle.net/q6sr1c0f/

0
votes

The problem is with how the secondary axis acts - when removing all and drawing the Diversion % there is no data or primary axis to be dynamically linked to.

The only way I can think of doing what you want without getting the double axis line is to set the second Yaxis linkedTo option to the first one.

This will make sure that if there is no first Yaxis the plot will not render new lines. This present another problem because now the Diversion % line is not painted at all (if the others are not visible) so you will have to set a min and max value for the first Yaxis.

JSnippet Demo

//Added to the second Yaxis:
linkedTo: 0;

//Added to the first Yaxis:
min: 0;
max: 100;