CODEWITHSUNDEEP
javascripthighcharts
user2166864
user2166864

Reputation: 15

Drag multiple points at one time in highcharts

I am trying to modify several points on a spline at once using the draggable-points plugin. The desired functionality of the fiddle at the end would be to hold Ctrl and click/select 2+ points, then be able to drag those points simultaneously instead of one at a time.

My current approach is to use the groupBy functionality of dragDrop. Initially my points do not have a groupId. I am setting the groupId to 'edit' with point select/unselect events. I can see in the console that the point data is being updated by the select/unselect events. Does the groupBy property of dragDrop only work on the initial data?

 series: [{
    dragDrop:{
        draggableY: true,
        groupBy: 'groupId'
    },
    allowPointSelect: true,
    point: {
      events: {
        select: function () {
                        this.groupId = 'edit';
        },
        unselect: function () {
                        this.groupId = undefined;
        }            
      }
    },        
    name: 'Tokyo',
    marker: {
        symbol: 'square'
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
        y: 26.5,
        marker: {
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
        }
    }, 23.3, 18.3, 13.9, 9.6]

}

Hacked together this fiddle based off of one of the demo charts showing the current approach: https://jsfiddle.net/mboag76L/2/

Upvotes: 0

Views: 582

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to change groupId property through point.update:

series: [{
    dragDrop: {
        draggableY: true,
        groupBy: 'groupId'
    },
    allowPointSelect: true,
    point: {
        events: {
            select: function() {
                this.update({
                    groupId: 'edit'
                });
            },
            unselect: function() {
                this.update({
                    groupId: null
                });
            }
        }
    },
    ...]

Live demo: https://jsfiddle.net/BlackLabel/fpgbua5t/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update

Upvotes: 1

Related Questions