Column range

author(s): Torstein Hønsi

by totszwai

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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

rect.highcharts-point-hover {
  
}

JavaScript

var mockData = [
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [0, 50], [0, 50], [0, 50], [0, 50],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [10, 40], [10, 40], [10, 40], [10, 40],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45],
            [5, 45], [5, 45], [5, 45], [5, 45]
        ];
    
 function addHours(dateTime, hours) {
 var result = new Date();
  result.setTime(dateTime.getTime() + (hours*60*60*1000));
  return result;
}

var startDate = new Date("7/9/2021")
var datedMockData = mockData.map(
  (pointData, index) => {
  	return [ addHours(startDate, index),...