HIghcharts Scrollbar (w/ showFull false) displays after setExtremes called

Question

After setting the extremes of a graph to dataMin and dataMax on the xAxis the xAxis scrollbar that is configured with showFull false still displays.

Background on how we get in this state: We have a chart that gets updated data every 30 seconds, instead of redrawing we use chart.update w/ series attribute and redraw false. this updates the dataMin dataMax attributes of the axis but not the min/max attributes (which control the window in view)

using logic to determine if we want to interrupt the users work flow we decide if it is necessary to call setExtremes w/ redraw true -- NOTE: this is mainly required because otherwise the graph min can be bellow the dataMin for the axis (causing whitespace) using floor and setExtremes i am able to partially resolve that problem by pushing the window in view to the updated time range and using floor to prevent them from scrolling back (tho this is sub par since the whitespace clearly still exists and can be 'seen' in the scrollbar styling)

HOWEVER even w/ setExtremes dataMin dataMax the scrollbar is still shown

Expected: graph is updated with more recent live data, window of time range in view for graph is updated IFF the min would otherwise be lower than the new dataMin, scrollbar should now see 'universe' as newDataMin - newDataMax (! oldDataMin - newDataMax which seems to be the case)

Actual: graph is updated with more recent data, window of time is not update automatically, Time that is no longer covered by query is now represented by ugly white space

EDIT:

void handleLiveUpdate(List agentSeries, int rangeStartTime) {
  // Needed to decide down the line if we should redraw graph
  var xAxisExtremesPreUpdate = chart["xAxis"][0].callMethod("getExtremes");

  // Updates the chart's data w/o forcing the graph to redraw itself
  // Updates the XAxis dataMin && dataMax attributes BUT NOT the min max attributes
  // (where the min/max attributes determine the window of time in view for the chart)
  chart.callMethod("update", [new js.JsObject.jsify({
    'series': agentSeries
  })]);

  // Decide if redrawing the graph would be disruptive or if it is required
  var xAxisExtremesPostUpdate = chart["xAxis"][0].callMethod("getExtremes");
  if (xAxisExtremesPreUpdate['max'] == xAxisExtremesPreUpdate['dataMax']
      && xAxisExtremesPreUpdate['min'] == xAxisExtremesPreUpdate['dataMin']) { /* Full View Case */
    // Keep entire TimeRange in view as window moves
    chart["xAxis"][0].callMethod("setExtremes", [xAxisExtremesPostUpdate['dataMin'], xAxisExtremesPostUpdate['dataMax'], true, true]);
//TODO scrollbar still visible.. why ? 
  } else { /* Partial View Case */
    // Gather data on current extremes after updating the series.data
    var min = xAxisExtremesPostUpdate['min'];
    var max = xAxisExtremesPostUpdate['max'];
    var range = max - min;
    // Determine which partial view case we are in
    // 'Left Aligned' the min value before change was the dataMin before change
    // 'Right Aligned' the max value before change was the dataMax before change
    // 'Not Aligned' the min/max values do not correlate to the dataMin/dataMax values - indicates user had scrolled to some custom portion of time range
    if (xAxisExtremesPostUpdate['min'] < xAxisExtremesPostUpdate['dataMin']) { /* Partial View - Left Aligned (Ex looking at first hour of last 8 hours) */
      min = xAxisExtremesPostUpdate['dataMin'];
      max = min + range;
      chart["xAxis"][0].callMethod("setExtremes", [min, max, true, true]);
    } else if (xAxisExtremesPostUpdate['max'] == xAxisExtremesPreUpdate['dataMax']) { /* Partial View - Right Aligned (Ex looking at most recent week of last month) */
      max = xAxisExtremesPostUpdate['dataMax'];
      chart["xAxis"][0].callMethod("setExtremes", [max - range, max, true, true]);
    } else { /* Partial View - Not Aligned (Extremes do not touch dataMin dataMax => no need to redraw as window moves s*/
      // NO-OP: no need to redraw since moving window has no impact on window in view
    }
  }

  // Always update the floor attribute, prevents long lived charts from scrolling back to a time they no longer have data in hand for
  chart["xAxis"][0].callMethod("update", [new js.JsObject.jsify({
    'floor': rangeStartTime
  }), true]);
}

EDIT 2: screenshots for illustration

W/ Current solution

W/ Solution Commented Out

JSFiddle Note: update there seems to update the xAxis as i would have expected.

Answer 1

Instead of using the setExtremes method, you should update the axis with min and max properties:

chart.xAxis[0].update({
    min: chart.xAxis[0].dataMin,
    max: chart.xAxis[0].dataMax
});

Live demo: https://jsfiddle.net/BlackLabel/y150hupz/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update