@automattic/charts 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.1] - 2026-08-19
+### Changed
+- Charts: adapt bar chart time-axis tick labels to the data's bucket resolution and time span, support the `tickResolution` hint, and name each bar's bucket in its tooltip. [#51274]
+- Resolve an XY chart theme's color roles from a single computed-style snapshot, and rebuild the theme only when a series color changes rather than on every render. [#51342]
+
+### Fixed
+- Charts: keep a bar chart's time axis on the buckets it actually draws, so a labelled bar, a comparison series, or a series hidden from the legend can no longer strand a tick at the axis origin, and label such a bar by its label in both the axis and the tooltip. [#51343]
+- Charts: keep the year and the day on a bar chart's time axis, which could previously skip the tick that named them, and stop the same label falling on two ticks in a row. [#51339]
+- Charts: measure a horizontal chart's left margin from the labels it will actually draw, so a caller's tick formatter is applied exactly once and time-of-day labels stop reserving room for the string "Invalid Date". [#51272]
+- Charts: stop a bar chart's time axis dropping to a couple of ticks when it reaches for the year, and speed up how it picks them. [#51339]
+
 ## [2.0.0] - 2026-08-10
 ### Added
 - Time axis: Accept a tickResolution hint on the x-axis options so callers that know the data's bucket size can set tick formats directly instead of relying on inference. [#51017]
@@ -965,6 +976,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[2.0.1]: https://github.com/Automattic/charts/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/Automattic/charts/compare/v1.12.0...v2.0.0
 [1.12.0]: https://github.com/Automattic/charts/compare/v1.11.0...v1.12.0
 [1.11.0]: https://github.com/Automattic/charts/compare/v1.10.3...v1.11.0

package/dist/index.cjs

@@ -510,15 +510,31 @@ const CSS_VAR_NAME_PATTERN = /^--[\w-]+$/;
 * @param element - Optional DOM element to resolve the variable from (defaults to document.documentElement)
 * @return The resolved value, fallback value, or null if unresolvable
 */
-const resolveCssVariable = (value, element) => {
-	if (!value) return null;
-	if (value.startsWith("var(") && value.endsWith(")")) {
-		const parsed = parseVarExpression(value);
-		if (parsed) return resolveVariableName(parsed.varName, element) || parsed.fallback;
-	}
-	if (value.startsWith("--")) return resolveVariableName(value, element);
-	return value;
-};
+const resolveCssVariable = (value, element) => createCssVariableResolver(element)(value);
+/**
+* Builds a resolver that reads every value from one `getComputedStyle` snapshot.
+*
+* `getComputedStyle` is the expensive half of resolving a token: each call can force the browser to flush pending style, and a chart theme resolves five roles at once. Taking the snapshot once per build turns that into a single query. The reads that share a snapshot happen synchronously inside one memo body, so no style change can land between them — the resolver is single-pass by design and is not meant to be held across renders.
+*
+* @param element - The element to resolve against, or null/undefined for the document root.
+* @return A resolver that resolves each value exactly as `resolveCssVariable` does.
+*/
+function createCssVariableResolver(element) {
+	let styles = null;
+	const getStyles = () => {
+		if (!styles) styles = computedStyleFor(element);
+		return styles;
+	};
+	return (value) => {
+		if (!value) return null;
+		if (value.startsWith("var(") && value.endsWith(")")) {
+			const parsed = parseVarExpression(value);
+			if (parsed) return readCustomProperty(parsed.varName, getStyles()) || parsed.fallback;
+		}
+		if (value.startsWith("--")) return readCustomProperty(value, getStyles());
+		return value;
+	};
+}
 /**
 * Parses a var() expression into its variable name and optional fallback.
 * Uses string manipulation instead of complex regex to avoid ReDoS.
@@ -546,17 +562,30 @@ function parseVarExpression(expr) {
 	};
 }
 /**
-* Resolves a plain CSS variable name to its computed value.
+* Takes one computed-style snapshot, or null where there is nothing to read (SSR, or a detached element).
+*
+* @param element - The element to read from, or null/undefined for the document root.
+* @return The computed styles, or null.
+*/
+function computedStyleFor(element) {
+	if (typeof window === "undefined" || typeof document === "undefined") return null;
+	try {
+		return getComputedStyle(element || document.documentElement);
+	} catch {
+		return null;
+	}
+}
+/**
+* Reads one custom property from a computed-style snapshot.
 *
 * @param varName - A CSS variable name like '--my-color'
-* @param element - Optional DOM element to resolve from
+* @param styles  - The snapshot to read from, or null
 * @return The computed value or null
 */
-function resolveVariableName(varName, element) {
-	if (typeof window === "undefined" || typeof document === "undefined") return null;
+function readCustomProperty(varName, styles) {
+	if (!styles) return null;
 	try {
-		const targetElement = element || document.documentElement;
-		return getComputedStyle(targetElement).getPropertyValue(varName).trim() || null;
+		return styles.getPropertyValue(varName).trim() || null;
 	} catch {
 		return null;
 	}
@@ -1025,11 +1054,13 @@ const useDeepMemo = (value) => {
 };
 //#endregion
 //#region src/hooks/use-xychart-theme.ts
-const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
+	const seriesColorKey = JSON.stringify((data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color)));
 	return (0, react.useMemo)(() => {
-		const seriesColors = (data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color));
+		const resolve = createCssVariableResolver();
+		const resolveColor = (value) => value ? resolve(value) ?? value : value;
+		const seriesColors = JSON.parse(seriesColorKey);
 		return (0, _visx_xychart.buildChartTheme)({
 			...theme,
 			colors: [...seriesColors, ...theme.colors ?? []],
@@ -1051,7 +1082,7 @@ const useXYChartTheme = (data) => {
 				fill: resolveColor(theme.svgLabelSmall.fill)
 			}
 		});
-	}, [theme, data]);
+	}, [theme, seriesColorKey]);
 };
 //#endregion
 //#region src/hooks/use-chart-data-transform.ts
@@ -1138,7 +1169,7 @@ const getXAxisLabelMetrics = (theme, orientation) => {
 const useChartMargin = (height, options, data, theme, horizontal = false) => {
 	const yTicks = (0, react.useMemo)(() => {
 		const allDataPoints = data.flatMap((series) => series.data);
-		if (horizontal) return allDataPoints.map((d) => d.label || options.axis?.y?.tickFormat(d.date.getTime(), 0, []));
+		if (horizontal) return allDataPoints.map((d) => d.label || d.date?.getTime());
 		if (options.axis?.y?.tickValues?.length) return options.axis.y.tickValues;
 		const minY = Math.min(...allDataPoints.map((d) => d.value));
 		const maxY = Math.max(...allDataPoints.map((d) => d.value));
@@ -2233,28 +2264,38 @@ const getCurveType = (type, smoothing) => {
 		default: return _visx_curve.curveLinear;
 	}
 };
-const formatYearTick = (timestamp) => {
-	return new Date(timestamp).toLocaleDateString(void 0, { year: "numeric" });
-};
-const formatDateTick$1 = (timestamp) => {
-	return new Date(timestamp).toLocaleDateString(void 0, {
-		month: "short",
-		day: "numeric"
-	});
-};
-const formatHourTick = (timestamp) => {
-	return new Date(timestamp).toLocaleTimeString(void 0, {
-		hour: "numeric",
-		hour12: true
-	});
-};
-const formatDateOrHourTick = (timestamp) => {
-	const date = new Date(timestamp);
-	return date.getHours() === 0 && date.getMinutes() === 0 ? formatDateTick$1(timestamp) : formatHourTick(timestamp);
+const dateTimeFormat = (options) => {
+	let formatter;
+	return (timestamp) => {
+		if (!Number.isFinite(Number(timestamp))) return new Date(timestamp).toLocaleDateString();
+		formatter = formatter ?? new Intl.DateTimeFormat(void 0, options);
+		return formatter.format(timestamp);
+	};
 };
-const formatMonthOrYearTick = (timestamp) => {
-	const date = new Date(timestamp);
-	return date.getMonth() === 0 ? formatYearTick(timestamp) : date.toLocaleDateString(void 0, { month: "short" });
+const formatYearTick = dateTimeFormat({ year: "numeric" });
+const formatDateTick = dateTimeFormat({
+	month: "short",
+	day: "numeric"
+});
+const formatHourTick = dateTimeFormat({
+	hour: "numeric",
+	hour12: true
+});
+const formatMonthTick = dateTimeFormat({ month: "short" });
+const boundaryFormat = (isAnchor, atBoundary, between) => {
+	const format = (timestamp) => isAnchor(new Date(timestamp)) ? atBoundary(timestamp) : between(timestamp);
+	format.isAnchor = isAnchor;
+	return format;
+};
+const formatDateOrHourTick = boundaryFormat((date) => date.getHours() === 0 && date.getMinutes() === 0, formatDateTick, formatHourTick);
+const formatMonthOrYearTick = boundaryFormat((date) => date.getMonth() === 0, formatYearTick, formatMonthTick);
+const getSpan = (sortedData) => {
+	const bounds = sortedData.map((datom) => [datom.data.at(0)?.date, datom.data.at(-1)?.date]).filter(([first, last]) => first !== void 0 && last !== void 0);
+	if (!bounds.length) return null;
+	return {
+		minX: Math.min(...bounds.map(([first]) => Number(first))),
+		maxX: Math.max(...bounds.map(([, last]) => Number(last)))
+	};
 };
 const getPointSpacingInHours = (sortedData) => {
 	return sortedData.reduce((spacing, datom) => datom.data.reduce((seriesSpacing, point, index) => {
@@ -2263,26 +2304,90 @@ const getPointSpacingInHours = (sortedData) => {
 		return Math.min(seriesSpacing, Math.abs((0, date_fns.differenceInHours)(point.date, previous.date)));
 	}, spacing), Number.POSITIVE_INFINITY);
 };
-const SPACING_BY_RESOLUTION = {
-	hour: 1,
-	day: 24,
-	week: 168,
-	month: 672
+const SUB_DAILY_SPACING_HOURS = 23;
+const MONTHLY_SPACING_HOURS = 672;
+const getBucketResolution = (sortedData, tickResolution) => {
+	if (tickResolution) return tickResolution === "week" ? "day" : tickResolution;
+	const spacingInHours = getPointSpacingInHours(sortedData);
+	if (spacingInHours < SUB_DAILY_SPACING_HOURS) return "hour";
+	if (!Number.isFinite(spacingInHours) || spacingInHours < MONTHLY_SPACING_HOURS) return "day";
+	return spacingInHours < 12 * MONTHLY_SPACING_HOURS ? "month" : "year";
 };
 const getFormatter = (sortedData, tickResolution) => {
-	if (tickResolution === "year") return formatYearTick;
-	const minX = Math.min(...sortedData.map((datom) => datom.data.at(0)?.date));
-	const maxX = Math.max(...sortedData.map((datom) => datom.data.at(-1)?.date));
-	const spacingInHours = tickResolution ? SPACING_BY_RESOLUTION[tickResolution] : getPointSpacingInHours(sortedData);
-	const isSubDaily = spacingInHours < 23;
-	const diffInHours = Math.abs((0, date_fns.differenceInHours)(maxX, minX));
-	if (diffInHours <= 24 && isSubDaily) return formatHourTick;
-	if (diffInHours <= 168 && isSubDaily) return formatDateOrHourTick;
-	if (Math.abs((0, date_fns.differenceInYears)(maxX, minX)) <= 1) return Number.isFinite(spacingInHours) && spacingInHours >= 672 ? formatMonthOrYearTick : formatDateTick$1;
-	return formatYearTick;
+	const resolution = getBucketResolution(sortedData, tickResolution);
+	if (resolution === "year") return formatYearTick;
+	if (resolution === "month") return formatMonthOrYearTick;
+	const span = getSpan(sortedData);
+	if (!span) return formatDateTick;
+	const diffInHours = Math.abs((0, date_fns.differenceInHours)(span.maxX, span.minX));
+	if (resolution === "hour") {
+		if (diffInHours <= 24) return formatHourTick;
+		if (diffInHours <= 168) return formatDateOrHourTick;
+	}
+	return Math.abs((0, date_fns.differenceInYears)(span.maxX, span.minX)) <= 1 ? formatDateTick : formatYearTick;
+};
+const getAnchorIndices = (domain, isAnchor) => domain.reduce((indices, date, index) => {
+	if (isAnchor(date)) indices.push(index);
+	return indices;
+}, []);
+const getCandidateSteps = (length, maxTicks, anchorSpacing) => {
+	const steps = /* @__PURE__ */ new Set();
+	for (let count = maxTicks; count > 1; count--) {
+		steps.add(Math.max(1, Math.floor((length - 1) / (count - 1))));
+		steps.add(Math.max(1, Math.ceil((length - 1) / (count - 1))));
+	}
+	if (anchorSpacing) {
+		for (let divisor = 1; divisor <= anchorSpacing; divisor++) if (anchorSpacing % divisor === 0) steps.add(anchorSpacing / divisor);
+		const minStep = Math.floor((length - 1) / Math.max(1, maxTicks)) + 1;
+		steps.add(Math.ceil(minStep / anchorSpacing) * anchorSpacing);
+	}
+	return steps;
+};
+/**
+* Tick values for a band time axis.
+*
+* visx samples a band domain by index from offset zero, blind to which labels
+* carry a boundary and without collapsing repeats — so the tick that prints the
+* year or the date often isn't sampled at all, and a long series can show the
+* same label twice. Choose the values instead: sweep the evenly spaced
+* candidates, including those that step from anchor to anchor, and keep the one
+* that reaches the most anchors without thinning the axis or putting two
+* identical labels side by side.
+*
+* @param domain        - Band domain, in axis order.
+* @param tickFormatter - Formatter the axis will render these values with.
+* @param maxTicks      - Most ticks the axis should carry.
+* @return Values to hand the axis as `tickValues`.
+*/
+const getBandTickValues = (domain, tickFormatter, maxTicks) => {
+	if (!domain.length) return [];
+	const { isAnchor } = tickFormatter;
+	const anchorIndices = isAnchor ? getAnchorIndices(domain, isAnchor) : [];
+	const domainLabels = domain.map((date) => tickFormatter(date.getTime()));
+	const candidates = [];
+	const consider = (indices) => {
+		if (!indices.length || indices.length > maxTicks) return;
+		if (!indices.some((index, position) => position > 0 && domainLabels[index] === domainLabels[indices[position - 1]])) candidates.push(indices);
+	};
+	const anchorSpacing = anchorIndices.length > 1 ? anchorIndices[1] - anchorIndices[0] : null;
+	for (const step of getCandidateSteps(domain.length, maxTicks, anchorSpacing)) for (let offset = 0; offset < step; offset++) {
+		const indices = [];
+		for (let index = offset; index < domain.length; index += step) indices.push(index);
+		consider(indices);
+	}
+	for (let stride = 1; stride <= anchorIndices.length; stride++) consider(anchorIndices.filter((_, position) => position % stride === 0));
+	if (!candidates.length) return [domain[0]];
+	const densest = candidates.reduce((most, indices) => Math.max(most, indices.length), 0);
+	const anchorsIn = (indices) => isAnchor ? indices.filter((index) => isAnchor(domain[index])).length : 0;
+	return candidates.filter((indices) => indices.length >= densest - 1).reduce((chosen, indices) => {
+		const gain = anchorsIn(indices) - anchorsIn(chosen);
+		return gain > 0 || gain === 0 && indices.length > chosen.length ? indices : chosen;
+	}).map((index) => domain[index]);
 };
 const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
-	const xScale = (0, _visx_scale.scaleTime)({ domain: [Math.min(...data.map((datom) => datom.data.at(0)?.date)), Math.max(...data.map((datom) => datom.data.at(-1)?.date))] });
+	const span = getSpan(data);
+	if (!span) return 1;
+	const xScale = (0, _visx_scale.scaleTime)({ domain: [span.minX, span.maxX] });
 	const upperBound = Math.min(data[0]?.data.length || 3, Math.ceil(chartWidth / X_TICK_WIDTH));
 	let secondBestGuess = 1;
 	for (let numTicks = upperBound; numTicks > 1; --numTicks) {
@@ -3060,8 +3165,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const providerTheme = useGlobalChartsTheme();
-	const resolvedBackgroundColor = resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor;
 	const theme = useXYChartTheme(data);
+	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
 	const chartId = useChartId(providedChartId);
 	const chartRef = (0, react.useRef)(null);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
@@ -3837,7 +3942,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor
+									strokeColor: theme.backgroundColor ?? providerTheme.backgroundColor
 								})] }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -3997,11 +4102,73 @@ const TruncatedYTickComponent = createTruncatedTickComponent("y");
 const BASE_BAND_PADDING = .2;
 /** Inner padding of the category band scale (the base gap between ticks). */
 const BASE_BAND_PADDING_INNER = .1;
-const formatDateTick = (timestamp) => {
-	return new Date(timestamp).toLocaleDateString(void 0, {
-		month: "short",
+/** Ticks each axis carries unless the caller asks for a different count. */
+const DEFAULT_NUM_TICKS = 4;
+const ALL_RENDERED = () => true;
+const TOOLTIP_FORMAT_BY_RESOLUTION = {
+	hour: {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+		hour: "numeric",
+		hour12: true
+	},
+	day: {
+		year: "numeric",
+		month: "long",
 		day: "numeric"
-	});
+	},
+	month: {
+		year: "numeric",
+		month: "long"
+	},
+	year: { year: "numeric" }
+};
+/**
+* Labels one bar's bucket, at the bucket's own granularity — finer than the
+* ticks whenever the overall time span coarsens the axis.
+*
+* @param data           - Date-based series, already parsed and sorted by `useChartDataTransform`.
+* @param tickResolution - Caller-declared bucket resolution, when known.
+* @return Tooltip label formatter.
+*/
+const getTooltipFormatter = (data, tickResolution) => {
+	if (tickResolution === "week") return (timestamp) => (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("Week of %s", "jetpack-charts"), new Date(timestamp).toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	}));
+	const format = TOOLTIP_FORMAT_BY_RESOLUTION[getBucketResolution(data, tickResolution)] ?? TOOLTIP_FORMAT_BY_RESOLUTION.day;
+	return (timestamp) => new Date(timestamp).toLocaleString(void 0, format);
+};
+const identity = (label) => label;
+const byBucket = (format) => (bucket) => typeof bucket === "string" ? bucket : format(Number(bucket));
+const bucketAccessor = (d) => d?.label || d?.date;
+/**
+* The buckets the band axis can put a tick on.
+*
+* Built from the accessor visx is given, over the same series in the same order,
+* so that a tick value is a key the scale actually holds; `scaleBand` returns
+* `undefined` for one it does not, which parks the tick at the origin. Null
+* rather than a partial list when any bucket is labelled instead of dated.
+*
+* @param data             - Every series handed to the chart.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+* @return Bucket dates in axis order, or null if the axis cannot be ticked by date.
+*/
+const getBandDomain = (data, isSeriesRendered) => {
+	const registry = {};
+	for (const series of data) {
+		if (series.options?.type === "comparison" || !isSeriesRendered(series)) continue;
+		registry[series.label] = series;
+	}
+	const byTimestamp = /* @__PURE__ */ new Map();
+	for (const key of Object.keys(registry)) for (const point of registry[key].data) {
+		const bucket = bucketAccessor(point);
+		if (!(bucket instanceof Date)) return null;
+		if (!byTimestamp.has(bucket.getTime())) byTimestamp.set(bucket.getTime(), bucket);
+	}
+	return byTimestamp.size ? [...byTimestamp.values()] : null;
 };
 /**
 * Get the group padding of a scale.
@@ -4015,12 +4182,26 @@ const getGroupPadding = (scale) => {
 /**
 * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.
 *
-* @param data       - The data to be displayed in the chart.
-* @param horizontal - Whether the chart is horizontal or vertical.
-* @param options    - The options for the chart.
+* @param data             - The data to be displayed in the chart.
+* @param horizontal       - Whether the chart is horizontal or vertical.
+* @param options          - The options for the chart.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
 * @return The merged options for the chart.
 */
-function useBarChartOptions(data, horizontal, options = {}) {
+function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
+	const stableOptions = useDeepMemo(options);
+	const axisConfig = (0, react.useMemo)(() => {
+		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, ...xAxisOptions } = stableOptions.axis?.x || {};
+		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, ...yAxisOptions } = stableOptions.axis?.y || {};
+		return {
+			xLabelOverflow,
+			yLabelOverflow,
+			xAxisOptions,
+			yAxisOptions,
+			tickResolution: horizontal ? yTickResolution : xTickResolution
+		};
+	}, [stableOptions, horizontal]);
+	const { tickResolution } = axisConfig;
 	const defaultOptions = (0, react.useMemo)(() => {
 		const bandScale = {
 			type: "band",
@@ -4032,19 +4213,26 @@ function useBarChartOptions(data, horizontal, options = {}) {
 			nice: true,
 			zero: false
 		};
-		const labelFormatter = data?.[0]?.data?.[0]?.label ? (label) => label : formatDateTick;
+		const hasLabels = Boolean(data?.[0]?.data?.[0]?.label);
+		const timeTickFormatter = hasLabels ? null : getFormatter(data, tickResolution);
+		const labelFormatter = timeTickFormatter ? byBucket(timeTickFormatter) : identity;
+		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution));
 		const valueFormatter = _automattic_number_formatters.formatNumberCompact;
-		const labelAccessor = (d) => d?.label || d?.date;
+		const bandDomain = timeTickFormatter ? getBandDomain(data, isSeriesRendered) : null;
 		const valueAccessor = (d) => {
 			const enhancedPoint = d;
 			return enhancedPoint?.visualValue !== void 0 ? enhancedPoint.visualValue : d?.value;
 		};
 		return {
+			timeAxis: bandDomain && timeTickFormatter && {
+				domain: bandDomain,
+				tickFormatter: timeTickFormatter
+			},
 			vertical: {
 				xTickFormat: labelFormatter,
 				yTickFormat: valueFormatter,
-				tooltipLabelFormatter: labelFormatter,
-				xAccessor: labelAccessor,
+				tooltipLabelFormatter: tooltipDatumFormatter,
+				xAccessor: bucketAccessor,
 				yAccessor: valueAccessor,
 				gridVisibility: "x",
 				xScale: bandScale,
@@ -4053,20 +4241,24 @@ function useBarChartOptions(data, horizontal, options = {}) {
 			horizontal: {
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
-				tooltipLabelFormatter: labelFormatter,
+				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: valueAccessor,
-				yAccessor: labelAccessor,
+				yAccessor: bucketAccessor,
 				gridVisibility: "y",
 				xScale: linearScale,
 				yScale: bandScale
 			}
 		};
-	}, [data]);
+	}, [
+		data,
+		tickResolution,
+		isSeriesRendered
+	]);
 	return (0, react.useMemo)(() => {
 		const { xTickFormat, yTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
 		let valueScaleDomainOverride = {};
 		if (data.some((s) => s.options?.type === "comparison")) {
-			if (!(!horizontal ? options.yScale?.domain : options.xScale?.domain)) {
+			if (!(!horizontal ? stableOptions.yScale?.domain : stableOptions.xScale?.domain)) {
 				const allValues = [];
 				data.forEach((series) => {
 					series.data.forEach((d) => {
@@ -4080,17 +4272,20 @@ function useBarChartOptions(data, horizontal, options = {}) {
 		}
 		const xScale = {
 			...baseXScale,
-			...options.xScale || {},
+			...stableOptions.xScale || {},
 			...horizontal ? valueScaleDomainOverride : {}
 		};
 		const yScale = {
 			...baseYScale,
-			...options.yScale || {},
+			...stableOptions.yScale || {},
 			...!horizontal ? valueScaleDomainOverride : {}
 		};
-		const providedToolTipLabelFormatter = horizontal ? options.axis?.y?.tickFormat : options.axis?.x?.tickFormat;
-		const { labelOverflow: xLabelOverflow, ...xAxisOptions } = options.axis?.x || {};
-		const { labelOverflow: yLabelOverflow, ...yAxisOptions } = options.axis?.y || {};
+		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
+		const providedToolTipLabelFormatter = horizontal ? yAxisOptions.tickFormat : xAxisOptions.tickFormat;
+		const { timeAxis } = defaultOptions;
+		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
+		const bandTickValues = timeAxis && !dateAxisOptions.tickFormat ? getBandTickValues(timeAxis.domain, timeAxis.tickFormatter, dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS) : null;
+		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 		return {
 			gridVisibility,
 			xScale,
@@ -4102,15 +4297,17 @@ function useBarChartOptions(data, horizontal, options = {}) {
 			axis: {
 				x: {
 					orientation: "bottom",
-					numTicks: 4,
+					numTicks: DEFAULT_NUM_TICKS,
 					tickFormat: xTickFormat,
+					...horizontal ? {} : dateAxisTickValues,
 					...xLabelOverflow === "ellipsis" ? { tickComponent: TruncatedXTickComponent } : {},
 					...xAxisOptions
 				},
 				y: {
 					orientation: "left",
-					numTicks: 4,
+					numTicks: DEFAULT_NUM_TICKS,
 					tickFormat: yTickFormat,
+					...horizontal ? dateAxisTickValues : {},
 					...yLabelOverflow === "ellipsis" ? { tickComponent: TruncatedYTickComponent } : {},
 					...yAxisOptions
 				}
@@ -4120,7 +4317,8 @@ function useBarChartOptions(data, horizontal, options = {}) {
 		};
 	}, [
 		defaultOptions,
-		options,
+		axisConfig,
+		stableOptions,
 		horizontal,
 		data
 	]);
@@ -4282,7 +4480,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
-	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const isSeriesRendered = (0, react.useCallback)((series) => !chartId || !legendInteractive || isSeriesVisible(chartId, series.label), [
+		chartId,
+		legendInteractive,
+		isSeriesVisible
+	]);
+	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = (0, react.useRef)(null);
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "BarChart");
@@ -4301,24 +4505,11 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartRef,
 		totalPoints: Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length
 	});
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const seriesWithVisibility = (0, react.useMemo)(() => {
-		if (!chartId || !legendInteractive) return dataWithVisibleZeros.map((series, index) => ({
-			series,
-			index,
-			isVisible: true
-		}));
-		return dataWithVisibleZeros.map((series, index) => ({
-			series,
-			index,
-			isVisible: isSeriesVisible(chartId, series.label)
-		}));
-	}, [
-		dataWithVisibleZeros,
-		chartId,
-		isSeriesVisible,
-		legendInteractive
-	]);
+	const seriesWithVisibility = (0, react.useMemo)(() => dataWithVisibleZeros.map((series, index) => ({
+		series,
+		index,
+		isVisible: isSeriesRendered(series)
+	})), [dataWithVisibleZeros, isSeriesRendered]);
 	const allSeriesHidden = (0, react.useMemo)(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);