Scales
Scales: anatomy, keyboard behavior, state, and theming in Askr.
Example
import { createPlot } from '@askrjs/charts';
const Plot = createPlot<ProjectRow>();
<Plot.Root data={rows} rowKey="id" label="Latency by service">
<Plot.Scale name="latency" channel="y" type="log" nice />
<Plot.Axis scale="latency" axis="y" label="Latency (ms)" />
<Plot.Line x="timestamp" y="latencyMs" yScale="latency" />
</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.