Charts

Generate the chart as an SVG string, then pass it to an <img>. Takumi draws the SVG, so the chart library never runs in a browser. The library must be able to output SVG in your runtime.

Render an ECharts chartCopy Anchor Link

Install ECharts alongside takumi-js:

npm i echarts takumi-js react

This example draws a bar chart and saves it as a PNG. ECharts uses its SVG server renderer, so it needs no DOM or canvas.

import * as echarts from "echarts";
import { render } from "takumi-js";
import { googleFonts } from "takumi-js/helpers";
import { Renderer } from "takumi-js/node";
import { writeFile } from "node:fs/promises";

const chart = echarts.init(null, null, {
  renderer: "svg",
  ssr: true,
  width: 560,
  height: 360,
});

chart.setOption({
  animation: false,
  textStyle: { fontFamily: "Inter" },
  xAxis: { type: "category", data: ["Q1", "Q2", "Q3", "Q4"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [320, 730, 550, 910] }],
});

const svg = chart.renderToSVGString();
chart.dispose();

const renderer = new Renderer();
const fonts = await googleFonts(["Inter"]);

await Promise.all(fonts.map((font) => renderer.registerFont(font)));

const png = await render(
  <img
    src={svg}
    alt="Quarterly revenue: 320, 730, 550, and 910"
    style={{ width: 560, height: 360 }}
  />,
  { width: 560, height: 360, renderer },
);

await writeFile("revenue.png", png);

Keep animation: false for static output. With animation on, the SVG can capture an empty or half-drawn chart. Dispose of the ECharts instance once you have the SVG.

The SVG string goes straight into src, so it needs no images entry. In an HTML string, put the SVG markup inside the document.

For PDF output, see Charts in PDF.

Fonts for chart labelsCopy Anchor Link

Register fonts that cover every label, tick, and legend entry. Set the chart's font family to the same name.

The fonts render option keeps only the subsets that the document's text uses. Text inside an SVG image does not count, so chart labels can lose their font. Fonts registered with registerFont, as above, stay on the renderer for every render.

For a large family, keep only the subsets the chart text needs. Include generated numeric ticks and punctuation as well as your data labels:

import { googleFonts, subsetFonts } from "takumi-js/helpers";
import { Renderer } from "takumi-js/node";

const renderer = new Renderer();
const chartText = "一月二月三月四月營收0123456789.,−-%";
const fonts = subsetFonts({
  fonts: await googleFonts(["Noto Sans TC"]),
  source: chartText,
});

await Promise.all(fonts.map((font) => renderer.registerFont(font)));

Set ECharts textStyle.fontFamily to "Noto Sans TC" and pass renderer to render(). For offline output, load bundled font bytes instead. See Fonts in CI and offline renders.

Use another chart libraryCopy Anchor Link

Takumi takes the SVG output, not the library's interactive component. Generate the final chart before you call render().

A library that needs a DOM or canvas needs its own server rendering setup. If it outputs a PNG, pass that image to Takumi instead. A raster chart stays raster in a PDF.