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.