Custom Plots

3 min read

Custom chart development

G2Plot has built-in regular statistical charts that account for more than 90% of the business usage. However, customization is inevitable for business products. At this time, users will face a dilemma:

  • Use G2
  • Suggest G2Plot to add charts
  • Use other products or develope their own charts

As G2Plot developers, we also get into some problems:

  1. Is this chart universal? Are we following the business too much? Can it be built in directly?
  2. Can the chart developed based on G2, be opened to other users?

Based on these problems, we directly open the adapter mode of G2Plot based on G2 chart. You can package customized charts based on this G2 pattern. If you need to reuse, you can directly produce NPM packages and use them in the G2Plot mode. Take a simple example:

// entrance of importing custom chart
import { P } from '@antv/g2plot';
// import your own chart(QR code)
import { adaptor, defaultOptions } from 'g2plot-qrcode';

const plot = new P(
  'container',
  {
    data: 'Hello, G2Plot v2!', // content of QR code
  },
  adaptor,
  defaultOptions
);

plot.render();

In such an open and extended development mode, it can not only ensure the unification of business technology stack, but also ensure that the built-in charts of G2Plot are universal, and make full use of G2.

How to develop custom chart

This section describes how to develop a custom chart. Example:

The main process is divided into the following steps:

  1. Define chart default configuration
  2. Custom adaptor to realize the transformation from configuration to G2 API
  3. Use it on G2Plot, or publish NPM package

Customized third-party charts

Based on the open development capability of G2Plot, customized third-party charts make up for the limitation of G2Plot official general chart collection standard and quantity. Packages come from the community, so please choose carefully for production environment.

Project nameDemonstrationDescriptionVersion
G2Plot-QRCodeGoDraw a QRCode with G2Plot.npm
G2Plot-ColumnGoCustomize Column with G2Plot.npm
G2Plot-LollipopGoWelcome to G2Plot-Lollipop 👋npm
G2Plot-CalendarGoA component like GitHub-contribution-calendar with G2Plot 📅npm

Technology stack packages

Technology stack packages ( React、Vue、Angular ) come from the community, so please choose carefully for production environment.

Project nameTechnology stackDescriptionVersion
@ant-design/chartsReactA React Chart Library based on @antvis/G2Plot.npm
React-G2PlotReactUnofficial react component wrapper for @antvis/G2Plot.npm
PyG2PlotPythonPython3 binding for @AntV/G2Plotpypi
@opd/g2plot-reactReactG2Plot for React.npm
@opd/g2plot-vueVueG2Plot for Vue, both v2 and v3.npm
ngx-g2plotAngularG2Plot for Angular 11.npm