UTC dates across New Year

Keep month, day, and year visible when a calendar axis crosses into a new year.

APIs demonstrated

UTCScale from @pibbl/core/viz
useUTCScale from @pibbl/core/viz
Axis from @pibbl/core/viz
utcTickLabels from @pibbl/core/viz
UTCTickLabelOptions from @pibbl/core/viz

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

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 2dccb19. ALPHA — NOT FOR PRODUCTION USE.