Highcharts Demo

author(s): Torstein Hønsi

by Black Label

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>

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

JavaScript

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols['horizontal-line'] = function(x, y, w, h) {
  return ['M', x, y + h / 2, 'L', x + w, y + h / 2];
};


Highcharts.chart('container', {

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    type: 'columnrange',
    name: 'Custom symbol',
		pointPadding: 0,
		groupPadding: 0,
		minPointLength: 3,
    data: [54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6].map(p => [p, p+0.0001]),
    tooltip: {
			pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.low}</b><br/>'
		}
  }],

});