Criando gráficos com o React Google Charts
Tags: googlecharts, react, createreactapp
Published: 2020-01-30 23:57:39

---
title: Criando gráficos com o React Google Charts
published: true
description: Usando o React-Google-Charts para renderizar dados nos componentes do React
tags: Google Charts, React, Create React APP
---

Para quem não conhece, o Google Charts é uma ferramenta de gráficos poderosa, simples de usar e gratuita. Você pode escolher desde simples gráficos de dispersão a mapas

Criando um novo projeto usando create-react-app:

```
create-react-app react-google-charts
```

Vamos adicionar no projeto o Google Charts:

```
yarn add react-google-charts
```

Vamos abrir o arquivo src/App.js e remover os códigos que não vamos utilizar e fazer o import do Goolge Charts:

```
import React from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

```

Agora vamos criar 2 states para controlar as informações do gráfico: um vai ser para os options e o outro para o data:

```
import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = {}
  const [data, setData] = []
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

```

No options vamos adicionar o titulo e no data os valores do gráfico:

```
import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = {
    title: 'Gráfico de Pizza'
  }
  const [data, setData] = [
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ]
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

```

Para finalizar vamos adicionar o componente Chat e passar nosso state para ele:

```
import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = useState({
    title: 'Gráfico de Pizza'
  })
  const [data, setData] = useState([
    ['Linguagens', 'Quantidade'],
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div>
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="PieChart"
            data={data}
            options={options}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

```

Agora só falta visualizar o gráfico, rode o comando abaixo na pasta do projeto e acesse o projeto no seu navegador http://localhost:3000/:

```
yarn start
```

![Exemplo visual do gáfico](https://dev-to-uploads.s3.amazonaws.com/i/upuf616zu8n6o8b5vvib.png)

O Google Chats tem diversos gráficos para você utilizar e você pode adicionar mais de um gráfico na pagina, como por exemplo, o de barra

```
import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = useState({
    title: 'Gráfico de Pizza'
  });
  const [optionsBar, setOptionsBar] = useState({
    title: 'Gráfico de Barra'
  });
  const [data, setData] = useState([
    ['Linguagens', 'Quantidade'],
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ]);
  const [dataBar, setDataBar] = useState([
    ['Cidades', '2010 População', '2000 População'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000],
  ])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div style={{display: "flex"}}>
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="PieChart"
            data={data}
            options={options}
          />
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="BarChart"
            data={dataBar}
            options={optionsBar}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

```

Atualize seu navegador e veja o novo gráfico

Como eu disse no começo do texto ele é bem simples de utilizar e bem poderoso, acesse o link do [Google Chats](https://react-google-charts.com/) e veja na documentação todos os modelos de gráficos e suas configurações


Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no [Twitter](https://twitter.com/coisadedev).