g2-react

Factory wrapper for using G2 easier in a React Component with dynamic data and size props

Note that g2-react is just a wrapper, if you want to make a better chart, docs of G2 is HERE

Example

• online example

• local example

Install

$ npm install g2 --save
$ npm install g2-react --save

g2-react works with a peerDependencies of g2, you can specify the version of g2 in your package.json

Usage

import createG2 from 'g2-react';
import { Stat } from 'g2';

const Pie = createG2(chart => {
  chart.coord('theta');
  chart.intervalStack().position(Stat.summary.proportion()).color('cut');
  chart.render();
});

React.render(
  <Pie
    data={this.state.data}
    width={this.state.width}
    height={this.state.height}
    plotCfg={this.state.plotCfg}
    ref="myChart"
  />
);

Props

See detail api of g2

name	type	default	description
width	number.isRequired		width of chart
height	number.isRequired		height of chart
plotCfg	object		config of chart, margin, border, backgroud...
data	arrayOf(object).isRequired		data source
forceFit	bool	false	if the width of chart autoFit with parent

Development

$ git clone git@github.com:antvis/g2-react.git
$ npm install
$ npm run doc

License

g2-react is released under the MIT license.