How to : dragX: true , but not for first & last points + How to click on graph to add a point draggable

[maximedotair]

Hello ! 👋
Thanks you for this amazing plugin :)
I want to know how to allow dragX (true) but not for the first & last points of data
And how to add the possibility to click on chart to add a new point, draggable :)

Best Regards !

[chrispahm]

Hey 😊
Here's a small fiddle showcasing what you would like to achieve:
https://jsfiddle.net/zdcqstfa/17/

You can restrict the (x-)dragging behaviour for certain datapoints using a combination of the onDragStart and onDrag callbacks:

let storedValue;
const chartOptions = {  
  // ... the other chart options ...
  plugins: {
    dragData: {
      onDragStart: function(e, datasetIndex, index, curValue) {
        if (datasetIndex === 0 && (index === 0 || index === window.chart.data.datasets[datasetIndex].data.length - 1)) {
          // return false if you want to prohibit dragging entirely
          // return false
          // make datapoint immutable using parse/stringify combo
          storedValue = JSON.parse(JSON.stringify(curValue))
        }
      },
      onDrag: function(e, datasetIndex, index, curValue) {
        if (datasetIndex === 0 && (index === 0 || index === window.chart.data.datasets[datasetIndex].data.length - 1)) {
          curValue.x = storedValue.x
        }
      }
    }
  }
}

Adding a datapoint by clicking on the chart is a lot trickier and requires its own plugin. I slightly modified your request to creating new points on double click, as otherwise people end up creating new data points when actually they just want to drag an existing data point. You can change that behaviour though (yet I wouldn't recommend it 😊):

  const ChartJSClickPlugin = {
    id: 'click',
    afterInit: function (chartInstance) {          
      // start listening for double-click events on the charts canvas
      chartInstance.canvas.addEventListener("dblclick", e => {
        // query corresponding x/y values for the click event
        let x, y        
        if (e.touches) {
          x = chartInstance.scales.x.getValueForPixel(e.touches[0].clientX - chartInstance.canvas.getBoundingClientRect().left)
          y = chartInstance.scales.y.getValueForPixel(e.touches[0].clientY - chartInstance.canvas.getBoundingClientRect().top)
        } else {
          x = chartInstance.scales.x.getValueForPixel(e.clientX - chartInstance.canvas.getBoundingClientRect().left)
          y = chartInstance.scales.y.getValueForPixel(e.clientY - chartInstance.canvas.getBoundingClientRect().top)
        }
        // find the fitting index where the new datapoint should be inserted to
        // note that only the x-axis is relevant here, as the line is read from left-to-right
        const data = chartInstance.data.datasets[0].data
        // 
        let indexToInsert = data.findIndex((point,index,arr) => {
          if (index === 0 && x < point.x) {
            // insert at the beginning
            return 0
          }
          // insert at the first array position where our new datapoint has a greater value than the previous entry
          return point.x > x
        })
        // insert the new datapoint accordingly
        data.splice(indexToInsert,0,{x,y})
        // update the chart, without animation
        chartInstance.update('none')
        // you may switch to the following line if you prefer animations
        //chartInstance.update()
      })
    }
  }
  Chart.register(ChartJSClickPlugin)

[maximedotair]

Oh!!! Thank you so much! Incredible :)) you answered in not even 1 hour thank you for the explanations and recommendations! It's magic :)) thank you Le sam. 28 mai 2022 à 13:35, Christoph Pahmeyer ***@***.***> a écrit :

…

Hey 😊 Here's a small fiddle showcasing what you would like to achieve: https://jsfiddle.net/zdcqstfa/17/ You can restrict the (x-)dragging behaviour for certain datapoints using a combination of the onDragStart and onDrag callbacks: let storedValue; const chartOptions = { // ... the other chart options ... plugins: { dragData: { onDragStart: function(e, datasetIndex, index, curValue) { if (datasetIndex === 0 && (index === 0 || index === window.chart.data.datasets[datasetIndex].data.length - 1)) { // return false if you want to prohibit dragging entirely // return false // make datapoint immutable using parse/stringify combo storedValue = JSON.parse(JSON.stringify(curValue)) } }, onDrag: function(e, datasetIndex, index, curValue) { if (datasetIndex === 0 && (index === 0 || index === window.chart.data.datasets[datasetIndex].data.length - 1)) { curValue.x = storedValue.x } } } } } Adding a datapoint by clicking on the chart is a lot trickier and requires its own plugin. I slightly modified your request to creating new points on double click, as otherwise people end up creating new data points when actually they just want to drag an existing data point. You can change that behaviour though (yet I wouldn't recommend it 😊): const ChartJSClickPlugin = { id: 'click', afterInit: function (chartInstance) { // start listening for double-click events on the charts canvas chartInstance.canvas.addEventListener("dblclick", e => { // query corresponding x/y values for the click event let x, y if (e.touches) { x = chartInstance.scales.x.getValueForPixel(e.touches[0].clientX - chartInstance.canvas.getBoundingClientRect().left) y = chartInstance.scales.y.getValueForPixel(e.touches[0].clientY - chartInstance.canvas.getBoundingClientRect().top) } else { x = chartInstance.scales.x.getValueForPixel(e.clientX - chartInstance.canvas.getBoundingClientRect().left) y = chartInstance.scales.y.getValueForPixel(e.clientY - chartInstance.canvas.getBoundingClientRect().top) } // find the fitting index where the new datapoint should be inserted to // note that only the x-axis is relevant here, as the line is read from left-to-right const data = chartInstance.data.datasets[0].data // let indexToInsert = data.findIndex((point,index,arr) => { if (index === 0 && x < point.x) { // insert at the beginning return 0 } // insert at the first array position where our new datapoint has a greater value than the previous entry return point.x > x }) // insert the new datapoint accordingly data.splice(indexToInsert,0,{x,y}) // update the chart, without animation chartInstance.update('none') // you may switch to the following line if you prefer animations //chartInstance.update() }) } } Chart.register(ChartJSClickPlugin) — Reply to this email directly, view it on GitHub <#98 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGJ73GBUKWXX7ZNM2B4GP3VMIAIZANCNFSM5XGKOBZA> . You are receiving this because you authored the thread.Message ID: <chrispahm/chartjs-plugin-dragdata/repo-discussions/98/comments/2840300@ github.com>