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
                }
            }]
        }
    }
});
});
        
            Page 1 / 1 
    
            2. In the header (html) I write:  <script src=https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js></script>
3. In the question where the graph goes (html): <canvas height="400" id="myChart" width="400"> </canvas>
Any suggestions what may be happening?
                
    
                                    
            1. In the header (html) I write:  
 src = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"
 src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js"
2. In the question where the graph goes (html):  height="400" id="myChart" width="400">  (with canvas)
                
    
                            Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
