Highcharts Annotations Demo

author(s): Sebastian Domas

by Haze32

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

body{
  background:grey
}

JavaScript

Highcharts.chart('container',


  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      data: [26, 33, 41, 64, 81, 98] //Headline Rents
    }, {
      data: [4]
    }],
    xAxis: {
      categories: ["2017", "2018", "2019", "2020", "2021", "2022", ],
    },
    //▲▲▲ UPDATE DATA HERE ▲▲▲

    chart: {
      type: 'column',
      height: 500,
      backgroundColor: "transparent",
      animation: false,
      events: {
        load: function() {
          var
            colChart = this.series[0],
            ch1col1 = colChart.points[0],
            ch1colLength = this.series[0].points.length - 1,
            ch1colLast = colChart.points[ch1colLength],
            change = this.series[1].points[0];

          this.update({
            series: [{}, {
              data: [null],
              showInLegend: false,
            }],
            yAxis: {
              max: ch1colLast.y + 18,
            },
            xAxis: {
              crosshair: true,
              lineColor: '#fff',
              labels: {
                enabled: true,
                style: {
                  fontSize: '14px',
                  fontWeight: '400',
                  color: '#fff',
                }
              },
            },
            annotations: [{
              labels: [{
                text: '<span style="color:#A5CD24; font-size:20px">▲</span><span style="font-size:16px;font-weight:600">~' + change.y + "x</span>",
                point: {
                  xAxis: 0,
                  yAxis: 0,
                  x: ch1colLength,
                  y: ch1colLast.y
                },
              }],

            }],
          });
          ch1col1.update({
            color: "#4C9F8B",
          });
          ch1colLast.update({
            color: "#4C9F8B",
          });

        },
      }
    },
    title: {
      text: '',
      style: {
        fontSize: '16px',
        fontWeight: '400',
        color: '#fff',
      }
    },
    subtitle: {
      text: ''
   ...