# Readable numeric ticks
Round a temperature range outward and format evenly spaced tick labels with units.

## APIs demonstrated

- [linearTicks](/reference/components/numeric-ticks/) from `@pibbl/core/viz`
- [niceLinearDomain](/reference/components/numeric-ticks/) from `@pibbl/core/viz`
- [formatNumber](/reference/components/numeric-ticks/) from `@pibbl/core/viz`
- [LinearTickOptions](/reference/components/numeric-ticks/) from `@pibbl/core/viz`
- [NumberFormatOptions](/reference/components/numeric-ticks/) from `@pibbl/core/viz`

## Complete example

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

```ts
import {
  linearTicks,
  niceLinearDomain,
  formatNumber,
  type LinearTickOptions,
  type NumberFormatOptions,
} from "@pibbl/core/viz";

const tickOptions: LinearTickOptions = { count: 5 };
const formatOptions: NumberFormatOptions = {
  maximumFractionDigits: 1,
  suffix: " °C",
};
const domain = niceLinearDomain([3.7, 27.4], tickOptions);
const heading = document.createElement("h2");
heading.textContent = "Prepare a readable temperature axis";
const explanation = document.createElement("p");
explanation.textContent = `Illustrative readings span 3.7–27.4 °C. Round the axis outward to ${domain[0]}–${domain[1]} °C, then choose evenly spaced ticks:`;
const output = document.createElement("p");
output.textContent = linearTicks(domain, tickOptions)
  .map((value) => formatNumber(value, formatOptions))
  .join(", ");
document.body.append(heading, explanation, output);

```

## Usage notes

- These illustrative temperature bounds demonstrate numeric axis preparation. No dates or time zones are involved.

## Documentation version

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