Hi all, I posted this question before but it wasn't posted in a very read-friendly way, so here it goes again. I am trying to make a bar graph where you can drag the bars with the mouse. I am using Chart.js with its dragData pluggin, and I am using a source code of a demo provided in (https://www.npmjs.com/package/chartjs-plugin-dragdata, see Bar-Simple demo). I can see the graph perfectly, and the mouse becomes a hand when you put it in one of the bars (as it should be). However, it is weird, because I cannot move the bars. I think that the problem may be that I am not adapting the demo code to Qualtrics properly... But I don't know what else to try, so suggestions are appreciated. Thank you! Here are the steps that I follow: 1. Look and feel--> Hearder(html) : ``` <script src = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js"></script> ``` 2. In the question where the graph goes --> html ``` <canvas height="400" id="myChart" width="400"> </canvas> ``` 3. In the question's JS: ``` 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: { responsive: false, dragData: true, dragX: false, 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) { var 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 } }] } } }); }); ```