Retrieving y-value on drag interaction

[liewshin]

I am following the example on this page to create a horizontal threshold line, where the selected line can be dragged up or down onmousedown, and then the final position of the line will be the position where onmouseup is called. The current example provided only supports dragging of annotations when the mouse is directly on the annotation, so if I move my mouse too quickly and it moves out of the annotation, it stops being draggable. What would be the best way to fix this? I have tried running the handleElementDragging function on 'mouseout', but it causes the threshold line to reset to the default value when the mouse moves out of the chart, which is not what i want.

Secondly, I am having trouble retrieving the y-value of where I drop the horizontal line. The example provided showcases how the dragging can be handled using MouseEvent.y, which is the value of the mouse at the viewport rather than in relation to the graph itself. Are there any methods to directly retrieve the y-value of the graph? I saw an example here, but a slider would not work for our use case.

Below is an example graph for my use case. Currently I am working with react-chartjs-2 to use this library. In the future I do plan to implement multiple horizontal line annotations in a single chart as well.

[stockiNail]

I am following the example on this page to create a horizontal threshold line, where the selected line can be dragged up or down onmousedown, and then the final position of the line will be the position where onmouseup is called. The current example provided only supports dragging of annotations when the mouse is directly on the annotation, so if I move my mouse too quickly and it moves out of the annotation, it stops being draggable. What would be the best way to fix this? I have tried running the handleElementDragging function on 'mouseout', but it causes the threshold line to reset to the default value when the mouse moves out of the chart, which is not what i want.

@liewshin the example has got to provide a prototype how to manage draggable annotations. Our goal was only that and not include it in the plugin.
I need time to create a codepen for you to do that. I'll do my best. ;)

Secondly, I am having trouble retrieving the y-value of where I drop the horizontal line. The example provided showcases how the dragging can be handled using MouseEvent.y, which is the value of the mouse at the viewport rather than in relation to the graph itself. Are there any methods to directly retrieve the y-value of the graph? I saw an example here, but a slider would not work for our use case.

@liewshin when you have a relative Y coordinate of the canvas, you should use APIs (methods/functions) of the Chartjs scale object to transform Y (or X) coordinate to the real value of the data.

• https://www.chartjs.org/docs/latest/api/classes/Scale.html#getdecimalforpixel
• https://www.chartjs.org/docs/latest/api/classes/Scale.html#getpixelfordecimal (viceversa, having a coordinate on canvas, to get the value on scale)

[liewshin]

Hi @stockiNail, thank you so much for the response. I had a little trouble figuring out how to use the Chartjs API, but it gave me an idea of how to retrieve the Y coordinate. I am still figuring out the first issue though, especially for when i create multiple horizontal lines. When the lines cross over, the dragging interaction stops and gets jerky.

[anhln1998]

@liewshin I am also looking for a way to get x,y coordinates on the chart when dragging, have you found a solution yet, if so please let me know? thank you

[anhln1998]

[liewshin]

Hi @anhln1998 , sorry for the late reply. I ended up creating my own methods for calculating the values off the element's value and chart values, but I have to admit I haven't looked at this code since I worked on it in April, so this is the best explanation I can provide for my code.

I created a function mapValueToRange() that calculated the current y value based off the element's current y value and the value of the top and bottom margins of chartarea as well as the range of the y axis. This function was called in another method releaseMouse(), that is called in the handleDrag() function (more details of this function is in one of the links above)

Sample code as below, note that I am using both react and typescript for my project. The below example is for calculation of y values only, but can be modified to calculate the x values for your usecase as well. Hope this helps!

const mapValueToRange = (value:number, low1:number, high1:number, low2:number, high2:number): number => {
    return low2 + (high2 - low2) * (high1 - value) / (high1 - low1);
};

const releaseMouse = () => {
        const chartInstance = chartRef.current;
        if (elementRef.current && chartInstance) {
            const yValue = mapValueToRange(elementRef.current.y, chartInstance.chartArea.top, chartInstance.chartArea.bottom, 0, 100)
            if (Math.abs(valueRef.current - yValue) > 0.1) { 
                if (yValue < 0) {
                    setValue(0)
                } else if (yValue > 100) {
                    setValue(100)
                } else {
                    setValue(yValue)
                    valueRef.current = yValue
                }
            }
        }
        if (chart) {
            chart.update();
        }
    }