Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Geo Chart

A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:

  • The region mode colors whole regions, such as countries, provinces, or states
  • The markers mode uses circles to designate regions that are scaled according to a value that you specify
  • The text mode labels the regions with identifiers (e.g., "India" or "Asia")

Note: The geochart is not scrollable or draggable, and it's a line drawing rather than a terrain map; if you want any of that, consider a map instead.

A geochart is rendered within the browser using SVG or VML.

Like all Google charts, geo charts display tooltips when the user hovers over the data.


Basic Geo Chart

The following example shows how to draw a basic geo chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the geochart package google.charts.load('current', {'packages':['geochart'], // Note: you will need to get a mapsApiKey for your project. 'mapsApiKey': 'AIzaSyD0M64gvEDiT0fNqJdB7bXEdlQuxqrQq8M' }); // Set a callback google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['Russia', 700], ['India', 1200] ]); // Set chart options var options = {}; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.GeoChart(document.getElementById('chart-div')); chart.draw(data, options); }


Region Geo Chart

The region style fills entire regions (typically countries) with colors corresponding to the values that you assign.

// Set chart options var options = { region: 'IN' };
Run code

Marker Geo Chart

The displayMode: markers renders circles at specified locations on the geochart.

Try hovering over the cluttered markers around Delhi, and a magnifying glass will open to show the markers in more detail.

// Set chart options var options = { region: 'IN', displayMode: 'markers', colorAxis: {colors: ['green', 'blue']} };
Run code

Text Geo Chart

You can overlay text labels onto a geochart with displayMode: text.

// Set chart options var options = { region: '034', // Southern Asia displayMode: 'text', colorAxis: {colors: ['#4374e0', '#e7711c']} // blue to orange };
Run code

Geo Chart with Customized Colors

There are several options for customizing the colors of GeoCharts:

  • colorAxis: the spectrum of colors to use for the regions in the datatable
  • backgroundColor: the background color for the chart
  • datalessRegionColor: the color to assign to regions with no associated data
  • defaultColor: the color to assign to regions in the datatable for which the value is either null or unspecified
// Set chart options var options = { region: '002', // Africa colorAxis: {colors: ['#00853f', 'black', '#e31b23']}, backgroundColor: '#81d4fa', datalessRegionColor: '#f8bbd0', defaultColor: '#f5f5f5' };
Run code