Drag over X axis

[DAmrGharieb]

hi Chris , i try to move the point over the x axis but the chart does not response even when i converted the x axis to numbers not dates and if you can give me a work around to move over date x scale it will be benefit for me

` let options = { type: 'linear', data: { // labels: this.data.map(x => this.datepipe.transform(x[0], 'dd-MMM-yyyy')), labels: this.data.map(x => x[3]),

    datasets: [
      //   {
      //   type: 'scatter',
      //   showLine: true,
      //   label: 'dca',
      //   data: this.data.map(x => x[2]),
      //   dragData: true,
      //   dragX: true,
      //   fill: false,
      //   borderColor: 'red', pointBorderColor: 'red',
      //   backgroundColor: 'red', pointBackgroundColor: 'red',
      //   spanGaps: true,
      //   borderWidth: 3,
      //   pointHitRadius: 25,

      // },
      {
        label: 'Production',
        data: this.data.map(x => x[1]),
        dragX: true,
        dragData: true,
        fill: false,
        borderColor: 'green', pointBorderColor: 'green',
        backgroundColor: 'green', pointBackgroundColor: 'green',
        spanGaps: true,

      }
    ],

  },
  options: {
    dragData: true,
    dragX: true,
    dragDataRound: 1,
    dragOptions: {
      showTooltip: true
    },
    scales: {
      yAxes: [
        {
          id: 'y-axis',
          type: 'linear',
          ticks: {
            reverse: false,
            min: 0,
            max: this.maxPoint[1] + (this.maxPoint[1] * 3)
          },
          dragData: true,

        },],
      xAxes: [
        {
          id: 'x-axis',
          type: 'linear',
          ticks: {
            reverse: false,

          },
          dragData: true,

        },]

    },
    plugins: {
      pluginDragPoints
    },

    onDragStart: (e) => {
      //console.log(e)
    },
    onDrag: (e, datasetIndex, index, value) => {
      e.target.style.cursor = 'grabbing'
      //console.log(datasetIndex, index, value)
    },
    onDragEnd: (e, datasetIndex, index, value) => {
      e.target.style.cursor = 'default'
      console.log(datasetIndex, index, value)
      // if (index == 0)
      //   this.p1 = {
      //     x1: 'Red',
      //     y1: value
      //   };
      //   if (index == 1)
      //   this.p2 = {
      //     x1: 'Blue',
      //     y1: value
      //   };

    },
    hover: {
      onHover: (e) => {
        const point = this.dcaChart.getElementAtEvent(e)
        if (point.length) e.target.style.cursor = 'grab'
        else e.target.style.cursor = 'default'
      }
    }
  }
}

let canvas: any = document.getElementById('chartJSContainer');
let ctx: any = canvas.getContext('2d');

this.dcaChart = new Chart(ctx, options);`

[chrispahm]

Hey @DAmrGharieb,

thanks for raising an issue. It looks like your code snippet was copied out of a project of yours, unfortunately I can't (easily) reproduce the issue this way. Would it be possible for you to create a minimum working example showcasing your problem in a jsFiddle or Codepen?

Without digging too deep, I can see that you define your chart as a 'linear' type (which, to the best of my knowledge, doesn't exist in Chart.js), while your datasets seem to be defined as scatters. Are you intending to have a mixed chart? In order to drag along the x-axis your Chart type cannot be of a 'line' type. Please refer to this example if this is the type of chart you are intending to reproduce: https://jsfiddle.net/rqbcs6ep/1/

But that's just guesswork, an actual example would really help me understand your issue here :) Best Christoph

[DAmrGharieb]

i will work to produce the issue to jsfiddle .. but the problem is that when the x- axis is a date time the drag plugin doesnot work while when i converted to numbers it work ... i am make an algorithm to estimate the decline with days so i need to have on x asix dates not numbers ... i hope i delivered the idea to you properly

best regards Amr

[chrispahm]

Hey @DAmrGharieb,

in another issue, we just came up with a work-around for using a linear x-axis "disguised" as a date-axis: https://jsfiddle.net/f72kz348/9/

This allows dragging values along both the x and y-axis. I'll close this as answered using this work-around, please re-open in case the issue persist.