# Scales

> Scales: anatomy, keyboard behavior, state, and theming in Askr.

Source: [https://askrjs.com/docs/charts/scales](https://askrjs.com/docs/charts/scales)

Status: stable. Packages: @askrjs/askr.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

```tsx
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.

## Documentation navigation

[Previous](https://askrjs.com/docs/charts/channels-and-transforms/index.md) | [Next](https://askrjs.com/docs/charts/cartesian-marks/index.md)