English | 简体中文
G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, you can describe the visual appearance and interactive behavior of a visualization just by one statement, and generate web-based views using Canvas or SVG.
📺 Live Demos
- 💯Stable grammar of graphics: enable to draw all kinds of charts by mapping data to graphics.
- 🤩New grammar of interaction: interaction behaviors combined with Trigger and Action mechanisms are used to exploring data.
- 🦍Advanced View module: with the ability to develop customized multi-dimension data analysis graphics.
- 👬Dual-engine rendering: with the ability to switch Canvas and SVG freely.
- 💄Visual components: interaction-oriented, elegant experience.
- 🛡Fully embrace Typescript: Complete type definition files are provided.
$ npm install @antv/g2
🔨 Getting Started
Before drawing we need to prepare a DOM container for G2:
;;// Step 1: Create a Chart instance.;// Step 2: Load the data.chart.datadata;// Step 3: Declare the grammar of graphics, draw column chart.chart.interval.position'genre*sold';// Step 4: Render chart.chart.render;
# Install dependencies$ npm install# Run test cases$ npm run test# Open electron to run test cases and listen to file changes$ npm run test-live# Run CI$ npm run ci# Run website$ npm start
🤝 How to Contribute
Please let us know how can we help. Do check out issues for bug reports or suggestions first.
To become a contributor, please follow our contributing guide.