Drag over X axis doesnt work on react app

[selimovicz]

Describe the bug Drag action over X axis doesnt work when the library is used in react app.

To Reproduce jsFiddle

Hey, @chrispahm can you please jump in and see what's happening here. There is code snippet in jsfiddle that I've provided. I followed instructions in documentation and added dragX property, to enable dragging over X axis, but it doesn't work.

[selimovicz]

If anyone stumble upon this issue in future, the solution is this. Instead of defining data as plain array of numbers (take a look into my jsfiddle example), you should define data as array of collections of x and y. Like this: const lineChartData = { datasets: [ { label: '# of Points', data: [ { x: 10, y: 10, }, { x: 20, y: 50, }, { x: 30, y: 30, }, ], borderWidth: 1, pointHitRadius: 25, fill: true, tension: 0.4, backgroundColor: (context: ScriptableContext<'line'>) => { const { ctx } = context.chart; const gradient = ctx.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(0, 'rgba(250,174,50,0.4)'); gradient.addColorStop(1, 'rgba(250,174,50,.1)'); return gradient; }, borderColor: '#F8991D', }, ], }

[chrispahm]

Thanks @selimovicz for raising an issue!

Glad you found the solution to your problem. This issue pops up frequently, (see #9 & #47), and it seems that the example in the readme called "Line - Drag x-, and y-axis (scatter chart)" (example,source) is often overlooked.

Is there anything we could do to improve the visibility of those examples? Maybe also a hint in the dragX section?