JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="legend" id="legend_div"></div>
<div class="chart" id="chart_div"></div>

<script id="template-legend-marker" type="text/html">
  <div class="legend-marker">
    <span class="legend-marker-color" style="background-color: {{color}}">&nbsp;</span>
    <span>{{label}}</span>
  </div>
</script>

CSS

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

.legend {
  bottom: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1000;
}

.legend-marker {
  display: inline-block;
  padding: 6px 6px 6px 6px;
}

.legend-marker-color {
  border-radius: 25%;
  display: inline-block;
  height: 16px;
  width: 16px;
}

JavaScript

google.charts.load('current', {
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
        ['Province','Population','third'],
        ['Montana',700,88],
        ['Washington',699,65],
        ['Oregon',300,66]
  ]);

  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var countryValue = data.getValue(i, 1);
    data.setValue(i, 1, i);
    data.setFormattedValue(i, 1, countryValue + '%');
  }

  var options = {
   region: 'US',
    resolution: 'provinces',
    colorAxis: {
      colors: ['red', 'green', 'orange', 'blue', 'yellow'],
      values: [0, 1, 2, 3, 4]
    },
    legend: 'none'
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var legend = document.getElementById('legend_div');
    legend.innerHTML = '';

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      addLegendMarker({
        color: options.colorAxis.colors[i],
        label: data.getValue(i, 0) + ' ' + data.getFormattedValue(i, 1)
      });
    }

    function addLegendMarker(markerProps) {
      var legendMarker = document.getElementById('template-legend-marker').innerHTML;
      for (var handle in markerProps) {
        if (markerProps.hasOwnProperty(handle)) {
          legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
        }
      }
      legend.insertAdjacentHTML('beforeEnd', legendMarker);
    }
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});