JSFiddle - React, Tailwind, and code Playground

by franzo

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>

<div id="drop">&nbsp;</div>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    height: 500px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },

    title: {
        text: 'Amount of sun'
    },
    credits: { enabled: false },

    plotOptions: {
        series: {            
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}'
            },
            dragDrop: {
                draggableX: false,
                draggableY: true,
                dragMinY: 0,
                dragMaxY: 32,
                liveRedraw: true
            },
            marker: {radius: 3},
            point: {events: {drop: function (e) {
            	document.getElementById('drop').innerText = `${this.name}: ${this.y.toFixed(1)}`;
            }}}
        }
    },    
   xAxis: {
   	categories: ['None', 'A little', 'Some', 'A lot', 'Drenched']
   },
    yAxis: {
        title: '',
        min: 0,
        tickInterval: 5
    },
		legend: { enabled: false },
    tooltip: { enabled: false },
    series: [{
        name: 'Amount of sun',
        cursor: 'move',
        data: [ 
        	{               
            name: 'None', 
            y: 0,
            categoryiId: 23489,
            dragDrop: { draggableY: false }
        	},
          {               
            name: 'A little', 
            y: 5,
            dragDrop: {  dragMinY: 0.1, dragMaxY: 9.9, draggableY: true },
            marker: {
                    symbol: 'diamond',
                    fillColor: '#ee4d21',
                    radius: 5
                }
        	},
          {               
            name: 'Some', 
            y: 10,
            dragDrop: { draggableY: false }
        	},
          {               
            name: 'Lots', 
            y: 21,
            dragDrop: { dragMinY: 10.1, dragMaxY: 31.9, draggableY: true },
            marker: {
                    symbol: 'diamond',
                    fillColor: '#ee4d21',
                    radius: 5
                }
        	},
          {               
       ...