krushnakantL
krushnakantL

Reputation: 31

Region is not getting selected in react-google-charts geo-chart

I am trying to highlight the selected region in basic geochart using react-google-charts.

Here's how I want to do it jsfiddle.

As you can see in above example when the region is clicked it keeps highlighted till next one is clicked. I have used the same example in my code and it is not working. It does not keep the region highlighted after click.

Here is my code sample,( same as the jsfiddle example )

import Chart from "react-google-charts";

const test = [
        ["Country", "Popularity"],
        ["Germany", 200],
        ["United States", 300],
        ["Brazil", 400],
        ["Canada", 500],
        ["France", 600],
        ["RU", 700],
        ["India", 900]
    ];


render(){
    return(
        <div>
           <Chart
             chartEvents={[
            {
                eventName: "select",
                callback: ({ chartWrapper }) => {
                const chart = chartWrapper.getChart();
                const selection = chart.getSelection();
                if (selection.length === 0) return;
                const region = test[selection[0].row + 1];
                console.log("Selected : " + region);
                },
            },
            ]}
            chartType="GeoChart"
            width="100%"
            height="400px"
            data={test}
          />
       </div>
    )  
}

I don't know where I am going wrong. I am using react with javascript. Any help will be appreciated.

Upvotes: 0

Views: 362

Answers (0)

Related Questions