[Chartjs]-Chart.js bubble chart pointStyle not working

by

2👍

✅

Obviously, this is not going to work, as pointStyle is only applicable for line chart (which has points to hover over). Unfortunate enough, there isn’t any native options to achieve this either.

However, this cloud be achieved in some kind of a hackish way, which is, overriding the actual draw function of the bubble chart.

ᴏᴠᴇʀʀɪᴅᴇ ᴛʜᴇ ᴅʀᴀᴡ ꜰᴜɴᴄᴛɪᴏɴ ᴏꜰ ʙᴜʙʙʟᴇ ᴄʜᴀʀᴛ

Chart.controllers.bubble.prototype.draw = function() {
   let c = this.chart; // chart instance
   let datasets = c.data.datasets; // datasets array
   datasets.forEach(function(e, i) { // loop through the datasets array
      let isHidden = e._meta[0].hidden; // dataset's hidden property
      if (!isHidden) { // if dataset is not hidden
         let data = c.getDatasetMeta(i).data; // coords array of bubble
         data.forEach(function(e) { // loop through the coords array
            let ctx = c.chart.ctx; // canvas context
            let x = e._model.x; // x coord of bubble
            let y = e._model.y; // y coord of bubble
            let r = e._model.radius; // radius of bubble
            let bgColor = e._model.backgroundColor; // background color of bubble

            /** draw anything using general canvas methods **/
            // draw a triangle
            ctx.save();
            ctx.moveTo(x, y - r);
            ctx.lineTo(x + r, y + r);
            ctx.lineTo(x - r, y + r);
            ctx.closePath();
            ctx.fillStyle = bgColor;
            ctx.fill();
            ctx.restore();
         });
      }
   });
}

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

Chart.controllers.bubble.prototype.draw = function() {
   let c = this.chart; // chart instance
   let datasets = c.data.datasets; // datasets array
   datasets.forEach(function(e, i) { // loop through the datasets array
      let isHidden = e._meta[0].hidden; // dataset's hidden property
      if (!isHidden) { // if dataset is not hidden
         let data = c.getDatasetMeta(i).data; // coords array of bubble
         data.forEach(function(e) { // loop through the coords array
            let ctx = c.chart.ctx; // canvas context
            let x = e._model.x; // x coord of bubble
            let y = e._model.y; // y coord of bubble
            let r = e._model.radius; // radius of bubble
            let bgColor = e._model.backgroundColor; // background color of bubble

            /** draw anything using general canvas methods **/
            // draw a triangle
            ctx.save();
            ctx.moveTo(x, y - r);
            ctx.lineTo(x + r, y + r);
            ctx.lineTo(x - r, y + r);
            ctx.closePath();
            ctx.fillStyle = bgColor;
            ctx.fill();
            ctx.restore();
         });
      }
   });
}

var data = {
   datasets: [{
      label: 'Dataset 1',
      data: [
        { x: 6, y: 6, r: 10 },
        { x: 12, y: 12, r: 15 }
      ],
      backgroundColor: '#07C'
   }]
};
var options = {
	responsive: false,
   scales: {
      xAxes: [{ ticks: { min: 0, max: 20 } }],
      yAxes: [{ ticks: {  min: 0, max: 20 } }]
   },
   title: {
      display: true,
      text: 'Chart.js Bubble Chart'
   }
};

var canvas = document.getElementById('myChart');
var myBubbleChart = new Chart(canvas, {
   type: 'bubble',
   data: data,
   options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<canvas id="myChart" width="350" height="200"></canvas>

Leave a comment