javascript - ChartJs Bubble chart - on hover bubble becomes too big - Stack Overflow

admin管理员组

文章数量:1401920

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.

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.

• javascript
• chart.js

Share Improve this question Follow edited Jun 1, 2018 at 2:38 Vikasdeep Singh 21.8k1616 gold badges8282 silver badges106106 bronze badges asked Jun 1, 2018 at 2:25 Nouman BhattiNouman Bhatti 1,44166 gold badges3131 silver badges5555 bronze badges 3

• Can you create working code snippet of your code using codepen/jsfiddle/plunker etc? it would be faster to debug – Vikasdeep Singh Commented Jun 1, 2018 at 2:26
• Check my updated answer. Found the problem in your code. – Vikasdeep Singh Commented Jun 1, 2018 at 2:50
• 1 you r right issue is with point_data where I'm converting values to string – Nouman Bhatti Commented Jun 1, 2018 at 3:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="ctx"></canvas>

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

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,
                   

本文标签： javascriptChartJs Bubble charton hover bubble becomes too bigStack Overflow