根据 ajax 更新和 Highcharts 中的数据点动态调整 Y 轴最小值/最大值

Question

Currently, my graphs are created and then I have the following ajax call that creates the plotLines on the graph:

             $.ajax({
                type: "GET",
                url: "/limits",
                dataType: 'json',
                success: function (limits) {
                    console.log(limits);
                    graph1.yAxis[0].update({
                        plotLines: [{
                            value: limits[7].max,
                            color: 'orange',
                            dashStyle: 'dash',
                            width: 2,
                            label: {
                                text: 'USL'
                            }
                        }, {
                            value: limits[7].min,
                            color: 'orange',
                            dashStyle: 'dash',
                            width: 2,
                            label: {
                                text: 'LSL'
                            }
                        }]
                    });

The problem is that for some graphs the plotLines are out of Highcharts determined y-axis range (created from the data) so the plotLines do not show on the graphs.

I know I could do this to fix that problem:

             $.ajax({
                    type: "GET",
                    url: "/limits",
                    dataType: 'json',
                    success: function (limits) {
                        console.log(limits);
                        graph1.yAxis[0].update({
                            min: limits[7].min,
                            max: limits[7].max,
                            plotLines: [{
                                value: limits[7].max,
                                color: 'orange',
                                dashStyle: 'dash',
                                width: 2,
                                label: {
                                    text: 'USL'
                                }
                            }, {
                                value: limits[7].min,
                                color: 'orange',
                                dashStyle: 'dash',
                                width: 2,
                                label: {
                                    text: 'LSL'
                                }
                            }]
                        });

However.. if I was to do that solution then if the graph has points outside of the plotLines, then those points would not be shown.

I figure I could do something like this:

chart: {
  events: {
    load: function() {
      var min = yAxis[0].min;
      var max = yAxis[0].max;
      if (limits[7].max > max) {
        yAxis[0].setExtremes(null, (limits[7].max);
      }
    }
  }
}

I'm not entirely sure how to incorporate that type of logic for both the max and min plotLines into the update function.

Any help would be very appreciated. Thanks.

Answer 1

You can compare the plot line value to the actual axis extremes and change min and max properties if necessary. For example:

yAxis.update({
  min: yAxis.min > limits.min ? limits.min : null,
  max: yAxis.max < limits.max ? limits.max : null,
  plotLines: [{
    value: limits.max,
    width: 2,
    color: 'orange'
  }, {
    value: limits.min,
    width: 2,
    color: 'blue'
  }]
});

---

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4989/