Highcharts-draggable reports TypeError on drop

18 views Asked by At

I'm trying to achieve custom thing using highcharts-draggable. As there is no out-of-the-box solution for that. I have a line series with multiple data points and another series with just a single data point (scatter) showing a special value on the line (I don't want to go deeper into the domain).

I have achieved that by linking those series and writing this piece of code:

dragStart: function(e: Highcharts.PointDragStartEventObject) {
                this.update({visible: false});
                this.series.addPoint({x:0, y: 0}, true);
            },
            drag: (e: Highcharts.PointDragEventObject) => {
                const {x, series, index} = e.target;
                const torqueSeries = series.linkedSeries[0];
                let y;
                for (let i = torqueSeries.xData.length - 1; i--;) {
                    if (torqueSeries.xData[i] < x) {
                        y = range(torqueSeries.xData[i], torqueSeries.xData[i + 1], torqueSeries.yData[i], torqueSeries.yData[i + 1], x);
                        break;
                    }
                }
                series.getValidPoints()[0].update({x, y}, true);
            },
            drop: (e: Highcharts.PointDropEventObject) => {
                const {x, series} = e.target;
                const torqueSeries = series.linkedSeries[0];
                let y;
                for (let i = torqueSeries.xData.length - 1; i--;) {
                    if (torqueSeries.xData[i] < x) {
                        y = range(torqueSeries.xData[i], torqueSeries.xData[i + 1], torqueSeries.yData[i], torqueSeries.yData[i + 1], x);
                        break;
                    }
                }
                series.removePoint(1, false);
                e.target.update({x, y, visible: true}, true);
                e.preventDefault();
            }

The general idea is to restrict dragging to the line. The code works fine, but when I drop there is an issue reported by HC in the last line of drop function saying:

Uncaught TypeError: Cannot read properties of undefined (reading 'chart')
    at C.update (highcharts.js?v=edf679bd:2858:69)
    at C.drop (TorqueTurnChart.tsx?t=1711529095151:134:18)
    at highcharts.js?v=edf679bd:163:31
    at Array.forEach (<anonymous>)
    at C (highcharts.js?v=edf679bd:162:64)
    at C.firePointEvent (highcharts.js?v=edf679bd:2781:17)
    at v (highcharts_modules_draggable-points.js?t=1711446888273&v=edf679bd:86:100)
    at e3.unbindDragDropMouseUp.s.passive (highcharts_modules_draggable-points.js?t=1711446888273&v=edf679bd:175:15)

UPDATE: There was unnecessary all points removal (I missed that) and that caused the original error. I've updated the code and that works as harm without any errors.

0

There are 0 answers