JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var min = 0,
    max = 500,
    chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    yAxis: {
        min: min, 
        max: max
    },
    series: [{
        enableMouseTracking: false,
        data: [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250]
    }, {
        enableMouseTracking: false,
        data: [350, 350, 350, 350, 350, 350, 350, 350, 350, 350, 350, 350]
    }]
}, function(chart){

    var activePoint = null, startY, startVal, val;
    
    $(chart.container).bind('mousemove', function(e){
        if(activePoint === null) return;
        
        val = chart.yAxis[0].translate(startY - e.layerY, true);
        
        if(val + startVal > min && val + startVal < max) {
            activePoint.update(val + startVal, true, false);
        }
    })
        
    $(document).bind('mouseup', function(){
        activePoint = null;
    })
    
    $(chart.series[0].data).add($(chart.series[1].data)).each(function(i, point){
        
        point.graphic.on('mousedown', function(e){
            activePoint = point;
            startY = e.layerY;
            startVal = point.y;
        });
        
    })

});