'How do I add a new line to the tooltip text in a Google Geochart chart?

I'm using Google's GeoChart API to generate a map of the US. I want to highlight the states based on one value, but then display some extra information about each state in the tool tip that displays when you hover over a state. I'd like the finished tool tip to look like this:

Nevada
Relevance: 4 ( the data driving the state highlight )
Data
More Data

The map works great, and I can add any text I want to the tooltip using the PatternFormat() function, but it strips or ignores all the new line options I've tried:

var formatter = new google.visualization.PatternFormat('some data\nmore data');
formatter.format(data, [0], 1);

I've tried all of these new line options and none of them work: <br>, <br />, &#13;, &#10, &#x0A, &#x0D, \u000A, \u000D, \n, \r, \r\n, %0A, %0D

Any suggestions on things to try or what actually works? This seems possible in some of the other Google charts.

The rendered HTML looks like this

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        var data = google.visualization.arrayToDataTable([
            [ 'State', 'Relevance' ],
            [ 'Arizona', 2 ],
            [ 'California', 4 ],
            [ 'Colorado', 1 ],
            [ 'Florida', 1 ],
            [ 'Georgia', 1 ],
            [ 'Idaho', 1 ],
            [ 'Illinois', 1 ],
            [ 'Indiana', 1 ],
            [ 'Iowa', 1 ],
            [ 'Kansas', 1 ],
            [ 'Kentucky', 1 ],
            [ 'Louisiana', 1 ],
            [ 'Maryland', 2 ],
            [ 'Montana', 1 ],
            [ 'Nevada', 2 ],
            [ 'New Mexico', 2 ],
            [ 'North Carolina', 1 ],
            [ 'North Dakota', 1 ],
            [ 'Oklahoma', 1 ],
            [ 'Oregon', 1 ],
            [ 'Pennsylvania', 1 ],
            [ 'South Carolina', 1 ],
            [ 'Tennessee', 1 ],
            [ 'Texas', 1 ],
            [ 'Utah', 2 ],
            [ 'Washington', 1 ],
            [ 'Wyoming', 1 ]
        ]);

        data.addRows([
            ['Has Distributor', 1],
            ['Sells Direct', 1]
        ]);

        var formatter = new google.visualization.PatternFormat('data <br> <br /> &#13; &#10 &#x0A &#x0D \u000A \u000D \n \r \r\n %0A %0D more data');
        formatter.format(data, [0], 1);

        var options =
        {
            width:      286,
            region:     'US',
            resolution: 'provinces',
            colorAxis:  { colors: ['#abdfab', '#006600'] },
            legend:     'none'
        };

        var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
        chart.draw( data, options );

    };

</script>

<div id="chart_div" style="width: 286px; height: 180px;"></div>
javascripthtmlgoogle-visualization


Solution 1:[1]

For anyone coming across this question you can set in the chart options tooltip: {isHtml: true} from the docs

Solution 2:[2]

Take a look at using data table roles. In a nutshell, you add a new column with a role of tooltip, and then you can customize what appears however you'd like.

I've used this before successfully with line and column charts, but the chart gallery pages for line and column charts explicitly mention that they support roles, whereas the geo chart page does not. That may not mean that they aren't supported; it may just not be a documented feature.

Solution 3:[3]

Tested & working. Save the data as a multi-line CSV.

To do this, format multi-lines to have quotes.

IMPORTANT - you have to use \r for the real end-of-line characters, not \r or \r\n like normal.

e.g.

123,456,"this\n\is\nfour\nlines",678\r
234,567,"another\nmulti",789\r

All google things that use this data from now-on understand how to show it with multi-lines properly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martin Lyne
Solution 2 smjZPkYjps
Solution 3 Anon Coward

Related Questions