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

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

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];
            
          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: '<span style="color:#A5CD24; font-size:20px">▲</span><span style="font-size:18px;font-weight:600">' + change.y + "%</span>",
                point: {
                  y: ch1col2.y
                },
              }],
              shapes: [{
                points: [
                  { xAxis: 0, yAxis: 0, x: 0.31, y: ch1col1.y + 0.05 },
                  { xAxis: 0, yAxis: 0, x: 0.69, y: ch1col2.y - 0.05 }
                ],
              }]
            }],
          });
          ch1col1.update({
            color: "#4C9F8B",
          });
          ch1col2.update({
            color: "#1b5e5c",
            dataLabels: {
              color: "#fff",
            }
          });
        },
      }
    },
    title: {
      text: '',
      style: {
        fontSize: '18px',
        fontWeight: '400',
        color: '#000',
      }
 ...