In the previous section we showed How to take over the rendering of D3, and we can do the same for other SVG-based diagram libraries. Observable Plot is a good example.

The chart library also supports passing document objects to plot(), and we pass G's Document object to.

import * as Plot from '@observablehq/plot';
import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';

const canvasRenderer = new Renderer();
const canvas = new Canvas({
    container: 'container',
    width: 640,
    height: 400,
    renderer: canvasRenderer,
});

const chart = Plot.dot(data, {
    x: 'weight',
    y: 'height',
    stroke: 'sex',
}).plot({
    // Pass in our Document object instead of `window.document`
    document: canvas.document,
});

It's worth mentioning that we don't need to call canvas.appendChild() manually to add the chart to the canvas, Observable Plot does that internally.

DEMO in Codesandbox

The top half of the figure below shows the rendering of the Observable Plot native SVG, and the bottom half shows the drawing using g-canvas.

Also thanks to taking over the rendering layer, we can use a plugin like g-plugin-rough-canvas-renderer for hand-drawn style transformation.

DEMO in Codesandbox