JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="volumeChart"></div>
<div id="drag"></div>
<div id="drop"></div>

JavaScript

var chartVolume;
 var json = [];
 var arrLabel = new Array();
 var arrUplift = new Array();
 for (var i = 0; i < 5; i++) {
     arrLabel.push(i);
     arrUplift.push(i * 2);

 }

 json.push({
     name: 'Label',
     data: arrLabel
 });
 json.push({
     name: 'Uplift',
     data: arrUplift
 });


 var options = {
     chart: {
         renderTo: 'volumeChart',
         height: 345,
         animation: false,
         type: 'line',
         marginRight: 10,
         marginBottom: 60,
         resetZoomButton: {
             position: {
                 align: 'right',
                 verticalAlign: 'top'
             }
         }
     },
     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>');
                     },
                     drop: function () {
                         $('#drop').html(
                             'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
                     }
                 }
             },
             stickyTracking: false
         },
         column: {
             stacking: 'normal'
         }


     },
     colors: ['#5EA839', '#DBD256', '#D17847', '#5786C9'],

     title: {
         text: ''

     },

     xAxis: {
         categories: []
     },
     yAxis:...