Skip to content
This repository has been archived by the owner on Nov 27, 2020. It is now read-only.

antvis/g2-react

Repository files navigation

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

NPM version npm download

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.