图例点击后高图无法正确呈现

Question

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

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

Answer 1

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/

Answer 2

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;