Customize renderer and plugins

Support custom renderer and plugins provided by @antv/g.

Basic Usage

<img src="https://user-images.githubusercontent.com/49330279/186100041-21c11bad-8c1c-481e-86de-121c5ffba43c.png" width="640" />

import { Chart } from '@antv/g2';
import { Renderer } from '@antv/g-svg';
import { Plugin } from '@antv/g-plugin-rough-canvas-renderer';

const chart = new Chart({
  width: 300,
  height: 150,
  container: 'chart',
  renderer: new Renderer(), // Use SVG renderer.
  plugins: [new Plugin()], // Register rough plugin.
});

chart
  .interval()
  .data([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  .encode('x', 'genre')
  .encode('y', 'sold');

chart.render();

API Design

Add the following options for chart options:

• renderer - a renderer supported by @antv/g
• plugins - an array of plugins supported by @anv/g

Implementation Suggestion

Create a new Canvas when calling new Chart() and pass it to render(options, { canvas: this.canvas }) when calling chart.render()

Docs

Add docs named Renderer in the top level of API reference. Show the rough style for every mark in both Canvas and SVG environments. Use a select to switch between Canvas and SVG .

TodoList

• source
• test
• demo: SVG renderer, rough style for every mark.