JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 500px; height: 300px; margin: 0 auto"></div>

CSS

.highcharts-tracker rect:hover {
    filter: brightness(80%); // Can't find an easy way to lower the opacity on hover in highcharts
}

JavaScript

$(function () {
    $('#container').highcharts({
            chart: {
                type: 'bar',
                spacingTop: 0,
            },
            colors: [
                '#ff6600',    
                '#333300',
                '#660000',
                '#330033',
                '#666600'
            ],
            legend: {
            	enabled: false
			},
            title: {
                text: ''
            },
            xAxis: {
                labels: {
                    enabled: false
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: ''
                },
                labels: {
                    enabled: false
                }
            },
           plotOptions: {
               series: {
                    stacking: 'normal',
                    states: {
                        hover: {
                        	enabled: false;
                        }
                    }
                }
            },        
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b>';
                }
            },
            series: [{
                name: 'clean',
                data: [10],
                
            }, {
                name: 'eat',
                data: [10]
            }, {
                name: 'sleep',
                data: [40]
            }, {
                name: 'work',
                data: [30]
            }, {
                name: 'play',
                data: [10]
            }]
    });
});