JSFiddle - React, Tailwind, and code Playground

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: #000
}

JavaScript

Highcharts.chart('container',



  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      data: [
        749, 784,
      ]
    }, {
      data: [5]
    }],
    xAxis: {
      categories: ["Q1'22", "Q1'23"],
    },
    //▲▲▲ 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: {
              min: 720,
              max: ch1col2.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 + "%</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",
   ...