zoom into open-ended regions not working

It appears that users can't zoom into a region if it is "open-ended". For example, if I start my zoom drag on "May 2019" and finish my zoom drag on "May 2020" then CanvasJS will refuse to zoom despite there being a sufficient number of points to zoom into. This becomes an even bigger problem if the data is being loaded progressively because it is more likely that users will want to zoom into regions that have not yet been populated.

by jcmalek

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the StockChart -->
<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

var dataPoints = [
  { x: new Date(2018, 0,  0), y: 71 },
  { x: new Date(2018, 01, 0), y: 55 },
  { x: new Date(2018, 02, 0), y: 50 },
  { x: new Date(2018, 03, 0), y: 65 },
  { x: new Date(2018, 04, 0), y: 95 },
  { x: new Date(2018, 05, 0), y: 68 },
  { x: new Date(2018, 06, 0), y: 28 },
  { x: new Date(2018, 07, 0), y: 34 },
  { x: new Date(2018, 08, 0), y: 14 },
  { x: new Date(2018, 09, 0), y: 71 },
  { x: new Date(2018, 10, 0), y: 55 },
  { x: new Date(2018, 11, 0), y: 50 },
  { x: new Date(2019, 0,  0), y: 71 },
  { x: new Date(2019, 01, 0), y: 55 },
  { x: new Date(2019, 02, 0), y: 50 },
  { x: new Date(2019, 03, 0), y: 65 },
  { x: new Date(2019, 04, 0), y: 95 },
  { x: new Date(2019, 05, 0), y: 68 },
  { x: new Date(2019, 06, 0), y: 28 },
  { x: new Date(2019, 07, 0), y: 34 },
  { x: new Date(2019, 08, 0), y: 14 },
  { x: new Date(2019, 09, 0), y: 71 },
  { x: new Date(2019, 10, 0), y: 55 },
  { x: new Date(2019, 11, 0), y: 50 }
];

var stockChart = new CanvasJS.StockChart("stockChartContainer", {
  title:{
    text: "Basic StockChart"
  },
  exportEnabled: true,
  charts: [{
    zoomEnabled: true,
    data: [{
      type: "line",
      dataPoints: dataPoints
    }]
  }],
  navigator: {
    slider: {
      minimum: new Date(2018, 07, 0),
      maximum: new Date(2020, 11, 0)
    },
    data: [{
      dataPoints: [{x: new Date(2018, 0,  0), y: 71},
                   {x: new Date(2020, 11, 0), y: 0}]
    }]
  }
});

stockChart.render();