Highcharts Annotations Demo

author(s): Sebastian Domas

by Black Label

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']
    ]
  }],

  exporting: {
    allowHTML: true
  },

  annotations: [{
    labels: [{
      useHTML: true,
      text: '<p style="font-size: 20px; line-height: 16px; color: white;">hello <br>there</p>',
      point: '3',
    }],
  }]
});