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"
  />
);

Note that you can make a dynamic props wrap just like higherWrapper demo

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
configs	any		as arguments of createG2((chart, configs))

Development

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

License

g2-react is released under the MIT license.