Chart.js bubble chart pointStyle not working

Question

I am working with chart.js bubble chart. I am trying to change the pointStyle from circle to something else. I have tried everything based on the documentation and still can't get it to work. Can someone help understand what I did wrong?

Chart.defaults.global.elements.point.pointStyle = 'star';
Chart.defaults.global.elements.point.backgroundColor = 'rgba(255,255,255,1)';

Chart.defaults.global.elements.point.radius = 20;

var data = {
datasets:[{
        pointStyle:      'triangle',
        //pointRadius:     8,
//          data:[ 27, 33, 49 ],
        data:[{ x:0, y: 0}]
    }]
};
var options = {
                responsive: true,
                title:{
                    display:true,
                    text:'Chart.js Bubble Chart'
                },
                tooltips: {
                    mode: 'point'
                }
            };
var canvas = document.getElementById('myChart');

var myBubbleChart = new Chart(canvas,{
type: 'bubble',
data: data,
options: options
});0

I can make the change for line chart but it seems impossible to get bubble chart to change pointStyle.

https://jsfiddle.net/charleschiu/h31vfgnq/

Thanks

Answer 1

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>