Askr
UI & Components

Export

Use export with the current published Askr packages.

  • @askrjs/askr0.0.59

How to use export

Create a typed plot factory once, give the root stable row data, and compose only the scales, marks, and interactions the chart needs.

  1. Import the published @askrjs/askr entrypoint.
  2. Keep export configuration next to the component, route, or server composition root that owns it.
  3. Handle pending, unavailable, cancellation, and failure states, then verify the production path.
import { createPlot } from '@askrjs/charts';

const Plot = createPlot<ProjectRow>();

<Plot.Root data={rows} rowKey={(row) => row.id} label="Revenue by day">
  <Plot.Axis axis="x" />
  <Plot.Axis axis="y" />
  <Plot.Line x="createdAt" y="revenue" />
</Plot.Root>

Data export

`PlotApi.exportData(options?)` returns a string shaped by `view` (`current`/`full`), `rows` (`source`/`transformed`), `scope` (`all`/`visible`/`selected`), and `format` (`csv`/`json`). CSV output neutralizes cells that spreadsheet applications would otherwise interpret as formulas; JSON output serializes dates as ISO strings and represents non-finite numbers as `null` rather than silently dropping them.

SVG export

`PlotApi.exportSvg(options?)` renders the resolved scene as an SVG string — it's purely an export format, not a mounted renderer and not a graphical SSR fallback. It requires a mounted plot with resolved dimensions, references fonts by name instead of embedding them, and by default excludes transient overlays like hover, crosshair, and brush state via `includeOverlays`.

PNG export

`PlotApi.exportPng(options?)` returns a `Promise<Blob>` rasterized from the same resolved scene, with a `pixelRatio` option for high-density output and the same `includeOverlays` toggle as SVG export. Like SVG export, it needs an already-mounted plot — there's nothing to rasterize before the canvas has resolved dimensions.

View selection

PNG, SVG, and data export all share the same `view: "current" | "full"` option: `current` captures exactly what's visible after any pan or zoom, while `full` captures the entire domain regardless of what the viewer has scrolled to. Picking the right one matters — a support screenshot usually wants `current`, while a downstream data pipeline usually wants `full`.