Drill down in Google Geo chart

Question

I have implemented google Geo Chart in my react application, Now on click of a particular region or country i want to drill down to that particular region in the view.

One thing that i can think of is to change the value of "region" parameter whenever a click event is fired.

I have tried the below code but it does not work for the part of setting the value of the region.

import React, { Component } from "react";
import { Chart } from "react-google-charts";

const data = [
  ["Region", "Health"],
  ["Canada", 400],
  ["United States", 700],
  ["United Kingdom", 400],
  ["Europe", 400],
  ["Vietnam", 500],
  ["Portugal", 300],
  ["Japan", 200],
  ["India", 100],
  ["Australia", 300]
];

class MapChart extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <Chart
          chartEvents={[
            {
              eventName: "select",
              callback: ({ chartWrapper }) => {
                const chart = chartWrapper.getChart();
                const selection = chart.getSelection();
                if (selection.length === 0) return;
                const region = data[selection[0].row + 1];
                console.log(selection);
                alert("Selected : " + region);
                if (region[0] == "India") {
                  let drilldownValue = "IN";
                }
              }
            }
          ]}
          chartType="GeoChart"
          width="100%"
          position="relative"
          data={data}
          options={{
            // region: "150", // somehow set my drilldownValue parameter here
            colorAxis: { colors: ["#00b857", "#ffba00", "#d80000"] },
            datalessRegionColor: "#FFFFFF",
            defaultColor: "#FFFFFF",
            legend: "none",
            enableRegionInteractivity: true
          }}
        />
      </div>
    );
  }
}

Answer 1

you'll need to set the region option during the select event,
then re-draw the chart.

eventName: "select",
callback: ({ chartWrapper }) => {
  const chart = chartWrapper.getChart();
  const selection = chart.getSelection();
  if (selection.length === 0) return;
  const region = data[selection[0].row + 1];
  console.log(selection);
  alert("Selected : " + region);
  if (region[0] == "India") {
    let drilldownValue = "IN";

    // set region option, draw chart
    chartWrapper.setOption('region', drilldownValue):
    chartWrapper.draw();
  }
}