antvis/g2-react

Name: g2-react

Owner: AntV team

Description: This repo is being deprecated, check another wrapping https://github.com/alibaba/BizCharts

Created: 2016-08-04 03:57:58.0

Updated: 2018-05-24 09:19:28.0

Pushed: 2017-11-20 03:59:59.0

Homepage:

Size: 3064

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

m install g2 --save
m install g2-react --save

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

Usage

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

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


t.render(
ie
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

t clone git@github.com:antvis/g2-react.git
m install
m run doc

License

g2-react is released under the MIT license.