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>

JavaScript

Highcharts.chart('container',



  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      data: [
        8.1, 10.1,
      ]
    }, {
      data: [25]
    }],
    xAxis: {
      categories: ["January 2022", "March 2023"],
    },
    //▲▲▲ UPDATE DATA HERE ▲▲▲

    chart: {
      type: 'column',
      backgroundColor: "transparent",
      animation: false,
      events: {
        load: function() {
          var
            colChart = this.series[0],
            ch1col1 = colChart.points[0],
            ch1col2 = colChart.points[1],
            change = this.series[1].points[0],
            ch1LabelY = '',
            ch1LabelX = ch1col2.x * .5 - .05;

          if (ch1col2.y > ch1col1.y) {
            ch1LabelY = (ch1col2.y - ch1col1.y) / 2 + ch1col1.y
          } else {
            ch1LabelY = (ch1col1.y - ch1col2.y) / 2 + ch1col1.y
          }

          this.update({
            series: [{}, {
              data: [null]
            }],
            yAxis: {
              max: ch1col2.y + 1,
            },
            xAxis: {
              crosshair: true,
              lineColor: '#000',
              labels: {
                enabled: true,
                style: {
                  fontSize: '14px',
                  fontWeight: '600',
                  color: '#000',
                }
              },
            },
            annotations: [{
              labels: [{
                text: '<div style="font-size:18px;font-weight:600,color:#000">' + change.y + "%</div><div>Aenean tellus</div>",
                shape: 'callout',
                shadow: true,
                useHTML: true,
                point: {
                  xAxis: 0,
                  yAxis: 0,
                  x: ch1LabelX,
                  y: ch1LabelY
                },
                style: {
                  fontSize: '18px',
                  color: '#000',
                },
                y: 0, // Adjust the vertical position of the callout
                backgroundColor:...