GeoChart

Description

A geo chart shows data on a geographical map. You can specify either the entire world or a specific region.

You can use this to create a custom chart by providing your own data query (see DataChart for more info on queries) and, optionally, geo chart options for the chart.

Refer to the Charts Overview for a list of all charts available.

Usage

import { AnalyticsDashboard, GeoChart } from "react-analytics-charts";

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <GeoChart
        gapi={gapi}
        query={{
          metrics: "ga:sessions,ga:pageviews",
          dimensions: "ga:country",
          "start-date": `28daysAgo`,
          "end-date": "today",
          ids: viewId,
        }}
        container="traffic-geo-chart"
      />
    );
  }}
/>

Props

This component also supports all div props, such as className, style, and onClick.

If you have more than one of this chart on the page, be sure to specify a unique container ID.

Query

Refer to DataChart Query Prop to build your own data query.

Chart Options

There are numerous chart options available for geo charts, allowing you to customize the appearance. Provide these via the options prop.

Below are a few of the notable ones:

The containing element is rendered as a div and you can size and style it as you see fit using CSS.

Geo charts do not support titles. You'll have to add your own above the chart.

See all chart options.

Region Codes

The region prop can take a variety of values, allowing you to chart different parts of the globe. You can use world to show the whole world, or choose a code below:

• Use a region alias, or see the UN M49 Standard Country or Area Codes for Statistical Use for a list of region codes, such as 011 for Western Africa.
• See ISO 3166-1 alpha-2 code for a list of country codes such as AU for Australia.
• See ISO 3166-2:US for a list of codes for US States, such as US-AL for Alabama.

Region Aliases

Aliases are available for all UN M49 region codes. You can use an alias to make things a little more human readable.

Some codes are not supported by Google, but feel free to try them in case they've been added.

Europe Example

The following uses the europe alias for UN M49 code 150:

<AnalyticsDashboard
  authOptions={{ clientId }}
  dashId="europe"
  renderCharts={(gapi, viewId) => {
    return (
      <GeoChart
        gapi={gapi}
        query={{
          metrics: "ga:sessions,ga:pageviews",
          dimensions: "ga:country",
          "start-date": `28daysAgo`,
          "end-date": "today",
          ids: viewId,
        }}
        container="europe-traffic-geo-chart"
        options={{
          region: "europe",
          resolution: "countries",
        }}
      />
    );
  }}
/>

United States Example

The following uses the ga:region dimension, the US country code region, and the provinces resolution to show traffic from individual states in the United States:

<AnalyticsDashboard
  authOptions={{ clientId }}
  dashId="usa"
  renderCharts={(gapi, viewId) => {
    return (
      <GeoChart
        gapi={gapi}
        query={{
          metrics: "ga:sessions,ga:pageviews",
          dimensions: "ga:region",
          "start-date": `28daysAgo`,
          "end-date": "today",
          ids: viewId,
        }}
        container="usa-traffic-geo-chart"
        options={{
          region: "US",
          resolution: "provinces",
        }}
      />
    );
  }}
/>