Charts

Embed a chart as SVG to keep its lines and shapes as vectors. Generate the SVG before rendering the document. For a complete ECharts example, see Charts.

Add a chartCopy Anchor Link

Pass the SVG string to src and set its size in CSS px:

import { render } from "takumi-pdf";
import { googleFonts } from "@takumi-rs/helpers";

const pdf = await render(
  <figure style={{ margin: 0, breakInside: "avoid" }}>
    <img
      src={svg}
      alt="Quarterly revenue: 320, 730, 550, and 910"
      style={{ width: 560, height: 360 }}
    />
    <figcaption>Revenue by quarter</figcaption>
  </figure>,
  { size: "a4", fonts: await googleFonts(["Inter"]) },
);

Replace svg with your generated chart. breakInside: "avoid" keeps the chart and caption on one page when they fit. Pick a size that fits inside the page margins.

Fonts for chart labelsCopy Anchor Link

render() loads only the font subsets that cover text in the document tree. It does not read text inside an SVG image. If chart labels use characters the surrounding text does not, register their fonts ahead of time. Fonts from registerFont() stay loaded for every render:

import { PdfRenderer } from "takumi-pdf";
import { googleFonts, subsetFonts } from "@takumi-rs/helpers";

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

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

const pdf = await renderer.render(<img src={svg} alt="營收" style={{ width: 560, height: 360 }} />);

Include generated ticks and punctuation in chartText, not only your data labels. Set the chart library's font family to the registered name, here "Noto Sans TC".

Vector output and textCopy Anchor Link

• SVG paths, supported gradients, and dashed lines stay vector.
• Embedded bitmaps, and SVG effects that need rasterizing, become pixels.
• A PNG chart stays raster in the PDF.

SVG labels are drawn as outlines. They stay visible, but readers cannot select, search, or copy them. Put titles, captions, and data tables that should be searchable in the surrounding JSX.

Describe the dataCopy Anchor Link

Give the chart a meaningful alt. Tagged output uses it as the figure description. A label such as "Bar chart" names the image but says nothing about its data.

For a detailed chart, add a table of the underlying values. See Reports and statements for a table that continues across pages.