renderer

View MarkdownEdit this page

G2 is built on top of AntV G for rendering, so it inherits G’s rendering capabilities. Currently, it supports three major Web standards: Canvas, SVG, and WebGL, with Canvas renderer being the built-in default renderer for G2. For more renderers, see G documentation.

Getting Started

import { Chart } from '@antv/g2';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Renderer as SVGRenderer } from '@antv/g-svg';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';

const chart = new Chart({
  container: 'container',
  // Or choose WebGLRenderer, defaults to CanvasRenderer if not specified.
  renderer: new SVGRenderer(),
});

Of course, before using them, you need to install them first using npm, yarn, or other package managers. For the overall package size of G2, only the Canvas renderer is built-in. For specific examples, refer to Renderer.

Options

All G renderers are used with:

new Renderer({ /_ options _/ });

Let’s introduce the configuration options for creating each of the three renderers.

Canvas Renderer

Property	Description	Type	Default
enableDirtyRectangleRendering	Whether to enable “dirty rectangle” rendering	`boolean`	`true`
enableDirtyRectangleRenderingDebug	Whether to enable “dirty rectangle” rendering debug mode	`boolean`	`false`

SVG Renderer

Property	Description	Type	Default
outputSVGElementId	Whether to add id attribute when generating SVGElement	`boolean`	`true`

WebGL Renderer

Property	Description	Type	Default
targets	Select rendering environment and auto-downgrade in order	`string[]`	`['webgl2', 'webgl1']`

UMD Usage

When you need to replace the built-in Canvas renderer, for example, switching to SVG, you need to include a specific version of the G2 UMD file.

Online Example

First, include the UMD versions of @antv/g and @antv/g-svg:

<script src="https://unpkg.com/@antv/g"></script>
<script src="https://unpkg.com/@antv/g-svg"></script>

Then include the G2 UMD version that excludes @antv/g and @antv/g-svg, which we call the lite version:

<script src="https://unpkg.com/@antv/[email protected]/dist/g2-lite.min.js"></script>

Find the Renderer in the namespace window.G.SVG and instantiate it:

const { Chart } = window.G2;

const chart = new Chart({
  container: 'container',
  renderer: new window.G.SVG.Renderer(), // Pass in SVG Renderer
});

The lite version is provided mainly for the following considerations:

After removing @antv/g and the built-in @antv/g-canvas renderer, it’s convenient to replace other renderers on demand without redundant built-in renderers
When used with other packages that use @antv/g, you can share the same core and renderer code, saving overall package size, for example:

<script src="https://unpkg.com/@antv/g"></script>
<script src="https://unpkg.com/@antv/g-svg"></script>
<script src="https://unpkg.com/@antv/[email protected]/dist/g2-lite.min.js"></script>
<script src="https://unpkg.com/@antv/g6-lite"></script>