All Projects → open-data-plan → g2plot-react

open-data-plan / g2plot-react

Licence: MIT License
G2Plot for React

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to g2plot-react

React-G2Plot
🤖 Unofficial react component wrapper for @antvis/G2Plot
Stars: ✭ 21 (-68.66%)
Mutual labels:  g2, g2plot
vis-dashboard
🎨 Awesome dashboards, built with G2 and G2Plot.
Stars: ✭ 36 (-46.27%)
Mutual labels:  g2, g2plot
G2plot
🍡 An interactive and responsive charting library
Stars: ✭ 2,072 (+2992.54%)
Mutual labels:  g2, g2plot
g2plot-vue
g2plot for vue, both 2 and 3
Stars: ✭ 106 (+58.21%)
Mutual labels:  g2, g2plot
theme-set
💄 Customize theme for G2, G2Plot of AntV(孵化中)
Stars: ✭ 35 (-47.76%)
Mutual labels:  g2, g2plot
rc-charts
一个基于BizCharts的图表库
Stars: ✭ 22 (-67.16%)
Mutual labels:  chart, g2
chart-type-icon
An icon library that covers the vast majority of chart types
Stars: ✭ 33 (-50.75%)
Mutual labels:  chart
a2d3
Flexible and extensible D3 directives for Angular 2
Stars: ✭ 22 (-67.16%)
Mutual labels:  chart
helm-charts
Helm Charts
Stars: ✭ 24 (-64.18%)
Mutual labels:  chart
ZingChart-Demos
A collection of tutorials and demos for using ZingChart. Clone, fork, and get started with the best Javascript charting library.
Stars: ✭ 18 (-73.13%)
Mutual labels:  chart
aks-terraform-helm
Showcase for Azure, AKS, Terraform, Helm and Let's Encrypt
Stars: ✭ 23 (-65.67%)
Mutual labels:  chart
treemap-chart
A treemap interactive chart web component for visualizing hierarchical data
Stars: ✭ 27 (-59.7%)
Mutual labels:  chart
open money tracker
Open Source accounting application for Android.
Stars: ✭ 19 (-71.64%)
Mutual labels:  chart
react-d3-axis
React-based Axis component for D3
Stars: ✭ 26 (-61.19%)
Mutual labels:  chart
Social-Media-Monitor
Automatically monitor and log fan counters from social media(Facebook Pages, Twitter, Instagram, YouTube, Google+, OneSignal, Alexa) using APIs to Google Spreadsheet. Very useful for website admins and social media managers.
Stars: ✭ 36 (-46.27%)
Mutual labels:  chart
DepthChart
深度图
Stars: ✭ 28 (-58.21%)
Mutual labels:  chart
FancyCandles
An open source candlestick chart control for WPF.
Stars: ✭ 60 (-10.45%)
Mutual labels:  chart
chart.xkcd-vue
A xkcd styled chart component for Vue.js based on chart.xkcd.
Stars: ✭ 34 (-49.25%)
Mutual labels:  chart
c3-rails
c3 for Rails
Stars: ✭ 15 (-77.61%)
Mutual labels:  chart
termgraph
terminal candle stick graph library
Stars: ✭ 62 (-7.46%)
Mutual labels:  chart

@opd/g2plot-react

G2Plot for React

Build Status build npm npm npm codecov

Install

npm install @opd/g2plot-react

Usage

import React, { useRef } from 'react'
import { LineChart, LineChartProps } from '@opd/g2plot-react'

const config: LineChartProps = {
  height: 350,
  autoFit: true,
  xField: 'year',
  yField: 'value',
  smooth: true,
  meta: {
    value: {
      max: 15,
    },
  },
  data: [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 11 },
  ],
}

export default () => {
  const chartRef = useRef()
  return <LineChart {...config} chartRef={chartRef} />
}

Edit g2plot-react-example

API

All config defined in G2Plot document can be used as props

Develop

npm install
npm run build
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].