CODEWITHSUNDEEP
reactjschartsgoogle-visualizationregion
Dante_97
Dante_97

Reputation: 73

Canadian provinces not being marked in geochart of react google charts

I'm trying to display provinces of Canada through geochart in react google charts. But the provinces doesn't get highlighted even though the abv corresponding to the province is correct. But the values for "population%" gets displayed in the chart( bar in the bottom of the chart)

Below is my code.

 <Chart
        width={"100%"}
        height={"100%"}
        chartType="GeoChart"
        data={[
          ["abv", "population%"],
          ["AB", 2],
          ["NS", 3]
        ]}
        mapsApiKey={GOOGLE_API_KEY}
        //rootProps={{ "data-testid": "1" }}
        options={{
          region: "CA",
          resolution: "provinces"
        }}
      />

But when i try the same code by providing "US" for region and US provinces as data it works perfectly fine!

Is there something that I'm missing here. Can't figure out what I've done wrong.

Thanks

Upvotes: 1

Views: 860

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

option --> resolution: "provinces" -- causes the provinces to be outlined
and should work fine with canada --> region: "CA"

in order to highlight a province,
prefix the abv with --> "CA-" -- as in --> "CA-AB"

see following working snippet... 

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ["abv", "population%"],
    ["CA-AB", 2],
    ["CA-NS", 3]
  ]);

  var options = {
    region: "CA",
    resolution: "provinces",
    colors: ['blue', 'green']
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>

Upvotes: 1

Related Questions