JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.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() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    series: [{
      data: [3, 4, 4, 5],
      color: 'rgba(50,120,60,1)',
      point: {
        events: {
          mouseOver: function() {
            Highcharts.each(this.series.data, function(p, i) {
              p.update({
                color: 'rgba(50,120,60,0.5)'
              }, false)
            });
            this.update({
              color: 'rgba(50,120,60,1)'
            });
          },
          mouseOut: function() {
            Highcharts.each(this.series.data, function(p, i) {
              p.update({
                color: 'rgba(50,120,60,1)'
              }, false)
            });
            this.series.chart.redraw();
          },
        }
      }
    }]
  });
});