All Projects → antvis → G2 React

antvis / G2 React

This repo is being deprecated, check Ant Design Charts https://github.com/ant-design/ant-design-charts

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to G2 React

Datagear
数据可视化分析平台,使用Java语言开发,采用浏览器/服务器架构,支持SQL、CSV、Excel、HTTP接口、JSON等多种数据源
Stars: ✭ 266 (-26.11%)
Mutual labels:  chart
Metatron Discovery
Powerful & Easy way for big data discovery
Stars: ✭ 297 (-17.5%)
Mutual labels:  chart
Tplink Energy Monitor
An energy monitoring dashboard for TP-Link smart plugs
Stars: ✭ 316 (-12.22%)
Mutual labels:  chart
Vue Schart
📊 Vue.js wrapper for sChart.js
Stars: ✭ 273 (-24.17%)
Mutual labels:  chart
Sparklinelayout
Simple and lightweight library for drawing sparklines / graphs. Support markers and gradients.
Stars: ✭ 291 (-19.17%)
Mutual labels:  chart
Plotlib
Data plotting library for Rust
Stars: ✭ 308 (-14.44%)
Mutual labels:  chart
Plottable
📊 A library of modular chart components built on D3
Stars: ✭ 2,834 (+687.22%)
Mutual labels:  chart
Reports kit
Beautiful, interactive charts and tables for Ruby on Rails
Stars: ✭ 349 (-3.06%)
Mutual labels:  chart
Rumble Charts
React components for building composable and flexible charts
Stars: ✭ 293 (-18.61%)
Mutual labels:  chart
Colormap Shaders
A collection of shaders to draw color maps.
Stars: ✭ 315 (-12.5%)
Mutual labels:  chart
D3 Funnel
A JavaScript library for rendering funnel charts using the D3.js framework.
Stars: ✭ 283 (-21.39%)
Mutual labels:  chart
Anychart
AnyChart is a lightweight and robust JavaScript charting solution with great API and documentation. The chart types and unique features are numerous, the library works easily with any development stack.
Stars: ✭ 288 (-20%)
Mutual labels:  chart
Klinechart
📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)
Stars: ✭ 303 (-15.83%)
Mutual labels:  chart
Helmfile
Helmfile is a declarative spec for deploying helm charts. It lets you...
Stars: ✭ 3,596 (+898.89%)
Mutual labels:  chart
React Jsx Highcharts
Highcharts built with proper React components
Stars: ✭ 336 (-6.67%)
Mutual labels:  chart
Fl chart
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.
Stars: ✭ 3,882 (+978.33%)
Mutual labels:  chart
Hxcharts
📊 Chart for iOS 仪表盘、柱状图、圆形图、折线图、环形图
Stars: ✭ 301 (-16.39%)
Mutual labels:  chart
Vue Tree Chart
A vue2 component to display tree chart
Stars: ✭ 351 (-2.5%)
Mutual labels:  chart
Aachartcore Kotlin
📈📊⛰⛰⛰An elegant modern declarative data visualization chart framework for Android . Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.极其精美而又强大的 Android 数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
Stars: ✭ 332 (-7.78%)
Mutual labels:  chart
Flutter Candlesticks
Elegant OHLC Candlestick and Trade Volume charts for @Flutter
Stars: ✭ 318 (-11.67%)
Mutual labels:  chart

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 [email protected]:antvis/g2-react.git
$ npm install
$ npm run doc

License

g2-react is released under the MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].