Google Geochart (1.1) tooltip styles

I’m using Google’s Geochart and following a bunch of the examples and options here: https://developers.google.com/chart/interactive/docs/gallery/geochart and generally it’s been successful, but I’m curious about two things:

  1. Is it possible to define the width, border etc of the tooltip.
  2. I’m trying to change the font-size within the tooltip but it doesn’t seem to be working.
  3. Can you change the hover state to a click state, or better yet, can you have it that if you click a country something happens? Takes you to a different page etc.

I am using version 1.1 as it allows for HTML in the tooltip, but I cannot find any documentation for this anywhere.

google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
        ['United Kingdom', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.'],
        ['United States', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.'],
        ['China', 2, 'Hello China'],
        ['Brazil', 2, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']
    ]);
    var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        legend: 'none',
        tooltip: {
            isHtml: true,
            textStyle: { 
                fontSize: 21 
            }
        },
        colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
    };
    var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
    chart.draw(data, options);
}

<div id="chart-canvas" style="height:500px;"></div>

For the sake of all our sanity, I have set up a jsFiddle http://jsfiddle.net/w5DYt/

Thanks, R

Answer

1) Google doesn’t support this, however you can manually overwrite it:

.google-visualization-tooltip{
    width:100px !important;
    border: 2px solid red !important;
} 

2) the isHtml: true overrides your textStyle configuration, you should wrap you text in a span with a class and then use css to set your desired textStyle

3) Google doesn’t support click handler, but has a selection one. You could do something like this:

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

function ready(){
    google.visualization.events.addListener(chart, 'select', handler);
    function handler(){
        var selection=chart.getSelection();
        if(selection.length==1){
            console.log(data.getValue(selection[0].row,2))
        }
    }        
}

google.visualization.events.addListener(chart, 'ready', ready);

chart.draw(data, options);

Full fiddle: http://jsfiddle.net/w5DYt/1/

Leave a Reply

Your email address will not be published. Required fields are marked *