Home Forums Chart Support React Canvas JS: Drag Data points in Line chart Reply To: React Canvas JS: Drag Data points in Line chart

#25041

@tilakbhanugmail-com,

To create a chart with draggable dataPoints you can attach event handlers to div with id "canvasjs-react-chart-container-0" in React so as to perform necessary actions when user clicks or drags inside the div as shown in the code snippet below:

$("#canvasjs-react-chart-container-0 > .canvasjs-chart-container").on({
  mousedown: function(e) {
    _this.mouseDown = true;
    _this.getPosition(e);  
    _this.searchDataPoint();
  },
  mousemove: function(e) {
    _this.getPosition(e);
    if(_this.mouseDown) {
      clearTimeout(_this.timerId);
      _this.timerId = setTimeout(function(){
        if(_this.selected != null) {
          chart.data[0].dataPoints[_this.selected].y = _this.yValue;
          chart.render();
        }   
      }, 0);
    }
    else {
      _this.searchDataPoint();
      if(_this.changeCursor) {
        chart.data[0].set("cursor", "n-resize");
      } else {
        chart.data[0].set("cursor", "default");
      }
    }
  },
  mouseup: function(e) {
    if(_this.selected != null) {
      chart.data[0].dataPoints[_this.selected].y = _this.yValue;
      chart.render();
      _this.mouseDown = false;
    }
  }
});

Please take a look at this Sample Project for a working example with sample code.

CanvasJS chart with draggable dataPoints in React


Vishwas R
Team CanvasJS