Highcharts - compounded

columns, line, xrange, flags

by Jernej Slejko

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

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

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        type: 'datetime',
        startOnTick: true,
        endOnTick: true,
        tickInterval: 1000 * 60 * 60 * 24 * 365
    },
    plotOptions: {
      series: {
        animation: {
          duration: 300
        }
      }
    },
    tooltip: {
      formatter: function () {
      	if (this.y === 3.1) {
        console.log(this.series.type)
        	return 'FU';
        } else {
          return '<b>' + Highcharts.dateFormat('%Y', this.x) + '</b><br/>' +
            this.series.name + ': <b>' + parseInt(this.y).toLocaleString() + '</b><br/>';
        }
      },
      style: {
        fontSize: '14px'
      }
    },
    series: [{
    		type: 'xrange',
        showInLegend: false,
			  dataLabels: {
          enabled: true,
          formatter: function() {
            return `${this.point.label}`;
          },
        },
        data: [{
        	label: 'The name<br>of this',
          color: '#ababab',
          pointWidth: 5,
          y: 3.1,
          x: Date.UTC(2024, 0, 1),
          x2: Date.UTC(2030, 4, 1)
        }]
    }, {
    		name: 'First',
    		type: 'column',
        pointWidth: 12,
        pointInterval: 1000 * 60 * 60 * 24 * 365,
        data: [
        	{
          	x: Date.UTC(2020, 0, 1),
            y: 3
          },
        	{
          	x: Date.UTC(2021, 0, 1),
            y: 4
          },
        	{
          	x: Date.UTC(2022, 0, 1),
            y: 3
          },
        	{
          	x: Date.UTC(2023, 0, 1),
            y: 1
          }
        ]
    }, {
    		type: 'flags',
        shape: 'squarepin',
        showInLegend: false,
        data: [{
          x: Date.UTC(2021, 0, 1),
          title: 'We actioned',
          text: 'Hover text'
	      }, {
          x: Date.UTC(2025, 0, 1),
          title: 'Doing the thing',
          text: 'Hover text'
	      }, {
          x: Date.UTC(2029, 0, 1),
          title: 'We should be...