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

Question

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 /> , 
 , &#10 , &#x0A , &#x0D , , , \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>

Answer 1

对于遇到此问题的任何人，您都可以在文档中的图表选项tooltip: {isHtml: true}

Answer 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.

Answer 3

From all my research and testing I am almost positive that it is currently impossible to add a new line to the tooltip text inside a GeoChart . See this question for the solution I eventually came up with. This did not solve the new line problem, but reformatted the tooltip in a way that worked for my application and may help others.

Answer 4

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.

eg

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.