BizCharts is Alibaba’s G2-based React charting library, which has all the advantages of G2 and React, and has been applied in many complex business scenarios such as Alibaba Cloud, Tmall, Taobao, DingTalk, and Fliggy, meeting the business implementation of regular charts and highly customized charts in terms of flexibility, ease of use, and richness.
Peculiarity:
Based on G2, React
Integrate a large number of statistical tools
Powerful scalability
High customization capabilities
Quick Start:
1. Installation:
npm install bizcharts –save
2. Use:
Create a container
<div id=”mountNode”></div>
Use components to generate charts
Introduce the components needed for the chart
Assemble the components into the required diagrams
Render the graph to the mountNode node
import React from ‘react’; import ReactDOM from ‘react-dom’; import { Chart, Geom, Axis, Tooltip, Legend, Coord } from ‘bizcharts’; data source const data = [{ genre: ‘Sports’, sold: 275, income: 2300 },{ genre: ‘Strategy’, sold: 115, income: 667 },{ genre: ‘Action’, sold: 120, income: 982 },{ genre: ‘Shooter’, sold: 350, income: 5271 },{ genre: ‘Other’, sold: 150, income: 3710 }]; define the metric const cols = { sold: { alias: ‘sales’ }, genre: { alias: ‘game genre’ }}; Render Chart ReactDOM.render((<Chart width={600} height={400} data={data} scale={cols}><Axis name=”genre” /><Axis name=”sold” /><Legend position=”top” dy={-20} /><Tooltip /><Geom type=”interval” position=”genre*sold” color=”genre” /></Chart>), document.getElementById(‘mountNode’));
3. Generate charts
Other Styles:
- histogram
- Line chart
- bar chart
- Pie charts
- Dot plots
- Area chart
- Radar chart
- Box plot
- Candlestick chart
- Heatmap
dashboard
- Funnel charts
- Faceted diagrams
- Diagrams
- map
