title: highcharts strange area offset error when combined with xrange
body: <p>I have a combined xrange and area chart, where I cannot get the area plot to go to the bottom of the chart view. </p>
  
  <p>This is what I would like:
  <a href="https://i.stack.imgur.com/2mfH4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2mfH4.png" alt="enter image description here"></a>
  But this is what I'm getting:
  <a href="https://i.stack.imgur.com/FxgJl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FxgJl.png" alt="enter image description here"></a></p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p><a href="https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/" rel="nofollow noreferrer">https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/</a></p>
  
  <pre><code>Highcharts.chart('container', {
    "chart": {
      "borderWidth": 0,
      "zoomType": "x",
      "animation": false,
      "scrollablePlotArea": { "scrollPositionX": 1 },
      "height": 200,
      "spacing": [0,0,0,0]
    },
    "scrollbar": { "enabled": true },
    "time": { "useUTC": false  },
    "title": { "enabled": false  },
    "legend": { "enabled": false  },
    "colors": [ "#0032FF"  ],
    "credits": { "enabled": false  },
    "plotOptions": { 
      "area": { "threshold": null },
      "xrange": { "minPointLength": 1 }
    },
    "xAxis": {
      "type": "datetime",
      "labels": { "overflow": "justify" },
      "title": { "text": "Date" }
    },
    "yAxis": {
      "lineWidth": 1,
      "tickWidth": 1,
      "alternateGridColor": "#F2F2F2",
      "title": { "enabled": false },
      "categories": [ "Closed", "Open" ],
      "max": 1,
      "min": -1
    },
    "tooltip": {
      "borderRadius": 6,
      "borderColor": "#0032FF",
      "useHTML": true
    },
    "series": [
      {
        "name": "Proximity",
        "type": "xrange",
        "turboThreshold": 0,
        "borderColor": "gray",
        "animation": 0,
        "pointWidth": 20,
        "colors": [
          "#0032FF",
          "#0b5668"
        ],
        "data": [
          { "x": 1567077909855, "x2": 1567083603287, "y": 1 },
          { "x": 1567077924011, "x2": 1567077924011, "y": 0 },
          { "x": 1567083619442, "x2": 1567083619442, "y": 1 }
        ]
      },
      {
        //"turboThreshold": 1000,
        "type": "area",
        "color": "#f9d5d5",
        "lineWidth": 0,
        "animation": 0,
        "data": [
          { "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
          { "x": 1566728240265, "y": 2, "name": "Loss" },
          { "x": 1567077909855, "y": 2, "name": "Gain" },
          { "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
          { "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
          { "x": 1567085295420, "y": 2, "name": "Loss" },
          { "x": 1567085533152, "y": 2, "name": "Gain" },
          { "x": 1567085533152, "y": 0, "name": "Gained connectivity" }
        ]
      }
    ]
  });
  </code></pre>