ChartJs Dragdata bars disappear

I'm working on a multiple values chartjs bar. I added the dragData plugin.But when I drag a bar it disappears. For this chart it only works for the first bar, but if I first drag all the others, they disappear and then after I click the first one it works.. It is really weird to me. Thank you for the help, I really appreciate. Here is the code:

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Volumi</title>
<style>
  * {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  .chartCard {
    width: 100vw;
    height: calc(100vh - 40px);
    background: rgba(255, 26, 104, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chartBox {
    width: 700px;
    padding: 20px;
    border-radius: 20px;
    border: solid 3px rgba(255, 26, 104, 1);
    background: white;
  }
  
  
  
</style>
</head>
<body>
<div class="chartCard">
  <div class="chartBox">
    <canvas id="myChart"></canvas>
  </div>

</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@2.2.3/dist/chartjs-plugin-dragdata.min.js"></script>

<script>
// setup 


  // setup 
  const dataFoam = {
  //labels: ['Volume', 'FTe'],
  datasets: [{
        label: 'Foams & Elasomers',
    data: [{x: 1, detail: {value: 1000}}, {x: 2, detail: {value: 3220}},
           {x: 3, detail: {value: 2000}}, {x: 4, detail: {value: 7040}},
           {x: 5, detail: {value: 8040}}, {x: 6, detail: {value: 4565}},
           {x: 7, detail: {value: 5060}}],
    backgroundColor: ['rgba(255, 26, 104, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(0, 0, 0, 0.2)'],
    borderColor: ['rgba(255, 26, 104, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)',
      'rgba(0, 0, 0, 1)'],
    borderWidth: 1,
    dragData: true
  }

]};

// config 
const configFoam = {
  type: 'bar',
  data: dataFoam,
  options: {
    aspectRatio: 1,
    plugins:{
        
  dragData:{
    onDragStart: (event) =>{
      //console.log(myChartFoam.data.datasets[0].data)
    },
    onDrag: (event, datasetIndex, index, value) =>{
      console.log(event)
    },
    onDragEnd:(event,datasetIndex, index, value) =>{

    }
  }
    },
    parsing:{
        xAxisKey: 'x',
        yAxisKey: 'detail.value'
    },
scales:{
      x: { 
     labels: ['M01', 'M14', 'M16','M17', 'M18', 'M19', 'M20']
     },
     
  y: {
      beginAtZero: true,
            suggestedMin: 0,
            suggestedMax: 10000
      }
    }
  }
};


const myChartFoam = new Chart(
 document.getElementById('myChart'),
 configFoam
);
</script>

</body>
</html>

ChartJs Dragdata bars disappear

0 Answers