[Chartjs]-ChartJs Bubble chart – on hover bubble becomes too big

by

6👍

✅

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

1👍

I have already faced the same issue also fixed it by typecasting for every x,y & z. I just convert it to float


 'x' => (float) $x_axis_value,
 'y' => (float) $y_axis_value,
 'r' => (float) $radious_value,

Leave a comment