JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

body{
  
  background:grey
}

JavaScript

// create the chart
Highcharts.chart('container',


  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      data: [105, 180],
    }],
    //▲▲▲ UPDATE DATA HERE ▲▲▲

    chart: {
      type: 'column',
      backgroundColor: "transparent",
      marginBottom: 85,
      marginLeft: 120,
      marginRight: 120,
      events: {
        load: function() {
          var updown = '<div>1.7x<br>greater than supply</div>',
            colChart = this.series[0],
            valNum = colChart.data.length,
            lastCol = colChart.points[valNum - 1],
            colH = lastCol.shapeArgs.height,
            colW = lastCol.shapeArgs.width;

          console.log(colH);
          console.log(colW);
          // assign other series values. this cant be added below because it is already called on top with just the data to make updates easier
          this.update({
            series: [{
              colorByPoint: true,
              borderWidth: 0,
            }],
          });

          lastCol.update({
            dataLabels: {
              style: {
                color: "red",
              },
              y: 200,
              formatter: function() {
                //return "<div style='height:" + colH + "px; width:100%'><div style='text-align:center'>" + this.y + "</div><div style=''>1.7x<br>greater than supply</div></div>";
                return `<span><div>1.7x</div><span style="font-size: 87.5%; font-weight: 400;">greater than supply</span></span>`;

              },
            }
          });

          // if column is light green, make datalabel color black
          /* this.series[0].points.forEach(p => {
             if (p.color === "#4C9F8B") {
               p.update({
                 dataLabels: {
                   color: "#000"
                 }
               })
             } else {}
           })*/

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