What’s New in G2 5.0? A Deep Dive into the Next‑Gen Frontend Visualization Library

G2 5.0, the latest open‑source visualization library from AntV, introduces a progressive visual grammar, richer chart types, enhanced data analysis, animation, annotation, color expressiveness, modular architecture, server‑side rendering, and a new Spec API, while outlining future work and upgrade guidance for developers.

Alipay Experience Technology
Alipay Experience Technology
Alipay Experience Technology
What’s New in G2 5.0? A Deep Dive into the Next‑Gen Frontend Visualization Library
G2 (pronounced “gee‑two”) is AntV’s open‑source visualization chart library, and today the team announces the official release of G2 5.0 “Spring”.

The major update brings a more concise and professional visual grammar, richer chart types and features, and a brand‑new API and architecture that improve flexibility, ease of use, and long‑term stability.

Progressive Visual Grammar

G2 aims to let users create a chart with a single sentence, following the core theory of the Grammar of Graphics and avoiding rigid chart taxonomy. Inspired by React and Vue, G2 treats marks as first‑class citizens, offering a progressive grammar that can be adopted step‑by‑step while keeping complexity low.

Richer Chart Types

Version 5.0 adds parallel coordinates, mosaic charts, differential area charts, and native support for dashboards, liquid fill, and Venn diagrams. It also begins to support relational and geographic data visualizations (more advanced cases are handled by G6 and L7).

New Data Analysis Capabilities

For small‑scale, specific scenarios, G2 introduces a transform API inspired by Observable Plot, enabling grouping, binning, outlier detection, and other analyses via a concise API. A view‑tree model, borrowing ideas from Vega‑Lite and Atom, lets users build reports that combine multiple datasets on a single page.

New Animation Capabilities

G2 5.0 adds declarative animation syntax, including encoded animation attributes and grouped timeline animations, based on research from Shandong University and CSS Animation specifications.

Improved Annotation

Annotations are now unified with geometry as marks, gaining batch rendering, data transforms, animation, and tooltip support, and each graphic element can have multiple data labels.

Enhanced Data Display

Axes and legends now support adaptive multi‑axis layouts, more legend arrangements, and HTML customization. The built‑in d3‑format simplifies tick label formatting.

Stronger Color Expressiveness

Continuous color channels are enhanced with Threshold, Quantile, and Quantize scales, plus discrete palettes and interpolators from d3‑scale‑chromatic, and line charts support gradient color encoding.

Personalized Styles

Powered by the @antv/g rendering engine, all charts support hand‑drawn styles, textures, and improved corner rounding for bar and pie charts.

Experimental Spec API

In addition to the existing chainable Chart API, G2 5.0 introduces a Spec API that declares charts via JavaScript objects, lowering the learning curve and easing ecosystem extensions. The Spec API is currently available for feedback and will be officially released in 5.1.0.

On‑Demand Loading

The core Chart API remains, but the implementation is now modular, built from a runtime and standard library, improving maintainability and enabling future tree‑shaking and bundle size reductions.

Server‑Side Rendering

G2 5.0 supports SSR using node‑canvas, JSDOM, and headless‑gl, allowing chart generation in Node.js for emails, reports, and other server‑side scenarios.

Phased Release

The framework is ready for production, though some sub‑modules (Mark and Shape) will continue to be refined and the bundle size will be reduced in future releases.

Next Steps

Refine internal interfaces and expose module customization.

Enhance visual themes and provide theme building tools.

Design new interaction specifications and syntax.

Complete Spec API documentation, examples, and tooling.

Improve performance and stability.

Expand tutorials and articles.

The team will maintain the v4 line with bug‑fix patches until the end of 2023, after which no new features will be added.

Upgrade Guidance

Upgrading to 5.0 may involve effort, but most visualization concepts remain consistent and an upgrade guide highlights differences. Weekly updates will follow the release, and the community is invited to report issues via GitHub, discussions, or DingTalk.

Conclusion

G2 5.0 is more than a charting tool; it aims to foster correct visual thinking, enabling users to gain visual insight from data. The team will continue polishing the library and welcomes community contributions.

api-designServer-side RenderingchartingFrontend Library
Alipay Experience Technology
Written by

Alipay Experience Technology

Exploring ultimate user experience and best engineering practices

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.