ChartJs Bubble chart - on hover bubble becomes too big

Question

I created a bubble chart using ChartJs and populating data dynamically using Json.

See the code below.

for (var i = 0; i < response.data.length; i++) {
        var point_data = [];
        point_data.push({
            x: response.data[i]['return_tickets'].toString(),
            y: Math.round(response.data[i]['return_percentage']).toString(),
            r: Math.round((response.data[i]['return_percentage'])).toString()
        });
        data.push({ label: response.data[i]['staff_name'], data: point_data, backgroundColor: getRandomColor(), hoverRadius:4 });
    }

    new Chart(document.getElementById("bubbleChart"), {
        type: 'bubble',
        data: {
            datasets: data
        },
        options: {
            title: {
                display: true,
                text: ''
            }, scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: "Return Tickets %"
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: "Return Tickets"
                    }
                }]
            }
        }
    });

It generates the desired chart as below

The problem is when I hover over any bubble the size of the bubble increases exponentially.

How to keep the size same ?

I'm setting the hoverRadius property of the dataset but it does nothing for me.

Answer 1

Problem is with your this line of code:

{ label: response.data[i]['staff_name'], data: point_data, backgroundColor: getRandomColor(), hoverRadius:4 }

This is not a valid JSON. Values must be either strings or arrays. Most probably issue is at label: response.data[i]['staff_name'] or in point_data (I can see you are making x, y and r values .toString() that maybe not required). Check it again. Create a valid JSON and then try by setting hoverRadius: 0, it will work.

Setting hoverRadius: 0 working fine for me. Bubble size will not change on mouse over if you set hoverRadius: 0.

Below is working example:

var chart = new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: [{
      label: 'Bubble',
      data: [{
        x: 5,
        y: 55,
        r: 27.5
      }],
      backgroundColor: 'rgba(0, 119, 290, 0.6)',
      hoverRadius: 0
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(t, d) {
          return d.datasets[t.datasetIndex].label +
            ': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')';
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Checkout official documentation for more info : https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties