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
$ 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
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
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)) |
$ git clone git@github.com:antvis/g2-react.git $ npm install $ npm run doc
g2-react is released under the MIT license.