JSFiddle - React, Tailwind, and code Playground

geoChart with HTML toolTip(more columns) Trick

by Karmik Patel

HTML

<script src="//www.google.com/jsapi"></script>
<div id="visualization"></div>

JavaScript

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

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['State', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Illinois', 30,'List of Illinois Items'],
        ['US-KS', 0,'List of Kensas Items'],
        ['New York', 5, 'Hello world'],
        ['US-WY', 20, '<img width=50 src="https://www.google.com/images/srpr/logo6w.png"/>']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    var options = {
          region: 'US', 
          displayMode: 'regions',
          resolution: 'provinces', // 'metro'
         // legend: 'none',
          animation: {
            easing: 'inAndOut',
            startup: true,
            duration: 2500,
          },
          //these are obtained from google's africa chart example
          colorAxis: {colors: ['yellow','orange' ,'red']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
          tooltip: {
            isHtml: true
        	}
        };
    
    chart.draw(data, options);
}