Highcharts Demo

author(s): Torstein Hønsi

by Michel Munzert

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true
  },

  xAxis: {
    categories: ['Jan', 'Feb'],

  },

  plotOptions: {
    columnrange: {
      pointPadding: 0,
      groupPadding: 0,
      borderWidth: 0,
      shadow: false,
      grouping: false
    }
  },

  series: [{
    name: 'Temperatures',
    data: [{
      x: 0,
      low: Date.UTC(2010, 0, 1),
      high: Date.UTC(2010, 0, 2),
      name: "Point2",
      color: "#00FF00"
    }]
  },
  {
    name: 'Temperatures2',
    data: [{
      x: 1,
      low: Date.UTC(2010, 0, 2),
      high: Date.UTC(2010, 0, 3),
      name: "Point1",
      color: "#FF00FF",
    }]
  }
  ]

});