Highcharts Demo

author(s): Torstein Hønsi

by Michel Munzert

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>
<button id="button" class="autocompare">Set extremes</button>

JavaScript

var chart = Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true,
    events: {
    	load() {
      	debugger;
        this.yAxis[0].setExtremes(Date.UTC(2010, 0, 1), Date.UTC(2010, 0, 2));
      }
    }
  },

  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, 4),
      name: "Point1",
      color: "#FF00FF",
    }]
  }
  ]

});

// the button action
$('#button').click(function () {

    chart.yAxis[0].setExtremes(Date.UTC(2010, 0, 1), Date.UTC(2010, 0, 3));
});