JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.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", "May 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,
                y: 40,
                useHTML: true,
                formatter: function() {
                  return '<span style="font-size: 18px; font-weight: 500; color: #000;">' + this.value + '</span>';
                }
              },
            },
            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:...