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
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 [email protected]:antvis/g2-react.git
$ npm install
$ npm run doc
License
g2-react is released under the MIT license.