JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<input id='In0' type="text" name="In0" value="83" />
<input id='In1' type="text" name="In1" value="83" />
<input id='In2' type="text" name="In2" value="83" />
<div id='container'></div>
<div id='drag'></div>
<div id='drop'></div>
<div id="volumeChart"></div>
<div id="drag"></div>
<div id="drop"></div>
<?php if ( isset($_GET[ 'run']) ) { switch ( $_GET[ 'run'] ) { case 'calculate': calculate(); exit; } } function calculate() { $P1=( float)$_POST[ 'In0']; $P2=( float)$_POST[ 'In1']; $P3=( float)$_POST[ 'In2']; $Res1="Success!" ; $PA=a rray( $PA[1]=$ P1, $PA[2]=$ P2, $PA[3]=$ P3 ); $json=a rray( # ''=>$ 'Res1' => $PA, '$P0' => $PA ); echo json_encode($json); } ?>

JavaScript

$('#container').highcharts({
    chart: {
        animation: false
    },

    xAxis: {

    },

    yAxis: {
        min: 0,
        max: 100
    },

    plotOptions: {
        series: {
            cursor: 'ns-resize',
            point: {
                events: {

                    drag: function (e) {
                        // Returning false stops the drag and drops. Example:
                        /*
                            if (e.newY > 300) {
                                this.y = 300;
                                return false;
                            }
                            */
                        $('#drag').html(
                            'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 2) + '</b>');

                        $('#In' + this.category).val(
                        Highcharts.numberFormat(this.y, 2));
                    },
                    drop: function () {
                        $('#drop').html(
                            'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');

                        var chart = $('#container').highcharts();
                        chart.series[1].data[this.category].update(this.y / 2);

                    }
                }
            },
            stickyTracking: false
        },

    },

    tooltip: {
        enabled: false
    },

    series: [{
        data: [50, 60, 40],
        draggableY: true
    }, {
        data: [10, 60, 100],
        draggableY: false
    }]

});