# UTC dates across New Year
Keep month, day, and year visible when a calendar axis crosses into a new year.

## APIs demonstrated

- [UTCScale](/reference/components/scale/) from `@pibbl/core/viz`
- [useUTCScale](/reference/hooks/use-scale/) from `@pibbl/core/viz`
- [Axis](/reference/components/axis/) from `@pibbl/core/viz`
- [utcTickLabels](/reference/functions/utc-domains/) from `@pibbl/core/viz`
- [UTCTickLabelOptions](/reference/functions/utc-domains/) from `@pibbl/core/viz`

## Complete example

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

```tsx
import { pibbl, Overlay, Text } from "@pibbl/core";
import {
  utcTickLabels,
  type UTCTickLabelOptions,
  UTCScale,
  useUTCScale,
  Axis,
} from "@pibbl/core/viz";
const start = Date.UTC(2025, 11, 30),
  end = Date.UTC(2026, 0, 2);
function Dates() {
  const scale = useUTCScale("date").get();
  const ticks = scale.ticks(4);
  const options: UTCTickLabelOptions = { locale: "en-US" };
  const labels = utcTickLabels(ticks, options);
  return (
    <>
      <Axis
        scale="date"
        position="bottom"
        tickValues={ticks}
        tickFormat={(value) => labels[ticks.indexOf(Number(value))]}
      />
      <Text style={{ top: -5, font: "14px sans-serif", fill: "#183153" }}>
        {"Across New Year · UTC calendar labels"}
      </Text>
    </>
  );
}
const canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 140;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <Overlay style={{ left: 35, top: 15, width: 570, height: 70 }}>
    <UTCScale
      id="date"
      domain={[start, end]}
      range="width"
      style={{ width: 570, height: 70 }}
    >
      <Dates />
    </UTCScale>
  </Overlay>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- The dates run from December 30, 2025 through January 2, 2026. Tick labels always use UTC, regardless of the browser’s local time zone.
- Creates its own canvas and disposes the mount on pagehide.

## Documentation version

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