JSFiddle - React, Tailwind, and code Playground

by Rajan Paneru

HTML

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

CSS

ul.google-visualization-tooltip-item-list li:first-child span{
  color: red !important;
}

JavaScript

google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
var obj = {
name: "cody reinold",
age: 28,
gender: "male"
} 

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value',{'type': 'string', 'role': 'tooltip', 'p': {'html': true}}],
        ['Canada', 0, 'Hello world'],
      ['nepal', 35, 'Hello rajan'],
        ['US', 75, createCustomHTMLContent(obj)]]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 600,
        tooltip: {
          isHtml: true,
          trigger: 'selection'
        },
        // use => Light red, dark red
        colorAxis: {colors: ['green', 'green', 'orange', 'orange', 'yellow', 'yellow', 'red', 'red'],
        values: [0, 25, 26, 50,51, 75,76, 100],
        minValue: 0,
        maxValue: 100
        }
    });
}
function createCustomHTMLContent(obj){
return `
	<h1>Name: ${obj.name}</h1>
  <h4>Gender: ${obj.gender}</h4>
  <h4>Age: ${obj.age}</h4>
`;


}