formatDateFull
Formats a date to be read on its own, such as in a tooltip: the same interval as formatDate picks from dataArray (year, quarter, month, day, hour, or finer), always with the year and, below a day, the time of day.
Basic example
Section titled “Basic example”formatDateFull labels a date at the same interval formatDate picks from the whole series, but every label carries its year, so each one can be read alone (d3plus uses it for time values in tooltips). formatDate leaves the year off middle ticks, where the neighbouring labels supply it.
import {formatDateFull} from "@d3plus/format";
const monthly = [
new Date(2023, 0, 1),
new Date(2023, 1, 1),
new Date(2023, 2, 1),
new Date(2023, 3, 1),
new Date(2023, 4, 1),
new Date(2023, 5, 1),
new Date(2023, 6, 1),
new Date(2023, 7, 1),
new Date(2023, 8, 1),
new Date(2023, 9, 1),
new Date(2023, 10, 1),
new Date(2023, 11, 1),
];
monthly.map(d => formatDateFull(d, monthly));
Custom formatter
Section titled “Custom formatter”The third argument replaces d3’s timeFormat with any function that turns a specifier into a formatter. Here a timeFormatLocale built from the es-ES dictionary in @d3plus/locales supplies Spanish month names.
import {formatDateFull} from "@d3plus/format";
import {timeFormatLocale} from "d3-time-format";
import {locale} from "@d3plus/locales";
const monthly = [
new Date(2023, 0, 1),
new Date(2023, 1, 1),
new Date(2023, 2, 1),
new Date(2023, 3, 1),
new Date(2023, 4, 1),
new Date(2023, 5, 1),
new Date(2023, 6, 1),
new Date(2023, 7, 1),
new Date(2023, 8, 1),
new Date(2023, 9, 1),
new Date(2023, 10, 1),
new Date(2023, 11, 1),
];
monthly.map(d =>
formatDateFull(d, monthly, timeFormatLocale(locale["es-ES"]).format),
);
Interval detection
Section titled “Interval detection”The spacing between neighbouring dates picks the interval (year, quarter, month, day, hour, or finer). Below a day, the label adds the time of day.
import {formatDateFull} from "@d3plus/format";
const quarterly = [
new Date(2022, 0, 1),
new Date(2022, 3, 1),
new Date(2022, 6, 1),
new Date(2022, 9, 1),
new Date(2023, 0, 1),
new Date(2023, 3, 1),
new Date(2023, 6, 1),
new Date(2023, 9, 1),
];
quarterly.map(d => formatDateFull(d, quarterly));
const daily = [
new Date(2024, 2, 1),
new Date(2024, 2, 2),
new Date(2024, 2, 3),
new Date(2024, 2, 4),
new Date(2024, 2, 5),
new Date(2024, 2, 6),
new Date(2024, 2, 7),
new Date(2024, 2, 8),
new Date(2024, 2, 9),
new Date(2024, 2, 10),
];
daily.map(d => formatDateFull(d, daily));
const hourly = [
new Date(2024, 2, 1),
new Date(2024, 2, 1, 1),
new Date(2024, 2, 1, 2),
new Date(2024, 2, 1, 3),
new Date(2024, 2, 1, 4),
new Date(2024, 2, 1, 5),
new Date(2024, 2, 1, 6),
new Date(2024, 2, 1, 7),
new Date(2024, 2, 1, 8),
new Date(2024, 2, 1, 9),
new Date(2024, 2, 1, 10),
new Date(2024, 2, 1, 11),
];
hourly.map(d => formatDateFull(d, hourly));
Parameters
import {formatDateFull} from "@d3plus/format";