renderToStaticPNG

Renders a d3plus chart to a PNG Buffer in Node, with no browser.

Example

Rasterizes a chart to a PNG buffer in Node through @napi-rs/canvas, with no browser. pixelRatio (default 2) scales the backing store for sharper output, and fonts registers font files so text matches the browser. Node only, so the snippet is not executed here; see the Server-Side Rendering guide for fonts and the Geomap tile options.

import {writeFileSync} from "node:fs";
import {Treemap} from "@d3plus/core";
import {renderToStaticPNG} from "@d3plus/ssr";

const data = [
  {parent: "Fruit", id: "Apples", value: 30},
  {parent: "Fruit", id: "Pears", value: 12},
  {parent: "Vegetables", id: "Carrots", value: 18},
];

const png = await renderToStaticPNG(
  new Treemap().data(data).groupBy(["parent", "id"]).sum("value"),
  {width: 800, height: 500, pixelRatio: 2},
);
// Uint8Array (a Node Buffer) holding a 1600×1000 PNG

writeFileSync("treemap.png", png);

Parameters

import {renderToStaticPNG} from "@d3plus/ssr";

vizrequiredRenderableViz

A configured chart instance (data + accessors already set).

optsRasterRenderOptionsDefault {}

Output size, pixelRatio, fonts, and DOM options.