G2
A JavaScript library for building charts from data using a declarative, layered grammar.
- Stars
- 12.7k
- Forks
- 1.7k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 9 days ago
- Type
- Library
What it is
G2 is a TypeScript library for drawing charts and other data visualizations in web pages. You describe the data and how its fields map to visual properties like position and color, and G2 works out the rest. It can render with Canvas, SVG or WebGL, and supports animation and interaction. It is aimed at dashboards, data exploration and storytelling.
- Build a bar chart of sales by genre from a small data array, as shown in the README example
- Create a dashboard with multiple linked charts
- Add interactive behaviors such as hovering or selecting to a plot
- Extend the library with custom scales, transforms or marks
Great for
- Front-end developers adding charts to a web dashboard
- Data analysts comfortable writing a little JavaScript
- Teams that want to customize chart behavior beyond preset chart types
- Projects that need interactive or animated charts
Not ideal for
- People who want a chart with no coding, since G2 is a code library and needs a web page to run in
- Users who only need a few standard charts and prefer a ready-made tool, because the setup is more involved than a template
- Projects that cannot use JavaScript or TypeScript
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm or Yarn
Install with npm
npm install @antv/g2Install with Yarn
yarn add @antv/g2 - 2
Run it
- Install the package with npm or Yarn
- Add a div with an id to your HTML page as a container
- Import Chart from @antv/g2 and create a new Chart pointing at the container
- Call chart.options with a type, data and encode mapping, then call chart.render()
- 3
Get the most out of it
- Browse the Examples gallery and copy demos as a starting point
- Work through the Tutorials to learn core concepts such as marks, scales and coordinates
- Use the React wrapper g2-react if you build with React
- Check g2-extensions for official add-ons such as 3D and automated visual analytics
- Consult the API Reference for full component documentation
Downloads
Strengths
- The README shows a short example that produces a working bar chart
- Supports Canvas, SVG and WebGL rendering
- Released under the MIT license with official documentation, examples and tutorials
Trade-offs
- Its grammar-based API has a learning curve compared with simple chart presets
- The README does not detail every browser or version requirement
- Larger ecosystem extensions such as 3D are separate projects
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| G2 (this) | 12.7k | Library | intermediate | 9 days ago | Front-end developers adding charts to a web dashboard |
| Chart.js | 67.8k | Library | intermediate | 14 days ago | Web developers adding standard charts such as line or bar charts to a site |
| visx | 21.1k | Library | intermediate | 5 months ago | React developers who want full control over how a chart looks and behaves |
| three.js | 117k | Library | intermediate | 4 days ago | Web developers adding interactive 3D graphics to a website |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| rough | 21.3k | Library | intermediate | 2.3 years ago | Web developers who want a casual, hand-drawn look for diagrams or illustrations |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.