JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  var svgEl;

  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Data input as column arrays'
    },
    xAxis: {
      crosshair: true,
      categories: ['Apples', 'Pears', 'Oranges']
    },
    yAxis: {
      max: 4
    },
    tooltip: {
      formatter: function() {
        var thisPoint = this.point,
          thisPointIndex = thisPoint.x,
          linkedPoint = this.series.linkedSeries[0].points[thisPointIndex];

        return '<span style="font-size: 10px">' + this.key + '</span><br/>' +
          '<span style="color:' + linkedPoint.color + '">\u25CF</span> ' +
          linkedPoint.series.name + ': <b>' + linkedPoint.y + '</b><br/>';
      }
    },
    plotOptions: {
      column: {
        grouping: false,
        point: {
          events: {
            mouseOver: function() {
              var point = this,
                plotX = point.plotX,
                plotY = point.plotY,
                margin = 20,
                startX = plotX - point.pointWidth / 2 + margin,
                startY = margin,
                width = point.pointWidth - 2 * margin,
                height = point.series.chart.plotHeight - margin,
                series = point.series,
                chart = series.chart;

              svgEl = chart.renderer.rect(startX, startY, width, height)
                .attr({
                  'stroke-width': 1,
                  stroke: 'black'
                })
                .add(point.graphic.parentGroup);
            },
            mouseOut: function() {
              svgEl.destroy();
            }
          }
        }
      }
    },
    series: [{
      name: 'a',
      id: 'first-series',
      linkedTo: 'second-series',
      data: [1, 2, 3]
    }, {
      name: 'b',
      id: 'second-series',
      color: 'transparent',
      pointPadding: 0,
      groupPadding: 0,
      data: [4, 4, 4]
    }]
  });
});