Highcharts ScrollZoom

by OysteinAmundsen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    borderWidth: 0,
    zoomType: "x",
    animation: false,
    scrollablePlotArea: {
      scrollPositionX: 1,
      minWidth: 1057
    },
    resetZoomButton: {
      position: { x: -286, y: -10 }
    },
    height: 160
  },
  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: 0
  },
  tooltip: {
    borderRadius: 6,
    borderColor: "#0032FF",
    useHTML: true
  },
  series: [
    {
      name: "Proximity",
      type: "xrange",
      turboThreshold: 0,
      borderColor: "gray",
      animation: 0,
      pointWidth: 20,
      data: [
        { x: 1566283085586, x2: 1566283591735, y: 1 },
        { x: 1566283591735, x2: 1566283595025, y: 0 },
        { x: 1566283595025, x2: 1566283694129, y: 1 },
        { x: 1566283694129, x2: 1566286589716, y: 0 },
        { x: 1566286589716, x2: 1566286665944, y: 1 },
        { x: 1566286665944, x2: 1566286787406, y: 0 },
        { x: 1566286787406, x2: 1566286877717, y: 1 },
        { x: 1566286877717, x2: 1566287186405, y: 0 },
        { x: 1566287186405, x2: 1566287387966, y: 1 },
        { x: 1566287387966, x2: 1566288555065, y: 0 },
        { x: 1566288555065, x2: 1566288760074, y: 1 },
        { x: 1566288760074, x2: 1566289099966, y: 0 },
        { x: 1566289099966, x2: 1566289171525, y: 1 },
        { x: 1566289171525, x2: 1566289903351, y: 0 },
        { x: 1566289903351, x2: 1566290162159, y: 1 },
        { x: 1566290162159, x2: 1566290846121, y: 0 },
        { x: 1566290846121, x2: 1566291028924, y: 1 },
        { x:...