x-range chart

by jakub_noga_antsolutions

HTML

<script src="https://code.highcharts.com/stock/highstock.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

let chart = Highcharts.chart('container', {
  "drilldown": {
    "series": [{
      "id": "gwt-uid-4",
      "data": [

      ]
    }],
    "allowPointDrilldown": true
  },
  "lang": {
    "noData": ""
  },
  "noData": {
    "style": {
      "fontSize": "0px"
    }
  },
  "chart": {
    "animation": {
      "duration": 500,
      "easing": "linear"
    },
    "alignTicks": false,
    "backgroundColor": "transparent",
    "renderTo": "gwt-uid-2",
    "events": {

    }
  },
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": ""
  },
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": true,
    "layout": "horizontal",
    "verticalAlign": "bottom",
    "align": "center",
    "backgroundColor": "",
    "borderColor": "#FFFFFF",
    "borderRadius": 0,
    "borderWidth": 0,
    "floating": false,
    "x": 0,
    "y": 0,
    "itemStyle": {
      "fontFamily": null,
      "fontSize": "12px",
      "color": "#000000"
    }
  },
  "tooltip": {
    "positioner": null,
    "shared": true,
    "enabled": true,
    "valueDecimals": 2,
    "crosshairs": [
      false,
      false
    ],
    "useHTML": true,
    "borderWidth": 0,
    "backgroundColor": null,
    "shadow": false,
    "style": {
      "padding": 0
    }
  },
  "series": [

  ],
  "xAxis": {
    "id": "gwt-uid-5",
    "title": {
      "text": "",
      "style": {
        "fontWeight": "normal"
      },
      "useHTML": true
    },
    "showFirstLabel": true,
    "showLastLabel": true,
    "startOnTick": false,
    "endOnTick": false,
    "labels": {
      "maxStaggerLines": 1,
      "style": {
        "fontWeight": "normal"
      },
      "autoRotationLimit": 80
    },
    "tickPixelInterval": 100,
    "ordinal": false,
    "type": "datetime",
    "dateTimeLabelFormats": {
      "millisecond": "%H:%M:%S.%L",
      "second": "%H:%M:%S",
      "minute": "%H:%M",
      "hour": "%H:%M",
      "day": "%e. %b",
      "week": "%e. %b",
      "month": "%b \\'%y",
      "year": "%Y"
    },
   ...