Askr
UI & Components

Cartesian Marks

Use cartesian marks with the current published Askr packages.

  • @askrjs/askr0.0.59

How to use cartesian marks

Start with this complete cartesian marks shape, then replace the example data and application service with your own.

  1. Import the published @askrjs/askr entrypoint.
  2. Keep cartesian marks 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.
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.Point x="createdAt" y="revenue" />
</Plot.Root>

Lines and areas

`Line` takes `x` and numeric `y`, with `curve` (`linear`, `step`, `monotone`), `strokeWidth`, and a `defined` accessor that returns `false` to open a real gap in the path — that's distinct from a missing channel value, and both are treated as breaks. `Area` shares the same shape but adds `y2` for filled ranges, `baseline`, and the same `stack`/`normalize` options as `Bar` for building stacked or proportional area charts.

Bars and points

`Bar` pairs a binned or categorical `x` with an aggregated numeric `y`, and supports `orientation` (`vertical`/`horizontal`), `stack` (a categorical field, accessor, or boolean), `normalize` for percent stacks, plus `radius`, `inset`, `min`, and `max` for corner rounding, spacing, and bounded progress bars. `Point` plots `x`/`y` pairs with variable `r` (a fixed number or per-row channel) and a `shape` of `circle`, `square`, or `diamond` — useful for scatter plots or marking discrete values along a line.

Axes

Cartesian marks get default axes and tooltip behavior automatically; add explicit `Axis` children only when you need something different. `AxisProps` lets you pick which named `scale` to draw from, the `orient` (`top`, `right`, `bottom`, `left`), `tickCount`, a `tickFormat` function, and whether to draw the accompanying `grid` lines.

Mixed charts

Because marks are composed as ordinary children of one `Root`, combining a `Bar` histogram with a `Line` moving-average or a `Point` overlay is just adding more elements — no separate "combo chart" type exists. Give each family its own named `xScale`/`yScale` pair when the units differ, as in a requests-count bar series plotted against a latency line on a second y-axis.