Sizing
Control image dimensions, plot area, margins, and output format.
Two sizing modes, auto margins, and two output formats. Use outer sizing when you need a fixed image size (emails, cards). Use plot sizing when the data area must be exact (dashboards, print).
Outer sizing (default)
width and height set the total image dimensions. The plot area is what remains after margins, title, axes, and legend:
Defaults: 640 × 480 pixels.
Wide vs narrow
The same data at different widths – the plot area stretches to fill:
Plot sizing
plotWidth and plotHeight control the data area directly. The total image grows to accommodate margins and chrome:
You cannot mix the two modes – specifying both width and plotWidth is a validation error.
Margins
Margins auto-expand to fit axis labels, tick labels, title, subtitle, and legend. Override them when you need precise control:
Any omitted side keeps its auto-computed value.
Attribution credit
Free and keyless renders carry a small "Made with Szum" credit in the bottom-right. It reserves a thin band along the bottom edge – the mirror image of how the title reserves space at the top – so it never overlaps your axes or data. In outer-sizing mode the plot area shrinks by that band; in plot-sizing mode the image grows to fit it, keeping your data area exact.
Creator and Pro renders omit the credit by default – set attribution: true to keep it. Charts inserted by the Figma plugin are always credit-free, on every plan. See Plans & Limits.
Output format
| Field | Type | Default | Description |
|---|---|---|---|
format | "svg" | "png" | – | Required. Output image format. |
scale | 1–4 | 1 (svg) / 2 (png) | Pixel density. |
format is required. SVG is scalable and smaller – use it for web embeds. PNG is raster – use it when you need a bitmap (emails, Slack, legacy systems).
SVG responses include a viewBox, so the chart scales proportionally when you apply CSS width (or a width attribute on an <img>) without distortion. Leave height as auto to preserve aspect ratio.
Where sizing applies
width and height define the authored canvas, but each output uses that canvas differently:
- PNG: lays out the chart at the authored canvas size.
scalemultiplies the raster dimensions without changing the layout. - SVG and Figma: use the authored canvas dimensions and coordinate system. SVG can then scale proportionally through its
viewBox. - Published chart page (
/v/…): keeps the authored aspect ratio, then fits and lays out the chart responsively within the viewport. The absolute pixel dimensions are not fixed. - Interactive embed (
/e/…): fills its iframe or container and lays out the chart responsively at that size. The authored dimensions do not constrain the embed.