Growing Strong : Charting library G2Plot 1.0

yyyyouko
AntV
Published in
4 min readMar 18, 2020

G2Plot is an interactive and responsive charting library. Based on the grammar of graphics, superior statistical charts can be made through a few lines of code.

G2Plot was born to empower BI systems and front-end developers of Alibaba Group to create high-quality statistic charts fast and easily, and to guarantee the readability of charts in tiny display area and complicate data situation.

Through about half year’s development, the types of charts have grown from 7 in 0.x version to 40. Verified in the core BI product of Ant Financial, G2Plot 1.0 was finally released. We hope that our development and design experience in data visualization, especially in BI products, could help more users to make elegant statistical charts easily.

Preview

Easy to use

To most of developers and designers, learning professional data visualization knowledge, such as coordinate transforming, data mapping and graphic attributes, is time consuming and difficult. G2Plot encapsulates complicated data visualization concepts and techniques into configurative and descriptive APIs which are familiar to front-end developers. To generate a chart, all you need is to declare a chart type and to specify data and configurations.

Professional in every tiny scope

G2Plot interprets every chart as a specified scene in data visualization scope. The visual and technical details were carefully polished according to its usage scenarios, display space and data features.

Graphics

Based on the unlimited possibilities of the Grammar of Graphics, G2Plot provides varieties of graphic extension.

G2Plot optimizes graphics for particular scenarios such as large data volumes and minimal display space through data pruning and points simplification algorithm.

Interaction

In G2Plot, the complex interactions commonly used in statistical analysis, such as drilling down, data filtering, state linking, can be used through an out-of-the-box way. At the same time, G2Plot also provides complete event mechanism, including the events of canvas, graphics, chart components, to meet the users’ personalized customization needs.

state linking
drill down
data filter

Animation

The animation effects of G2Plot are designed according to the characteristics and usage scenario of each chart to make the charts more charming and vivid. Users can freely control the entry, disappearance and update animation by specifying the animation type, duration and easing function.

Components

Responsive Chart Components: Incorrect overlapping and clipping of chart’s visual elements are common problems in practical applications of data visualization. Enlightened by Inclusive Design concept, the graphic and text elements can be rarefied, abbreviated and adjusted automatically when the information density is too high, thereby ensuring the main parts of chart to be displayed correctly and clearly.

Build-in advanced components: we have encapsulated the components frequently used in statistical analysis on the basis of the features of each chart and have built them into G2Plot.

Stacked Column: Connecting-Area
Density Heatmap: interactive anchor legend

The comparison between G2Plot and several commonly used chart libraries is shown as follows:

Good by default and flexible configurations

Powered by the AntV Design Principle, the build-in default options of G2Plot charts ensure that each chart is standard and elegantly presented. On the other hand, the details of charts, such as visual style, components and events, can be customized according to user’s requirements.

Last but not least

Thank you very much for reading this article patiently. If you are interested in G2Plot, please follow us through the following channels:

--

--