[Chartjs]-Bubble Chart in Chartjs not working

by

2👍

✅

You are defining the data property incorrectly. It should be an object (consist of other properties) not an array.

So, you should use …

...
data: {
   datasets: [{
      label: 'Dataset 1',
      data: data
   }]
},
...

instead of …

...
data: data,
...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ctx = document.getElementById("myChart");
var data = [{
   x: 10,
   y: 10,
   r: 10
}];
// For a bubble chart
var myBubbleChart = new Chart(ctx, {
   type: 'bubble',
   data: {
      datasets: [{
         label: 'Dataset 1',
         data: data
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               min: -30,
               max: 30
            }
         }],
         xAxes: [{
            ticks: {
               beginAtZero: true,
               min: -30,
               max: 30
            }
         }],
      }
   }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div class="chart-container" style="height:400px; width:400px">
   <canvas id="myChart" width="40" height="40"></canvas>
</div>

2👍

The data object should be structured differently.

For instance…

 data: {
        datasets: [{
            label: ["Label"],
            data: [{x: 3, y:4, r:5}]
        }]
    },

Leave a comment