JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

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").mousemove(move);
    

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },
        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]
        }]

    });

    function move(event) {
    console.log(event);
        var x = event.pageX,
            y = event.pageY,
            path = ['M', chart.plotLeft, y,
                'L', chart.plotLeft + chart.plotWidth, y,
                'M', x, chart.plotTop,
                'L', x, chart.plotTop + chart.plotHeight];
          
        if (chart.crossLines) {
            // update lines
            chart.crossLines.attr({
                d: path
            });
        } else {
            // draw lines
            chart.crossLines = chart.renderer.path(path).attr({
                'stroke-width': 2,
                stroke: 'green',
                zIndex: 10
            }).add();
        }
        
        if (chart.crossLabel) {
            // update label
            chart.crossLabel.attr({
                y: y + 6,
                text: chart.yAxis[0].toValue(y).toFixed(2)
            });
        } else {
            // draw label
            chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 40, y + 6).add();
        }
    }
});