Charts

Use an SVG chart to preserve vector lines and shapes in PDF. Generate the SVG before rendering the document. See Charts for a complete ECharts example.

Add a chart

Pass the SVG string directly to src. Set its dimensions in CSS pixels and register the fonts used by its labels.

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

const fonts = (await googleFonts(["Inter"])).map((font) => ({ ...font, ranges: [] }));
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 },
);

Replace svg with your generated chart. breakInside: "avoid" keeps the chart and caption together when they fit on one page. Choose dimensions that fit within the page margins.

The empty ranges array prevents the renderer from discarding font subsets used only inside the SVG. See Fonts for chart labels to load fewer subsets for large font families.

Vector output and text

SVG paths, supported gradients, and dashed lines remain vector. Embedded bitmaps and SVG effects that require rasterization still use pixels. A PNG chart stays raster even when placed in a PDF.

SVG labels are drawn as outlines. They remain visible but cannot be selected, searched, or extracted as text. Put searchable titles, captions, and data tables in the surrounding JSX.

Describe the data

Give the chart a meaningful alt. Tagged output uses it as the figure description. A label such as “Bar chart” identifies the image but does not explain its data.

For detailed charts, include a table with the underlying values. See Reports and statements for a table that continues across pages.