G2

Server-side rendering (SSR) refers to rendering charts in non-browser environments, such as Node.js, Python, Java, PHP, and other backend languages. Typically, in backend environments, the output is a static image without interaction or animation. The typical usage scenarios are as follows:

Pre-rendering images on the backend to improve page load speed.
Script batch processing for easy distribution.
Server-side visualization service.
Generate images for screenshot comparisons, used in code unit testing.
...

Used in NodeJS

In the Node.js ecosystem, the following libraries implement common rendering APIs found in the browser environment:

Node-canvas it provides an implementation of the Canvas2D API based on Cairo.
JSdom it offers an implementation of the DOM API.

By creating corresponding renderers based on those, G2 can render PNG or SVG results. Below, we will introduce example code for both implementations separately.

jsdom

online example

First, use JSDOM to create a container container where the chart will be rendered. Additionally, save the window and document objects for later use:

const jsdom = require('jsdom');

const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);
const { document } = window;
const container = document.createElement('div');

Then, create a SVG renderer, remove plugins that depend on the DOM API, and create a canvas:

const { Canvas } = require('@antv/g');
const { Renderer } = require('@antv/g-svg');

const renderer = new Renderer();
const htmlRendererPlugin = renderer.getPlugin('html-renderer');
renderer.unregisterPlugin(htmlRendererPlugin);
const domInteractionPlugin = renderer.getPlugin('dom-interaction');
renderer.unregisterPlugin(domInteractionPlugin);

const gCanvas = new Canvas({
  renderer,
  width,
  height,
  container, // use container created in last step
  document,
  offscreenCanvas: offscreenNodeCanvas,
  requestAnimationFrame: window.requestAnimationFrame,
  cancelAnimationFrame: window.cancelAnimationFrame,
});

Then, proceed to create a G2 Chart as usual by providing the previously created canvas and container. For more details, refer to the documentation under quick start：

const { Chart } = require('@antv/g2');

const chart = new Chart({
  width,
  height,
  canvas: gCanvas,
  container,
});

Finally, render the chart, retrieve the rendering result from JSDOM, serialize it into an SVG string. Afterwards, you can choose to save it as a local file. In this example code, the result is directly output to the console.

const xmlserializer = require('xmlserializer');

(async () => {
  await chart.render();

  const svg = xmlserializer.serializeToString(container.childNodes[0]);
  console.log(svg); // '<svg>...</svg>

  chart.destroy();
})();

It is worth mentioning that currently, in G2's integration testing, due to SVG's excellent cross-platform compatibility, we also apply this technology for screenshot comparisons.

node-canvas

online example

The solution based on jsdom can only generate SVG. If you want to generate images in formats like PNG, you can use node-canvas.

Firstly, create two node-canvases, one for rendering the scene and the other for measuring text width:

const { createCanvas } = require('canvas');
const nodeCanvas = createCanvas(width, height);
const offscreenNodeCanvas = createCanvas(1, 1);

Then create a canvas renderer and canvas:

import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';

const renderer = new Renderer();
// Omitting the removal of DOM-related plugin code.
const gCanvas = new Canvas({
  width,
  height,
  canvas: nodeCanvas,
  renderer,
  offscreenCanvas: offscreenNodeCanvas,
});

Next, create a G2 Chart as usual and render it. After completion, use the createPNGStream method provided by node-canvas to create a ReadableStream containing the PNG encoding. Similarly, createJPEGStream and createPDFStream are also available for exporting JPEG and PDF, respectively.

function writePNG(nodeCanvas) {
  return new Promise<string>((resolve, reject) => {
    const f = path.join(os.tmpdir(), `${Math.random()}.png`);
    const out = fs.createWriteStream(f);
    const stream = nodeCanvas.createPNGStream();
    stream.pipe(out);
    out.on('finish', () => resolve(f)).on('error', reject);
  });
}

Use in other server-side locales

Because the code of G2 is written and developed in JavaScript, it cannot be used directly in Python, Java, PHP and other language environments. However, you can install the Node.JS environment in the service and then use the corresponding back-end language command line API to drive the above-mentioned Node.JS code to perform SSR.

Refer to python calls node js, other languages are similar.

Server-side rendering（SSR）

Used in NodeJS

jsdom

node-canvas

Use in other server-side locales