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

}

}]

}

}

});



});