Askr documentation
UI & Components

Export

Export: anatomy, keyboard behavior, state, and theming in Askr.

Example

import { state } from '@askrjs/askr';
import { createPlot, type PlotApi } from '@askrjs/charts';

const Plot = createPlot<ProjectRow>();

function ExportableRevenue() {
  const [api, setApi] = state<PlotApi<ProjectRow> | null>(null);
  return <>
    <Plot.Root data={rows} rowKey="id" label="Revenue" onApiChange={setApi}>
      <Plot.Line x="createdAt" y="revenue" />
    </Plot.Root>
    <button type="button" onClick={() => download(api()?.exportSvg() ?? '', 'revenue.svg')}>Export SVG</button>
  </>;
}

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`.