JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 200px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            events: {
                load: function () {
                    var chart = this,
                        legend = chart.legend;
                    for (var i=0, len=legend.allItems.length; i<len; i++) {
                        (function(i) {
                            var item = legend.allItems[i].legendSymbol;
                            item.on('mouseover', function (e) {
                                //show custom tooltip here
                                console.log("mouseover" +i);
                                chart.tooltip.refresh(chart.series[len-1-i].points[0]);
                            }).on('mouseout', function (e) {
                                //hide tooltip
                                console.log("mouseout" + i);
                            });
                        })(i);
                    }
                }
            }
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: [''],
            lineWidth: 0,
            tickWidth: 0
        },
        yAxis: {
            min: 0,
            max: 10,
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Free',
            data: [2],
            borderRadiusTopLeft: 25,
            borderRadiusTopRight: 25
        }, {
            name: 'Bananas',
            data: [2]
        }, {
            name: 'Apples',
            data: [1]
        }, {
            name: 'Pears',
            data: [2]
        }, {
            name: 'Grapes',
            data: [3],
            borderRadiusBottomRight: 25,
           ...