Draggable Bart Chart

Hi all, I am trying to make a draggable bar chart using charts-plugin-dragdata. When I put the mouse in the bar, the mouse becomes a hand, but then, I can't drag the bar. I am following very closely the source code given in the webpage (https://github.com/chrispahm/chartjs-plugin-dragdata), and adapting it to Qualtrics using a past thread in the community about how to use Chart.js in Qualtrics. I don't get any error message, it is just that I cannot drag the bars.

Here are the steps:

1. In the JS of the question I write:
Qualtrics.SurveyEngine.addOnReady(function()
{
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
dragData: true,
dragDataRound: 1,
dragOptions: {
showTooltip: true
},
onDragStart: function(e, element) {
// console.log(e)
},
onDrag: function(e, datasetIndex, index, value) {
e.target.style.cursor = 'grabbing'
// console.log(datasetIndex, index, value)
},
onDragEnd: function(e, datasetIndex, index, value) {
e.target.style.cursor = 'default'
// console.log(datasetIndex, index, value)
},
hover: {
onHover: function(e) {
const point = this.getElementAtEvent(e)
if (point.length) e.target.style.cursor = 'grab'
else e.target.style.cursor = 'default'
}
},
scales: {
yAxes: [{
ticks: {
max: 6000,
min: 0
}
}]
}
}
});

});