Use Google Charts in ReactJS Project

Question

I am trying to use google charts in an ReactJS application. I do not want to use "react-google-chart. While i try to run it, in my console theres an error saying google is not defined. Here is my current code In my index.html

 <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <title>React App</title>
  </head>

And the component to use the chart map looks like this:

import React from 'react';

      google.charts.load('upcoming', {
        'packages': ['geochart']
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['State', 'Accent'],
          ['Baja California', 100],
          ['Sonora', '100'],
          ['Chihuahua', '100'],
          ['Coahuila', '100'],
          ['Nuevo León', '100'],
          ['Tamaulipas', '100'],
          ['Sinaloa', '100'],
          ['Nayarit', '100'],
          ['Durango', '100'],
          ['Zacatecas', '400'],
          ['Jalisco', '400'],
          ['Colima', '400'],
          ['Tlaxcala', '400'],
          ['Aguascalientes', '400'],
          ['Zacatecas', '400'],
          ['San Luis Potosí', '400'],
          ['Puebla', '400'],
          ['Guanajuato', '400'],
          ['Querétaro', '400'],
          ['Hidalgo', '400'],
          ['Morelos', '400'],
          ['Estado de México', 400],
          ['Distrito Federal', 400],
          ['Baja California Sur', '200'],
          ['Michoacán', '200'],
          ['Guerrero', '200'],
          ['Oaxaca', '200'],
          ['Veracruz', '200'],
          ['Tabasco', '200'],
          ['Campeche', '300'],
          ['Chiapas', '200'],
          ['Quintana Roo', '300'],
          ['Yucatán', '300']
        ]);

        var options = {
          region: 'MX', // Mexico
          resolution: 'provinces',
          colorAxis: {
            //      minValue=100,
            //     maxValue=400,
            values: [100, 200, 300, 400],
            colors: ['white', 'white', 'white', 'white']
          },
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#eeeeee',
          defaultColor: '#f5f5f5',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
        return(
          <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
          
        );
      };

My app should look like this https://jsfiddle.net/9fhL2nsv/

Answer 1

install:- 

npm install @babel/core @babel/preset-env
yarn add react-google-charts  # or npm i react-google-charts




code:-


import React from 'react';
import Chart from "react-google-charts";

export default function App() {
 return (
    <div className="App">
    
    <Chart
  width={'1600px'}
  height={'500px'}
  chartType="GeoChart"
  data={[                                                                
    ['Country', 'percentage'],
    ['Algeria', 24],
    ['Angola', 26],
    ['Benin', 52],
    ['Botswana', 24],
  ]}
  options={{
    region: '002',                                                         
    colorAxis: { colors: ['#778ba5',"#718aab" ,"#778ba5","#7c8ca0"] },      
    backgroundColor: 'white',                                              
    datalessRegionColor: '#F5F5F5',
    defaultColor: '#778ba5',
  }}

/>
    </div>
  );
}

Use Google Charts in ReactJS Project

Question

1 answers

solution1
0 2021-12-14 13:18:12

Use Google Charts in ReactJS Project

Question

1 answers

solution1 0 2021-12-14 13:18:12

solution1
0 2021-12-14 13:18:12