JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            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].legendItem;
                            item.on('mouseover', function (e) {
                                //show custom tooltip here
                                alert("mouseover" + i);
                            }).on('mouseout', function (e) {
                                //hide tooltip
                                console.log("mouseout" + i);
                            });
                        })(i);
                    }

                }
            }

        },
        series: [{
            name: 'counter',
            data: [120, 100, 130]

        }, {
            enableMouseTracking: false,
            dataLabels: {
                enabled: true
            },
            name: 'value',
            data: [6, 6, 7]
        }]
    });
});