overlapping bubbles with the same size and color in scatter google visualization

Question

I'm drawing a google scatter(ScatterChart) plot and I have many bubbles with the same size , color , position which overlap. In google bubble chart , the overlapping bubbles automatically change color in order to notify user. But in scatter chart the top bubble's color is shown.

Note: I cant use bubble chart since I need customized tooltip.

Note: I cant use google scatter(Scatter) chart since I want to size the bubbles dynamically.

Any Idea how to solve this?

here is my code:

function drawChart() {

        var data = new google.visualization.DataTable();
            data.addColumn('number', 'Probabilità');
            data.addColumn('number', 'Impact Rate');
            data.addColumn({'type': 'string', 'role': 'style'} );
            data.addColumn({type:'string', role:'annotation'});
            data.addColumn({type: 'string', role: 'tooltip'});

            data.addRows([
            [3, 2, 'point {size: 10;fill-color:blue}', 'a','c'],[3,2,'point {size: 10;fill-color:blue}','b','d']
            ]);

        var options = {
            title: 'Rischio Finanziario',
            hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
            vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},

            height: 500,
            chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
            legend: {position: 'none'},
            colorAxis: {legend: {position: 'none'}},
            bubble: {textStyle: {fontSize: 11}},
            animation:{easing:'in'},
        };

        if (data.getNumberOfRows() > 0) {
            var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));

            chart.draw(data, options);
        } else {
            document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
        }
    }

This is a simplified version. In reality I get data dynamically with jinja with a for loop

Answer 1

With scatter chart, you can change size of point with style role.

you already have it defined correctly in the posted example.

point {size: 10; fill-color:blue}

if you want the points to be a different size,
just change the size attribute.

point {size: 20; fill-color:blue}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Probabilità');
  data.addColumn('number', 'Impact Rate');
  data.addColumn({'type': 'string', 'role': 'style'} );
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [3, 2, 'point {size: 20; fill-color: red}', 'a', 'c'],
    [3, 2, 'point {size: 10; fill-color: blue}', 'b', 'd']
  ]);

  var options = {
    title: 'Rischio Finanziario',
    hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
    vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
    height: 500,
    chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
    legend: {position: 'none'},
    colorAxis: {legend: {position: 'none'}},
    bubble: {textStyle: {fontSize: 11}},
    animation:{easing:'in'},
  };

  if (data.getNumberOfRows() > 0) {
    var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
    chart.draw(data, options);
  } else {
    document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="drawChart"></div>

---

if you want to deal with the overlapping annotations,
you can use multiple series' or data table columns,
then change the length of the annotation stem for each series.

series: {
  0: {
    annotations: {
      stem: {
        length: 26
      }
    }
  },
  1: {
    annotations: {
      stem: {
        length: 12
      }
    }
  }
},

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Probabilità');
  data.addColumn('number', 'Impact Rate');
  data.addColumn({'type': 'string', 'role': 'style'} );
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('number', 'Impact Rate');
  data.addColumn({'type': 'string', 'role': 'style'} );
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [3, 2, 'point {size: 20; fill-color: red}', 'a', 'c', null, null, null, null],
    [3, null, null, null, null, 2, 'point {size: 10; fill-color: blue}', 'b', 'd']
  ]);

  var options = {
    series: {
      0: {
        annotations: {
          stem: {
            length: 26
          }
        }
      },
      1: {
        annotations: {
          stem: {
            length: 12
          }
        }
      }
    },
    title: 'Rischio Finanziario',
    hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
    vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
    height: 500,
    chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
    legend: {position: 'none'},
    colorAxis: {legend: {position: 'none'}},
    bubble: {textStyle: {fontSize: 11}},
    animation:{easing:'in'},
  };

  if (data.getNumberOfRows() > 0) {
    var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
    chart.draw(data, options);
  } else {
    document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="drawChart"></div>