x-range chart

by jakub_noga_antsolutions

HTML

<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->

<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

Highcharts.chart('container', {
  "tooltip": {
    "positioner": null,
    "shared": true,
    "enabled": true,
    "valueDecimals": 2,
    "crosshairs": [
      false,
      false
    ],
    "useHTML": true,
    "borderWidth": 0,
    "backgroundColor": null,
    "shadow": false,
    "style": {
      "padding": 0
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  chart: {
    type: 'xrange',
  },
  title: {
    text: 'Activities'
  },
  "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"
    },
    "visible": true,
    "events": {

    }
  },"yAxis": {
    "id": "gwt-uid-6",
    "title": {
      "text": "Axis1",
      "style": {
        "fontSize": "15px",
        "fontWeight": "normal"
      },
      "useHTML": true
    },
    "startOnTick": false,
    "endOnTick": false,
    "stackLabels": {
      "enabled": false
    },
    "showLastLabel": true,
    "showFirstLabel": true,
    "opposite": false,
    "labels": {
      "style": {
        "fontSize": "15px",
        "fontWeight": "normal"
      },
      "formatter": null
    },
    "visible": true,
    "events": {

    },
    "plotBands": [{
        "id": "gwt-uid-40",
        "from": 3.5,
        "to": 4.5,
        "color": "#edf3f3",
        "label": {
          "text": "",
         ...