JSFiddle - React, Tailwind, and code Playground

by arawn45

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/export-data.js"></script>
<script src="http://code.highcharts.com/modules/draggable-points.js?1"></script>
<script src="http://code.highcharts.com/modules/series-label.js"></script>
<script src="http://code.highcharts.com/modules/highcharts-more.js"></script>


<div id="container"></div>
<div id="dragstatus"></div>

JavaScript

var setDragStatus = function (status) {
    document.getElementById('dragstatus').innerHTML = status;
};



Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Snow depth at Vikjafjellet, Norway'
    },
    subtitle: {
        text: 'Irregular time data in Highcharts JS'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Snow depth (m)'
        },
        min: 0
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

    plotOptions: {
        series: {
            marker: {
                enabled: true,			
            },
			dragDrop: {
				draggableX: true,
				liveRedraw: true,
                groupBy: 'groupId' // Group data points with the same groupId
			},
			point: {
                events: {
                    dragStart: function (e) {
                        setDragStatus('Drag started at page coordinates ' +
                                e.chartX + '/' + e.chartY + (
                            e.updateProp ?
                                '. Updating ' + e.updateProp :
                                ''
                        ) + '. ');
                    },
                    drag: function (e) {
                        // Returning false stops the drag and drops. Example:
                        
                        
                        if (Highcharts.dateFormat('%e - %b - %Y', new Date(this.x)) ==
                        (Highcharts.dateFormat('%e - %b - %Y',  Date.UTC(1970, 10, 9)))) {
                            setDragStatus('erreur condition 1 '+Highcharts.dateFormat('%e - %b - %Y', new Date(this.x))+' ');
                            return false;
                        }
 ...