Highcharts Annotations Demo

author(s): Sebastian Domas

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

@import "https://code.highcharts.com/css/highcharts.css";
#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

  .highcharts-annotation-label span {
      font-size: 12px;
      line-height: 8px;
  }

JavaScript

Highcharts.chart('container', {

	chart: {
  // comment out styledMode to see the desired result
  styledMode: true
  },

    title: {
        text: 'Highcharts Annotations'
    },

    subtitle: {
        text: 'Trying to figure out how to set annotations line height in style mode'
    },

    series: [{
        keys: ['y', 'id'],
        data: [[29.9, '0'], [71.5, '1'], [106.4, '2'], [129.2, '3'], [144.0, '4'], [176.0, '5']]
    }],

    annotations: [{
        labels: [{
        		text: 'hello <br>there',
            point: '3',
            style: {
                fontSize: '8px',
                lineHeight: 8,
            },
        }],
    }]
});