Highcharts Anootations Demo

author(s): Sebastian Domas

by ipoly

HTML

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

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

CSS

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Highcharts Annotations'
  },

  subtitle: {
    text: 'Styled and formatted like tooltips'
  },

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

  tooltip: {
    enabled: false
  },
  annotations1: [{
    labels: [{
      point: '5',
      text: 'Max'
    }],
    draggable: 'xy' // set by default
  }],

  annotations: [{
    draggable: 'xy', // set by default
    labelOptions: {
      format: '' +
        '<span style="font-size: 10px">{point.x}</span><br/>' /* header */ +
        '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>' /* body */ ,

      backgroundColor: Highcharts.color('#f7f7f7').setOpacity(0.85).get(),
      borderWidth: 1,
      shadow: true,
      padding: 8,
      //distance: 16,
      borderRadius: 3,
      borderColor: Highcharts.getOptions().colors[0],
      style: {
        color: '#333333',
        cursor: 'default',
        fontSize: '12px',
        whiteSpace: 'nowrap'
      }
    },
    zIndex: 7
  }]
});