# React Google Chart(gchart-react)

This is simple and reliable Implementation of Google Chart with React js.

## Live demo 

https://munna.github.io/React-Google-Chart/

## How it is structured

The source code has two separate parts – the library and the documentation (demo) page. Both are written in ES6 and JSX, and therefore have to be transpiled by Babel but in different ways.
## Installation

With your favorite package manager (yarn, pnpm or npm) :
```
yarn add gchart-react
# or
npm i -s gchart-react
```

## Quick Start
```
import React from "react";
import { render } from "react-dom";
import  GoogleChart  from "gchart-react";

export default class App extends React.Component {
  render() {
    return (
      <div className={"my-pretty-chart-container"}>
        <GoogleChart  chart="Pie" style={{height:"300px"}} data={[
  ['Task', 'Hours per Day'],
  ['Work',     11],
  ['Eat',      2],
  ['Commute',  2],
  ['Watch TV', 2],
  ['Sleep',    7]
]} options={{title:"Pie Chart"}}></GoogleChart>
      </div>
    );
  }
}
render(<App />, document.querySelector("#app"));
```
## Other Chart
```
<GoogleChart  chart="Pie" style={{height:"300px"}} data={pieData} options={{title:"Pie Chart"}}></GoogleChart>

 <GoogleChart  chart="Bar" style={{height:"300px"}} data={barData} options={{title:"Pie Chart"}}></GoogleChart>

<GoogleChart  chart="Bubble" style={{height:"300px"}} data={bubbleData} options={{title:"Pie Chart"}}></GoogleChart>

<GoogleChart  chart="Geo" style={{height:"300px"}} data={geoData} options={{title:"Pie Chart"}}></GoogleChart>
<GoogleChart chart="Geo" style={{height:"300px"}} data={geoData} options={{title:"Pie Chart"}}></GoogleChart>
```
## Getting started

Follow these steps to get started developing your own react component:

* `git clone https://github.com/munna/React-Google-Chart.git`
* `npm install`
* `npm run dev` to transpile both the lib and docs folder in watch mode and serve the docs page for you.
* Go to http://127.0.0.1:8000 to see the demo in action. Whenever you change the code in either src/lib or src/docs, the page will automatically update.

