Askr documentation
UI & Components

Migration from Charts 0.1

Migration from Charts 0.1: anatomy, keyboard behavior, state, and theming in Askr.

Example

import { createPlot } from '@askrjs/charts';

const Plot = createPlot<ProjectRow>();

// Compose the 0.1 primitives directly; removed chart-specific wrappers
// such as LineChart and DonutChart have no compatibility aliases.
<Plot.Root data={rows} rowKey="id" label="Revenue by team">
  <Plot.Line x="createdAt" y="revenue" />
  <Plot.Arc value="revenue" category="team" innerRadius={48} />
</Plot.Root>

Package baseline

0.1 is a clean break: there is no `components`, `core`, `default`, per-chart CSS, template, or generator entrypoint left as a compatibility shim. Everything JavaScript comes from the root `@askrjs/charts` export, and structural/theme styles come from the separate `@askrjs/charts/styles` import — both need to be wired up, since neither substitutes for the other.

Plot model

Per-chart components like `BarChart`, `LineChart`, `AreaChart`, `DonutChart`, `PieChart`, and `StackedBarChart` are gone; they're replaced by composing primitives under one `createPlot<Row>()` factory — `Plot.Bar`, `Plot.Line`, `Plot.Area`, and `Plot.Arc` with the right radius or stack options. `Sparkline` becomes a compact `Root` with `Line` or `Area`; `Heatmap` becomes `Cell`; `Timeline` becomes `Rule`, `Point`, and `Text` together; `FlameGraph` becomes `Rect` driven by `partition(...)`.

View state

Where the old catalog managed pan, zoom, and selection internally per chart type, 0.1 exposes `view`/`onViewChange`/`defaultView` and `selection`/`onSelectionChange`/`defaultSelection` uniformly on `Root` for every mark family. `ChartEmptyState` is replaced by `Root`'s `empty` prop, while loading and error states stay owned by the route rather than the plot.

Export and interaction

`ChartLegend` is replaced by the `Legend` primitive, and export functionality that used to be bolted onto individual chart components now comes from `PlotApi` (`exportPng`, `exportSvg`, `exportData`) delivered through `Root`'s `onApiChange`. `ChartShell` and `ChartPanel` have no direct replacement — keep card and page chrome in the application and let `Plot.Root`'s `title`/`description` own only the plot's own semantic heading.