Askr
UI & Components

Scales

Use scales with the current published Askr packages.

  • @askrjs/askr0.0.59

How to use scales

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 scales 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>

Scale types

Ten scale types cover positional, temporal, and color channels: `band` and `point` for categorical positions, `linear`, `power`, `log`, and `symlog` for numeric ranges, `time` and `utc` for `Date` values, and `ordinal-color` / `continuous-color` for color channels. `log` only accepts strictly positive input and drops zero and negative values; reach for `symlog` with a `constant` when the data can be signed or sit near zero.

Domains

Without an explicit `Scale`, the compiler infers a reasonable default from channel type and mark context — numeric values get `linear`, `Date` values get local `time`, categorical bar and cell positions get `band`, and categorical line/area/point positions get `point`. Add a `Scale` child to override `domain`, `range`, `nice`, `clamp`, `reverse`, or the padding options (`padding`, `paddingInner`, `paddingOuter`) that band and point scales use to space categories.

Named scales

Give a `Scale` a `name` and reference it from a mark's `xScale`, `yScale`, or `colorScale` prop to break out of the single implicit x/y/color scale — this is how dual-axis plots and mixed units under one `Root` work. Each named scale carries its own `type`, `domain`, and `range`, and axes reference the same name so labels line up with the values actually being drawn.

Formatting

`Axis` accepts a `tickFormat` function that receives each resolved scale value and returns display text, letting you format currency, units, or dates independent of the scale's own domain math. `Root`'s `locale` prop feeds locale-aware defaults into inferred formatting elsewhere in the plot, such as tooltip and summary text, without requiring every axis to specify its own formatter.