How To Customize Google Chart With Hyperlink In The Label?

I have different countries which I get with json and add to google charts. Each country has a link to a specific site. It works for me. But the name of the tooltip/label is a link.

Solution 1:

first, recommend not usingjsapi to load the library

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement, to...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

(the callback can be added to the load statement as well)

---

next, according to the data format for regions mode,

the second column should be a number (not a string / link)

but since the link is needed for the click handler, use a DataView to hide the column from the chart

^ this will fix the tooltip -- adding the name of the country instead of the link

the number column drives the shading of the country, according to the colorAxis

if no number is provided, as in the question, then colorAxis will have no effect

---

last, there are no standard options to control the country border

see following working snippet...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

functiondrawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Country','Link',],
    ['Canada','http://www.google.ca'],
    ['Russia','http://www.bbc.com'],
    ['Australia','http://www.nytimes.com'],
  ]);

  var view = new google.visualization.DataView(data);
  view.hideColumns([1]);

  var options = {
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: 'black',
    displayMode: 'regions',
    tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
    legend: 'none',
    height:300,
    width:400
  };

  var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
  google.visualization.events.addListener(chart, 'select', myClickHandler);
  chart.draw(view, options);

  functionmyClickHandler(){
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var link = data.getValue(selection[0].row, 1);
      window.open(link, '_blank');
    }
  }
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="visualization"></div>