JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            events: {
                load: function () {
                    this.highlight = this.renderer.rect(0, -100, 500, 40).attr({
                        fill: 'rgba(255,0,0,0.2)',
                        zIndex: 0
                    }).add();
                }
            }
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                point: {
                    events: {
                        mouseOver: function () {
                            var h = this.series.chart.highlight;

                            if (h) {
                                // h.show();
                                console.log(this)
                                h.attr({
                                    y:  this.series.chart.plotTop - this.plotX + this.series.chart.plotHeight - h.height / 2
                                });
                            }
                        },
                        mouseOut: function () {
                            var h = this.series.chart.highlight;

                            if (h) {
                                // h.hide();
                            }
                        }
                    }
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});