CODEWITHSUNDEEP
javascriptjquerychartshighcharts
Abhishek Sharma
Abhishek Sharma

Reputation: 281

Highcharts not rendering properly on legend clicks

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

Upvotes: 0

Views: 867

Answers (2)

Kacper Madej
Kacper Madej

Reputation: 7896

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/

Upvotes: 1

Shlomi Hassid
Shlomi Hassid

Reputation: 6606

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;

Upvotes: 0

Related Questions