Highcharts Demo

author(s): Øystein Moseng

by Sundarapandiyan_pa

HTML

<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="container" style="min-width: 300px;height: 500px;"></div>
<div id="dragstatus"></div>

JavaScript

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

Highcharts.chart('container', {
    chart: {
        animation: false,
        type: 'xrange',
        zoomType: 'x'
    },

    title: {
        text: 'Highcharts draggable xrange demo'
    },

    tooltip: {
        headerFormat: '<span style="font-size: 10px">{point.yCategory}</span><br/>',
        pointFormat: '{point.name}'
    },

    plotOptions: {
        series: {
            minPointLength: 5, // Always show points, even when resized down
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            },
            dragDrop: {
                draggableX: true,
                draggableY: true,
                dragMinY: 0,
                dragMaxY: 2,
                dragMinX: Date.UTC(2014, 10, 15),
                dragMaxX: Date.UTC(2015, 0, 10),
                liveRedraw: false,
                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 :
                                ''
                        ) + '. ');
                        console.log("start::");
                    },
                    drag: function (e) {
                    console.log("drag::");
                        // Returning false stops the drag and drops. Example:
                        /*
                        if (e.newPoint && e.newPoint.x < 300) {
                            return false;
                        }
                        */
                        var status = 'Dragging "' +
                            (this.name || this.id) + '". ' +...