How to drag only a few points

[HanKienjd]

Hi, hava a nice day. I am having a Line Chart. And use your library for drag and drop points. But now points on Axis Y are also dragged. Is there any way I can make them not move

Here this is my config

plugins: {
    tooltip: {
      // insert the input form into the tooltip
    },
    dragData: {
      round: 0,
      showTooltip: true,
      dragX: true,
      onDragStart: function (e) {
        console.log("Drag Start" , e);
      },
      onDrag: function (e, datasetIndex, index, value) {
        e.target.style.cursor = "grabbing";
        console.log("Drag" , e, datasetIndex, index, value)
      },
      onDragEnd: function (e, datasetIndex, index, value) {
        e.target.style.cursor = "default";
        console.log("Drag End", datasetIndex, index, value)
      },
    }
      // [CustomDragData]
  }

JSfiddle: https://jsfiddle.net/Hanjd/6c5opab3/1/

[chrispahm]

Hey @HanKienjd,

you can do something like the following to limit dragging to the x-axis:

let original_y_value;

const config = {
    responsive: true,
    plugins:{
        dragData: {        
            round: 0,
            dragX: true,
            showTooltip: true,
            onDragStart:function (e, datasetIndex, index, value) {
            original_y_value = value.y;
            },
            onDrag: function (e, datasetIndex, index, value) {
                e.target.style.cursor = 'grabbing'
                //console.log("Drag Value: ", value.x)
                value.y = original_y_value;
            },
            onDragEnd: function (e, datasetIndex, index, value) {
                e.target.style.cursor = 'default'
            },
        },
    },

JSfiddle: https://jsfiddle.net/3yreh5bL/1/

Hope this helps, please re-open if the issue persists