How to call a click event on react geo chart?

Question

I have basic geo chart from react geocharts

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    getSelection={(e) => console.log('test')}
    select={console.log('test')}
    enableRegionInteractivity={true}
    regionClick={(e) => console.log('test')}
    onClick={(e) => console.log('test')}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

but I can't work out what I need to do to call an event when a user click on a country? I've tried to log stuff from all the methods above but nothing is working

also as a side note, it only seems to show the country on hover when that country has been passed into my map. is it possible to turn it on for all countries?

Answer 1

Define an array of chartEvents. In your case use select as eventName. Use chartEvents prop and supply the chartEvents array to it.

The callback receives the selected array using which you can figure out the index of your chart data array. Upon country selection, simply use your orignial whole data and find the selected country.

Use ready event and make an api call and fetch all countries and put them in a state and use it as data to chart. This way, you can dynamically have all countries are populated in the chart

Working demo with sample data - codesandbox

const options = {
  title: "Population of Largest U.S. Cities",
  chartArea: { width: "30%" },
  hAxis: {
    title: "Total Population",
    minValue: 0
  },
  vAxis: {
    title: "City"
  }
};

export default function App() {
  const [allCountries, setAllCountries] = useState([["Country"]]);
  const chartEvents = [
    {
      eventName: "select",
      callback({ chartWrapper }) {
        const selectedId = chartWrapper.getChart().getSelection();
        if (selectedId.length) {
          // console.log("Selected Country", data[selectedId[0].row + 1]);
          console.log("Selected Country", allCountries[selectedId[0].row + 1]);
        } else {
          console.log("No Country to show ");
        }
      }
    },
    {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
        fetch("https://restcountries.eu/rest/v2/all").then(res =>
          res.json().then(res => {
            const allCountries = res.map(c => [c.name]);
            console.log("allCountries", allCountries);
            setAllCountries(prev => [...prev, ...allCountries]);
          })
        );
      }
    }
  ];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Chart
        // width={calculateMapHeight()}
        height={"575px"}
        width={"575px"}
        chartType="GeoChart"
        // data={user.details}
        chartEvents={chartEvents}
        // data={data}
        data={allCountries}
        getSelection={e => console.log("test")}
        // select={() => console.log("test")}
        enableRegionInteractivity={true}
        regionClick={e => console.log("test")}
        onClick={e => console.log("test")}
        mapsApiKey="apikey"
        rootProps={{ "data-testid": "1" }}
        options={{
          backgroundColor: "transparent",
          defaultColor: "red",
          animation: {
            startup: true,
            duration: 2500
          }
        }}
      />
    </div>
  );
}

Answer 2

There is an example of handling select event.

With your code:

const chartEvents = [
  {
    eventName: "select",
    callback({ chartWrapper }) {
      console.log("Selected ", chartWrapper.getChart().getSelection());
    }
  }
];

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    chartEvents={chartEvents}
    enableRegionInteractivity={true}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

NOTE: if you use some old version < 3.0 then chartEvents prop isn't available, instead you can use events prop.