JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 500px"></div>

JavaScript

$(function() {
    
    // Highcharts plugin for displaying value information in the legend
    // Author: Torstein Hønsi
    // License: MIT license
    // Last revision: 2013-07-24
    (function (H) {
        H.Series.prototype.point = {}; // The active point
        H.Chart.prototype.callbacks.push(function (chart) {
            $(chart.container).bind('mousemove', function () {
                var legendOptions = chart.legend.options,
                    hoverPoints = chart.hoverPoints;
                
                if (!hoverPoints && chart.hoverPoint) {
                    hoverPoints = [chart.hoverPoint];
                }
                if (hoverPoints) {
                    H.each(hoverPoints, function (point) {
                        point.series.point = point;
                    });
                    H.each(chart.legend.allItems, function (item) {
                        item.legendItem.attr({
                            text: legendOptions.labelFormat ? 
                                H.format(legendOptions.labelFormat, item) :
                                legendOptions.labelFormatter.call(item)
                        });
                    });
                    chart.legend.render();
                }
            });
        });
        // Hide the tooltip but allow the crosshair
        H.Tooltip.prototype.defaultFormatter = function () { return false; };
    }(Highcharts));
    //--- End plugin
    
    


    $('#container').highcharts({
        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        legend: {
            labelFormat: '{name} ({point.y})'
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
        
    });

});