Search code examples
chartsgoogle-visualizationtooltip

Tooltip doesn't work in Google Scatter Chart

I'm trying to create a scatter plot using Google charts and I don't seem to be able to add a column to be a tooltip. I read various sources that state that the data definition should be as:

        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Year');        
        data.addColumn('number', 'Sales');
        // A column for custom tooltip content
        data.addColumn({type: 'string',role: 'tooltip',});

       data.addRows([
          ['Name1', 1000, 'Tooltip string'],
          ['Name2', 1170, 'Tooltip string'],
          ['Name3', 660, 'Tooltip string'],
        ]);

However, it doesn't work.

enter image description here

JSFiddle to demonstrate the issue: https://jsfiddle.net/shakedk/c37L0d1n/

Solution

  • column roles are not supported by material charts,
    along with several other options.

    see --> Tracking Issue for Material Chart Feature Parity

    for custom tooltips, you will need to use a classic chart.

    material = google.charts.Scatter -- package: 'scatter'

    classic = google.visualization.ScatterChart -- package: 'corechart'

    see following working snippet... 

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

function drawChart() {

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  // A column for custom tooltip content
  data.addColumn({
    type: 'string',
    role: 'tooltip',
  });

  data.addRows([
    ['Name1', 1000, 'Tooltip string'],
    ['Name2', 1170, 'Tooltip string'],
    ['Name3', 660, 'Tooltip string'],
  ]);

  var options = {
    width: 800,
    height: 500,
    chart: {
      title: 'Example',
    },
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));

  chart.draw(data, options);
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="scatterchart_material"></div>