How to drag a point inside a razor page?

[ricbrue]

I am trying to use this wrapper in order to include a Chart inside my .razor page, I've successfully managed to show data but now I need to drag and update data realtime by using some scripting.

Which Blazor project type is your question related to?

• Client-Side

Which charts is this question related to?

• LineChart

JavaScript equivalent

   var options = {
                type: 'line',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [
                        {
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                reverse: false
                            }
                        }]
                    }
                }
            }
            var ctx = document.getElementById('chartJSContainer').getContext('2d');
            var chartInstance = new Chart(ctx, options);
            d3.select(chartInstance.chart.canvas).call(
                d3.drag().container(chartInstance.chart.canvas)
                    .on('start', getElement)
                    .on('drag', updateData)
                    .on('end', callback)
            );
            var element, scale, datasetIndex, index, value
            function getElement() {
                var e = d3.event.sourceEvent
                element = chartInstance.getElementAtEvent(e)[0]
                scale = element['_yScale'].id
            }
            function updateData() {
                var e = d3.event.sourceEvent
                datasetIndex = element['_datasetIndex']
                index = element['_index']
                value = chartInstance.scales[scale].getValueForPixel(e.clientY)
                chartInstance.data.datasets[datasetIndex].data[index] = value
                chartInstance.update(0)
            }
            function callback() {
                return console.log('The new value is: ' + value)
            }

Additional context

I am using a MAUI framework with Blazor integration (.razor pages)