# Scales and axes
Create band and linear scales with a typed axis and inspect resolved mappings.

## APIs demonstrated

- [LinearScale](/reference/components/scale/) from `@pibbl/core/viz`
- [BarScale](/reference/components/scale/) from `@pibbl/core/viz`
- [useLinearScale](/reference/hooks/use-scale/) from `@pibbl/core/viz`
- [useBarScale](/reference/hooks/use-scale/) from `@pibbl/core/viz`
- [ScaleId](/reference/components/scale/) from `@pibbl/core/viz`
- [LinearDomain](/reference/components/scale/) from `@pibbl/core/viz`
- [BandCategory](/reference/components/scale/) from `@pibbl/core/viz`
- [BandDomain](/reference/components/scale/) from `@pibbl/core/viz`
- [BarScaleProps](/reference/components/scale/) from `@pibbl/core/viz`
- [BandScaleRange](/reference/components/scale/) from `@pibbl/core/viz`
- [ResolvedBandScale](/reference/components/scale/) from `@pibbl/core/viz`
- [ScaleRange](/reference/components/scale/) from `@pibbl/core/viz`
- [ScaleLayoutStyle](/reference/components/scale/) from `@pibbl/core/viz`
- [LinearScaleProps](/reference/components/scale/) from `@pibbl/core/viz`
- [ResolvedLinearScale](/reference/components/scale/) from `@pibbl/core/viz`
- [ResolvedScale](/reference/components/scale/) from `@pibbl/core/viz`
- [Axis](/reference/components/axis/) from `@pibbl/core/viz`
- [AxisStyle](/reference/components/axis/) from `@pibbl/core/viz`
- [AxisProps](/reference/components/axis/) from `@pibbl/core/viz`

## Complete example

[Plain source](/minimal/viz/scales.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import { pibbl, Overlay } from "@pibbl/core";
import { Axis, type AxisProps, type AxisStyle, type BandCategory, type BandDomain, type BarScaleProps, type BandScaleRange, type LinearDomain, type LinearScaleProps, type ResolvedBandScale, type ResolvedLinearScale, type ResolvedScale, type ScaleId, type ScaleLayoutStyle, BarScale, LinearScale, type ScaleRange, useLinearScale, useBarScale } from "@pibbl/core/viz";

const xId: ScaleId = "month";
const yId: ScaleId = "sales";
const category: BandCategory = "Jun";
const months: BandDomain = ["Apr", "May", category];
const yDomain: LinearDomain = [0, 100];
const xRange: BandScaleRange = "width";
const yRange: ScaleRange = "height";
const layout: ScaleLayoutStyle = { width: 230, height: 170 };
const x: BarScaleProps = {
  id: xId,
  domain: months,
  range: xRange,
  paddingInner: 0.15,
  style: layout,
};
const y: LinearScaleProps = {
  id: yId,
  domain: yDomain,
  range: yRange,
  reverse: true,
};
const axisStyle: AxisStyle = { stroke: "#64748b", fill: "#334155" };
const axis: AxisProps = {
  scale: yId,
  position: "left",
  tickCount: 5,
  style: axisStyle,
};
function Probe() {
  const resolved: ResolvedScale = useLinearScale(yId).get();
  const linear: ResolvedLinearScale = useLinearScale(yId).get();
  const band: ResolvedBandScale = useBarScale(xId).get();
  const count =
    resolved.type === "linear" ? linear.ticks(5).length : band.domain.length;
  return (
    <>
      {count > 0 && <Axis {...axis} />}
      <Axis scale={xId} position="bottom" tickValues={band.domain} />
    </>
  );
}

const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <Overlay style={{ left: 70, top: 15, width: 230, height: 170 }}>
    <BarScale {...x}>
      <LinearScale {...y}>
        <Probe />
      </LinearScale>
    </BarScale>
  </Overlay>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Creates its own canvas and disposes the Pibbl mount on pagehide.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.