Editorial · @csdr/editorial

Figure

Numbered figure with caption, source, a11y wiring and wide/full breakouts. Wrap charts, images and maps in it.

Import: import { Figure } from '@csdr/editorial'
Use on: reports · landing · docs

When to use

Any chart, map or image that a reader might refer to. In MDX, give it an id and it is numbered automatically; <Ref to="…"/> resolves to “Figure N”. Charts inside a Figure inherit its caption for accessibility (aria-labelledby).

Chart in a numbered figure

View data

habitat	extent (thousand ha)
Mangroves	36
Seagrass	20
Saltmarsh	5

Download data (CSV)Download chart (SVG)

Figure 1.Extent of coastal blue-carbon habitats (illustrative).Source: Illustrative values.

Code

<Figure id="fig-extent" caption="Extent of coastal blue-carbon habitats (illustrative)." source="Illustrative values." width="wide">
  <BarChart data={rows} x="habitat" y="extent" unit="thousand ha" alt="Bar chart: mangroves 36, seagrass 20, saltmarsh 5 thousand hectares." />
</Figure>

Outside MDX (as here) pass `number` yourself or leave it off.

Image with caption (Markdown shorthand)

image

An image with a caption. Alt text is separate and describes content.

Code

![Alt text for the image](/images/site.jpg "This title becomes the caption")

In reports, Markdown images with a title auto-upgrade to a captioned figure via the components map.

Props

id, caption, source, number
width: content (default) · wide · full
plate (default true): light plate behind the content; keep for charts
kind: figure · map · image