CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationtooltip
Ivan
Ivan

Reputation: 2481

Google GeoCharts: how to remove header in custom HTML tooltip?

I have a Google GeoChart with custom HTML tooltip.
All is fine except that tooltip title won't go away

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    [ 
        {label: 'Country', type: 'string'},
        {label: 'Popularity', type: 'number'},
      {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}}
    ],
    ['Germany', 200, makeTooltip('Germany', 200)],
    ['United States', 300, makeTooltip('USA', 300)],
    ['Brazil', 400, makeTooltip('Brazil', 400)],
    ['Canada', 500, makeTooltip('Canada', 500)],
    ['France', 600, makeTooltip('France', 600)],
    ['RU', 700, makeTooltip('Russia', 700)]
  ]);

  var options = {
    legend: 'none',
    tooltip: {isHtml: true}
  };
  
  function makeTooltip(label, value){
    return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>';
  }

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

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

<div id="regions_div"></div>

The same configuration with a Bar Chart works perfectly

google.charts.load('current', {
  'packages': ['corechart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    [ 
        {label: 'Country', type: 'string'},
        {label: 'Popularity', type: 'number'},
      {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}}
    ],
    ['Germany', 200, makeTooltip('Germany', 200)],
    ['United States', 300, makeTooltip('USA', 300)],
    ['Brazil', 400, makeTooltip('Brazil', 400)],
    ['Canada', 500, makeTooltip('Canada', 500)],
    ['France', 600, makeTooltip('France', 600)],
    ['RU', 700, makeTooltip('Russia', 700)]
  ]);

  var options = {
    legend: 'none',
    tooltip: {isHtml: true}
  };
  
  function makeTooltip(label, value){
    return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>';
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('regions_div'));

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

<div id="regions_div"></div>

What am I missing? An answer to my similar problem suggest to add showTitle: false, but it does not work... Should I really deal with CSS to hide the title? Thanks

Upvotes: 2

Views: 182

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

it's an issue specific to GeoChart.

you can remove by using object notation on the first column.
provide the value, and a blank formatted value.

{v: 'Germany', f: ''}

see following working snippet...

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    [ 
        {label: 'Country', type: 'string'},
        {label: 'Popularity', type: 'number'},
      {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}}
    ],
    [{v: 'Germany', f: ''}, 200, makeTooltip('Germany', 200)],
    [{v: 'United States', f: ''}, 300, makeTooltip('USA', 300)],
    [{v: 'Brazil', f: ''}, 400, makeTooltip('Brazil', 400)],
    [{v: 'Canada', f: ''}, 500, makeTooltip('Canada', 500)],
    [{v: 'France', f: ''}, 600, makeTooltip('France', 600)],
    [{v: 'RU', f: ''}, 700, makeTooltip('Russia', 700)]
  ]);

  var options = {
    legend: 'none',
    tooltip: {isHtml: true, trigger: 'both'}
  };
  
  function makeTooltip(label, value){
    return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>';
  }

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

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

<div id="regions_div"></div>

Upvotes: 3

Related Questions