@automattic/charts 4.2.0 → 4.3.0

package/dist/index.cjs

@@ -46,6 +46,7 @@ let _visx_gradient = require("@visx/gradient");
 let _visx_curve = require("@visx/curve");
 let _visx_responsive = require("@visx/responsive");
 let _visx_annotation = require("@visx/annotation");
+let _visx_vendor_d3_array = require("@visx/vendor/d3-array");
 let _visx_pattern = require("@visx/pattern");
 let react_google_charts = require("react-google-charts");
 let dompurify = require("dompurify");
@@ -1076,7 +1077,7 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		return getChartColor(index, colorCache);
 	}, [colorCache, groupToColorMap]);
 	const getElementStyles = (0, react.useCallback)(({ data, index, overrideColor, legendShape }) => {
-		const isSeriesData = data && typeof data === "object" && "data" in data && "options" in data;
+		const isSeriesData = data && typeof data === "object" && "data" in data;
 		const isPointPercentageData = data && typeof data === "object" && "value" in data && typeof data.value === "number" && !("data" in data);
 		return {
 			color: resolveColor({
@@ -1457,8 +1458,9 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		const allDataPoints = data.flatMap((series) => series.data);
 		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));
+		const values = allDataPoints.map((d) => d.value).filter((value) => typeof value === "number" && Number.isFinite(value));
+		const minY = values.length ? Math.min(...values) : 0;
+		const maxY = values.length ? Math.max(...values) : 1;
 		const yScale = (0, _visx_scale.createScale)({
 			...options.yScale,
 			domain: options.yScale?.domain ?? [minY, maxY],
@@ -1793,23 +1795,6 @@ function valueOrIdentityString(_) {
 	return String(valueOrIdentity(_));
 }
 //#endregion
-//#region src/components/legend/utils/label-transform-factory.ts
-/**
-* Returns a function which takes a Datum and index as input, and returns a formatted label object.
-* @param {object}                            root0             - The object to return the value of.
-* @param {AnyD3Scale}                        root0.scale       - The scale to use.
-* @param {LabelFormatter<ScaleInput<Scale>>} root0.labelFormat - The label format to use.
-* @return {ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>>} The label transform factory.
-*/
-function labelTransformFactory({ scale, labelFormat }) {
-	return (d, i) => ({
-		datum: d,
-		index: i,
-		text: `${labelFormat(d, i)}`,
-		value: scale(d)
-	});
-}
-//#endregion
 //#region src/components/legend/private/base-legend.module.scss
 var base_legend_module_default = {
 	"legend": "a8ccharts-04TogW-legend",
@@ -1851,7 +1836,7 @@ const getLegendItemAriaLabel = (text, value, visible, interactive) => {
 	if (visible) return;
 	return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
 };
-const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform = labelTransformFactory, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
+const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
 	const { margin: itemMargin = "0", flexDirection: itemDirection = "row" } = itemStyles ?? {};
 	const { justifyContent: labelJustifyContent = "flex-start", flex: labelFlex = "0 0 auto", margin: labelMargin = "0 4px", maxWidth, textOverflow = "wrap" } = labelStyles ?? {};
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
@@ -1859,11 +1844,17 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 	const context = (0, react.useContext)(GlobalChartsContext);
 	const chartInstanceContext = (0, react.useContext)(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const domain = items.map((item) => item.label);
 	const legendScale = (0, _visx_scale.scaleOrdinal)({
-		domain: items.map((item) => item.label),
+		domain,
 		range: items.map((item) => item.color)
 	});
-	const domain = legendScale.domain();
+	const defaultLabelTransform = (0, react.useCallback)(({ labelFormat: format }) => (datum, index) => ({
+		datum,
+		index,
+		text: String(format(datum, index)),
+		value: items[index].color
+	}), [items]);
 	const getShapeStyle = (0, react.useCallback)(({ index }) => items[index]?.shapeStyle, [items]);
 	const handleLegendClick = (0, react.useCallback)((seriesLabels) => {
 		if (interactive && chartId && context) {
@@ -1884,24 +1875,26 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 		chartInstanceContext,
 		context
 	]);
-	const createClickHandler = (0, react.useCallback)((seriesLabels) => {
-		if (!interactive) return;
+	const createClickHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
+		if (!itemInteractive) return;
 		return () => handleLegendClick(seriesLabels);
-	}, [interactive, handleLegendClick]);
-	const createKeyDownHandler = (0, react.useCallback)((seriesLabels) => {
-		if (!interactive) return;
+	}, [handleLegendClick]);
+	const createKeyDownHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
+		if (!itemInteractive) return;
 		return (event) => {
 			if (event.key === "Enter" || event.key === " ") {
 				event.preventDefault();
 				handleLegendClick(seriesLabels);
 			}
 		};
-	}, [interactive, handleLegendClick]);
+	}, [handleLegendClick]);
 	const flexAlignment = ALIGNMENT_TO_FLEX[alignment] ?? "center";
+	const staticItemRole = interactive ? void 0 : "listitem";
 	return render ? render(items) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_legend.LegendOrdinal, {
 		scale: legendScale,
+		domain,
 		labelFormat,
-		labelTransform,
+		labelTransform: labelTransform ?? defaultLabelTransform,
 		children: (labels) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
 			ref,
 			direction: orientation === "vertical" ? "column" : "row",
@@ -1915,19 +1908,20 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
 				const seriesLabels = matchedItem?.seriesLabels?.length ? matchedItem.seriesLabels : [label.text];
-				const visible = isSeriesVisible(seriesLabels[0]);
-				const handleClick = createClickHandler(seriesLabels);
-				const handleKeyDown = createKeyDownHandler(seriesLabels);
+				const visible = matchedItem?.interactive === false || isSeriesVisible(seriesLabels[0]);
+				const itemInteractive = interactive && matchedItem?.interactive !== false;
+				const handleClick = createClickHandler(seriesLabels, itemInteractive);
+				const handleKeyDown = createKeyDownHandler(seriesLabels, itemInteractive);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_legend.LegendItem, {
-					className: (0, clsx.default)("visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
+					className: (0, clsx.default)("visx-legend-item", base_legend_module_default["legend-item"], itemInteractive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
 					margin: itemMargin,
 					flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
 					onClick: handleClick,
 					onKeyDown: handleKeyDown,
-					role: interactive ? "button" : "listitem",
-					tabIndex: interactive ? 0 : void 0,
-					"aria-pressed": interactive ? visible : void 0,
-					"aria-label": getLegendItemAriaLabel(label.text, matchedItem?.value, visible, interactive),
+					role: itemInteractive ? "button" : staticItemRole,
+					tabIndex: itemInteractive ? 0 : void 0,
+					"aria-pressed": itemInteractive ? visible : void 0,
+					"aria-label": getLegendItemAriaLabel(label.text, matchedItem?.value, visible, itemInteractive),
 					children: [items[i]?.renderGlyph ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 						width: items[i]?.glyphSize * 2,
 						height: items[i]?.glyphSize * 2,
@@ -2129,6 +2123,32 @@ function processSeriesData(seriesData, getElementStyles, showValues, withGlyph,
 	});
 }
 /**
+* Builds the static item that names the comparison overlay, styled like its first series.
+* Skipped when a comparison series already has an item of its own, so nothing is listed twice.
+* @param seriesData       - The series data to search for a comparison series
+* @param items            - The legend items already built from the series
+* @param label            - The item label
+* @param getElementStyles - Function to get element styles
+* @param legendShape      - The shape type for legend items (string literal or React component)
+* @return The legend item, or null when it would add nothing
+*/
+function buildComparisonLegendItem(seriesData, items, label, getElementStyles, legendShape) {
+	const itemLabels = new Set(items.map((item) => item.label));
+	const index = seriesData.findIndex((series) => series.options?.type === "comparison" && !itemLabels.has(series.label));
+	if (index === -1) return null;
+	const { color, shapeStyles } = getElementStyles({
+		data: seriesData[index],
+		index,
+		legendShape
+	});
+	return {
+		label,
+		color,
+		shapeStyle: shapeStyles,
+		interactive: false
+	};
+}
+/**
 * Processes point data into legend items
 * @param pointData          - The point data to process
 * @param getElementStyles   - Function to get element styles
@@ -2164,11 +2184,16 @@ function processPointData(pointData, getElementStyles, showValues, legendValueDi
 * @return Array of legend items ready for display
 */
 function useChartLegendItems(data, options = {}, legendShape) {
-	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, renderGlyph } = options;
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, renderGlyph } = options;
 	const { getElementStyles } = useGlobalChartsContext();
 	return (0, react.useMemo)(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
-		if ("data" in data[0]) return processSeriesData(data, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+		if ("data" in data[0]) {
+			const seriesData = data;
+			const items = processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+			const comparison = comparisonItem ? buildComparisonLegendItem(seriesData, items, typeof comparisonItem === "string" ? comparisonItem : (0, _wordpress_i18n.__)("Comparison period", "jetpack-charts"), getElementStyles, legendShape) : null;
+			return comparison ? [...items, comparison] : items;
+		}
 		return processPointData(data, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape);
 	}, [
 		data,
@@ -2178,6 +2203,7 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		withGlyph,
 		glyphSize,
 		collapseGroups,
+		comparisonItem,
 		renderGlyph,
 		legendShape
 	]);
@@ -2641,7 +2667,7 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tooltipContext?.showTooltip({
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
-					index: tooltipItem.seriesIndex
+					index: tooltipItem.dataPointIndex
 				});
 			}
 		}
@@ -2964,6 +2990,31 @@ const DefaultGlyph = (props) => {
 	});
 };
 //#endregion
+//#region src/charts/private/readings.ts
+/**
+* Whether a value is a reading a scale can place.
+*
+* @param value - The point's value.
+* @return True for a finite number.
+*/
+const isReading = (value) => typeof value === "number" && Number.isFinite(value);
+/**
+* Whether a data point's value cannot be drawn.
+*
+* @param value                - The point's value.
+* @param options              - Validation options.
+* @param options.allowMissing - Whether `null` is a bucket with no reading rather than a fault.
+* @return True when the value is invalid.
+*/
+const isInvalidReading = (value, { allowMissing }) => value === null ? !allowMissing : value === void 0 || isNaN(value);
+/**
+* Formats a reading for a tooltip.
+*
+* @param value - The reading, or null when the bucket has none.
+* @return The formatted value.
+*/
+const formatReading = (value) => value == null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(value);
+//#endregion
 //#region src/charts/private/center/center.module.scss
 var center_module_default = { "center": "a8ccharts-w3qxlG-center" };
 //#endregion
@@ -3336,6 +3387,54 @@ const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoo
 	};
 };
 //#endregion
+//#region src/charts/private/whole-number-ticks.tsx
+/**
+* Whether every reading in the series is a whole number.
+*
+* @param series - The series visx renders.
+* @return True when at least one reading exists and none has a fraction.
+*/
+const hasOnlyWholeNumbers = (series) => {
+	let sawReading = false;
+	for (const { data } of series) for (const point of data) {
+		const value = point?.value;
+		if (!isReading(value)) continue;
+		if (!Number.isInteger(value)) return false;
+		sawReading = true;
+	}
+	return sawReading;
+};
+/**
+* The scale's ticks with the fractional ones dropped.
+*
+* d3 steps by 1, 2 or 5 times a power of ten, so every whole number inside the domain is one of its ticks.
+*
+* @param scale - The value scale visx built.
+* @param count - Ticks to ask the scale for; undefined uses the scale's own default, as visx does.
+* @return Whole-number ticks, or undefined when visx's own ticks need no change.
+*/
+const getWholeNumberTickValues = (scale, count) => {
+	const ticks = scale?.ticks?.(count);
+	if (!ticks?.every((tick) => typeof tick === "number")) return;
+	const whole = ticks.filter((tick) => Number.isInteger(tick));
+	return whole.length > 1 && whole.length < ticks.length ? whole : void 0;
+};
+/**
+* Hands its children the whole-number ticks of the chart's value scale.
+*
+* @param props          - Component props.
+* @param props.axis     - Which scale carries the values.
+* @param props.numTicks - Ticks to ask the scale for.
+* @param props.enabled  - Whether the plotted values are all whole numbers and the caller pinned neither the ticks nor the value domain.
+* @param props.children - Renders the axis and grid with the tick values.
+* @return The rendered children.
+*/
+const WholeNumberTicks = ({ axis, numTicks, enabled, children }) => {
+	const { xScale, yScale } = (0, react.useContext)(_visx_xychart.DataContext);
+	const tickValues = enabled ? getWholeNumberTickValues(axis === "x" ? xScale : yScale, numTicks) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(tickValues) });
+};
+//#endregion
 //#region src/charts/private/with-responsive/with-responsive.module.scss
 var with_responsive_module_default = {
 	"container": "a8ccharts-sP1gHa-container",
@@ -4002,11 +4101,15 @@ const toNumber$1 = (val) => {
 const LineChartGlyph = ({ data, index, color, glyphStyle, renderGlyph, accessors, position }) => {
 	const { xScale, yScale } = (0, react.useContext)(_visx_xychart.DataContext) || {};
 	if (!xScale || !yScale) return null;
-	if (data.data.length === 0) return null;
-	const point = position === "start" ? data.data[0] : data.data[data.data.length - 1];
+	const hasFiniteY = (datum) => {
+		const scaledY = yScale(accessors.yAccessor(datum));
+		return typeof scaledY === "number" && Number.isFinite(scaledY);
+	};
+	const point = position === "start" ? data.data.find(hasFiniteY) : data.data.findLast(hasFiniteY);
+	if (!point) return null;
 	const x = xScale(accessors.xAccessor(point));
 	const y = yScale(accessors.yAccessor(point));
-	if (typeof x !== "number" || typeof y !== "number") return null;
+	if (typeof x !== "number" || typeof y !== "number" || !Number.isFinite(x) || !Number.isFinite(y)) return null;
 	const size = Math.max(0, toNumber$1(glyphStyle?.radius) ?? 4);
 	return renderGlyph({
 		key: `${position}-glyph-${data.label}`,
@@ -4021,6 +4124,106 @@ const LineChartGlyph = ({ data, index, color, glyphStyle, renderGlyph, accessors
 	});
 };
 //#endregion
+//#region src/charts/line-chart/private/nearest-pointer-events.tsx
+/**
+* Find the datum nearest a pointer along x, in one series sorted by x.
+*
+* @param data      - The series' registered data, in ascending x order.
+* @param xAccessor - Reads a datum's x value.
+* @param xScale    - The chart's x scale.
+* @param x         - Pointer x in SVG coordinates.
+* @return Index of the nearest datum and its distance, or index -1 when none has a position.
+*/
+function nearestByX(data, xAccessor, xScale, x) {
+	return (typeof xScale.invert === "function" ? [(0, _visx_vendor_d3_array.bisector)(xAccessor).left(data, xScale.invert(x))].flatMap((index) => [index - 1, index]) : data.map((_datum, index) => index)).filter((index) => index >= 0 && index < data.length).reduce((best, index) => {
+		const distance = Math.abs(Number(xScale(xAccessor(data[index]))) - x);
+		return distance < best.distance ? {
+			index,
+			distance
+		} : best;
+	}, {
+		index: -1,
+		distance: Infinity
+	});
+}
+/**
+* Pick the candidate to report: the closest placed reading, else the closest bucket with no reading along x.
+*
+* @param candidates - One candidate per series.
+* @return The chosen candidate's params, or undefined when there are none.
+*/
+function pickNearest(candidates) {
+	const placed = candidates.map(({ params }) => params).filter((params) => Number.isFinite(params.distanceY));
+	const missing = candidates.filter(({ isMissing }) => isMissing).map(({ params }) => params);
+	const distance = (params) => placed.length ? Math.hypot(params.distanceX ?? 0, params.distanceY ?? 0) : params.distanceX ?? 0;
+	return (placed.length ? placed : missing).reduce((best, params) => !best || distance(params) < distance(best) ? params : best, void 0);
+}
+/**
+* Report pointer events at the nearest datum, including a bucket with no reading.
+*
+* visx's own nearest search measures y distance too, which is NaN for a null value, so a pointer
+* over a bucket where no series has a reading fires no event at all.
+*
+* @param props               - Handlers to call.
+* @param props.onPointerDown - Receives the nearest datum on pointer down.
+* @param props.onPointerMove - Receives the nearest datum on pointer move.
+* @param props.onPointerUp   - Receives the nearest datum on pointer up.
+* @return No visual content.
+*/
+function NearestPointerEvents({ onPointerDown, onPointerMove, onPointerUp }) {
+	const { xScale, yScale, dataRegistry } = (0, react.useContext)(_visx_xychart.DataContext);
+	const findNearest = (0, react.useCallback)((params) => {
+		const point = params?.svgPoint;
+		if (!point || !xScale || !yScale || !dataRegistry) return;
+		const candidates = [];
+		for (const key of dataRegistry.keys()) {
+			const entry = dataRegistry.get(key);
+			if (!entry) continue;
+			const { index, distance } = nearestByX(entry.data, entry.xAccessor, xScale, point.x);
+			if (index < 0) continue;
+			const datum = entry.data[index];
+			const value = entry.yAccessor(datum);
+			candidates.push({
+				params: {
+					event: params.event,
+					svgPoint: point,
+					key,
+					datum,
+					index,
+					distanceX: distance,
+					distanceY: Math.abs(Number(yScale(value)) - point.y)
+				},
+				isMissing: value == null
+			});
+		}
+		return pickNearest(candidates);
+	}, [
+		xScale,
+		yScale,
+		dataRegistry
+	]);
+	const handlers = (0, react.useMemo)(() => {
+		const report = (handler) => handler && ((params) => {
+			const nearest = findNearest(params);
+			if (nearest) handler(nearest);
+		});
+		return {
+			pointerdown: report(onPointerDown),
+			pointermove: report(onPointerMove),
+			pointerup: report(onPointerUp)
+		};
+	}, [
+		findNearest,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp
+	]);
+	(0, _visx_xychart.useEventEmitter)("pointerdown", handlers.pointerdown);
+	(0, _visx_xychart.useEventEmitter)("pointermove", handlers.pointermove);
+	(0, _visx_xychart.useEventEmitter)("pointerup", handlers.pointerup);
+	return null;
+}
+//#endregion
 //#region src/charts/line-chart/line-chart.tsx
 const defaultRenderGlyph = (props) => {
 	return /* @__PURE__ */ (0, react.createElement)(DefaultGlyph, {
@@ -4064,8 +4267,13 @@ const renderDefaultTooltip = (params, contentStyle) => {
 	if (!nearestDatum) return null;
 	const tooltipPoints = Object.entries(tooltipData?.datumByKey || {}).map(([key, { datum }]) => ({
 		key,
-		value: datum.value
-	})).sort((a, b) => b.value - a.value);
+		value: datum.value ?? null
+	})).sort((a, b) => {
+		if (a.value === null && b.value === null) return 0;
+		if (a.value === null) return 1;
+		if (b.value === null) return -1;
+		return b.value - a.value;
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: line_chart_module_default["line-chart__tooltip"],
 		style: contentStyle,
@@ -4085,16 +4293,23 @@ const renderDefaultTooltip = (params, contentStyle) => {
 				children: [point.key, ":"]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: line_chart_module_default["line-chart__tooltip-value"],
-				children: (0, _automattic_number_formatters.formatNumber)(point.value)
+				children: formatReading(point.value)
 			})]
 		}, point.key))]
 	});
 };
 const validateData$4 = (data) => {
-	if (!data?.length) return "No data available";
-	if (data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || "date" in point && point.date && isNaN(point.date.getTime())))) return "Invalid data";
+	if (!data?.length) return (0, _wordpress_i18n.__)("No data available", "jetpack-charts");
+	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: true }) || "date" in point && point.date && isNaN(point.date.getTime())))) return (0, _wordpress_i18n.__)("Invalid data", "jetpack-charts");
 	return null;
 };
+const getFallbackYDomain = (readingExtent, isLogScale) => {
+	const emptyDomain = isLogScale ? [1, 10] : [0, 1];
+	if (!readingExtent) return emptyDomain;
+	const [min, max] = readingExtent;
+	if (min !== max || isLogScale) return;
+	return min === 0 ? emptyDomain : [Math.min(0, min), Math.max(0, max)];
+};
 const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	const context = (0, react.useContext)(_visx_xychart.DataContext);
 	(0, react.useImperativeHandle)(chartRef, () => ({
@@ -4121,6 +4336,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, tooltipPlacement, tooltipStyle, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
+	const legendComparisonItem = legend.comparisonItem ?? false;
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const formatting = useChartFormatting();
@@ -4167,19 +4383,32 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const allSeriesHidden = (0, react.useMemo)(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
-	const stableYDomain = (0, react.useMemo)(() => {
-		if (rescaleYOnVisibilityChange) return;
+	const yDomain = (0, react.useMemo)(() => {
+		const includeZero = options?.yScale?.zero === true && (0, _visx_scale.scaleCanBeZeroed)({ type: options.yScale.type ?? "linear" });
+		if (rescaleYOnVisibilityChange && !includeZero) return;
 		let min = Infinity;
 		let max = -Infinity;
-		for (const series of dataSorted) for (const point of series.data ?? []) {
-			const value = point?.value;
-			if (typeof value === "number" && Number.isFinite(value)) {
-				min = Math.min(min, value);
-				max = Math.max(max, value);
+		for (const series of dataSorted) {
+			if (rescaleYOnVisibilityChange && !isSeriesVisible(series.label)) continue;
+			for (const point of series.data ?? []) {
+				const value = point?.value;
+				if (isReading(value)) {
+					min = Math.min(min, value);
+					max = Math.max(max, value);
+				}
 			}
 		}
+		if (includeZero) {
+			if (min === Infinity) return;
+			return max === 0 && min === 0 ? [0, 1] : [Math.min(0, min), Math.max(0, max)];
+		}
 		return min < max ? [min, max] : void 0;
-	}, [rescaleYOnVisibilityChange, dataSorted]);
+	}, [
+		rescaleYOnVisibilityChange,
+		dataSorted,
+		isSeriesVisible,
+		options?.yScale
+	]);
 	const activateSelectedPoint = (0, react.useCallback)((index) => {
 		const series = dataSorted[0];
 		const datum = series?.data[index];
@@ -4199,7 +4428,24 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		onActivate: activateSelectedPoint,
 		preventTooltipScroll: tooltipPlacement === "below-axis"
 	});
+	const visibleReadingExtent = (0, react.useMemo)(() => {
+		let min = Infinity;
+		let max = -Infinity;
+		for (const series of dataSorted) {
+			if (!isSeriesVisible(series.label)) continue;
+			for (const point of series.data) {
+				const value = point?.value;
+				if (isReading(value)) {
+					min = Math.min(min, value);
+					max = Math.max(max, value);
+				}
+			}
+		}
+		return min <= max ? [min, max] : void 0;
+	}, [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [dataSorted, isSeriesVisible]);
 	const chartOptions = (0, react.useMemo)(() => {
+		const fallbackYDomain = getFallbackYDomain(visibleReadingExtent, options?.yScale?.type === "log");
 		return {
 			axis: {
 				x: buildTimeAxisOptions({
@@ -4228,7 +4474,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 				type: "linear",
 				nice: true,
 				zero: false,
-				...stableYDomain ? { domain: stableYDomain } : {},
+				...fallbackYDomain ? { domain: fallbackYDomain } : {},
+				...yDomain ? { domain: yDomain } : {},
 				...options?.yScale
 			}
 		};
@@ -4237,7 +4484,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		dataSorted,
 		width,
 		zoom.domain,
-		stableYDomain,
+		yDomain,
+		visibleReadingExtent,
 		formatting,
 		isSeriesVisible
 	]);
@@ -4272,11 +4520,13 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		withGlyph: withLegendGlyph,
 		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
 		collapseGroups: legendCollapseGroups,
+		comparisonItem: legendComparisonItem,
 		renderGlyph
 	}), [
 		withLegendGlyph,
 		glyphStyle?.radius,
 		legendCollapseGroups,
+		legendComparisonItem,
 		renderGlyph
 	]), legendShape);
 	const chartMetadata = (0, react.useMemo)(() => ({
@@ -4388,18 +4638,26 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 							},
 							xScale: chartOptions.xScale,
 							yScale: chartOptions.yScale,
-							onPointerDown: zoom.handlers.onPointerDown,
-							onPointerUp: zoom.handlers.onPointerUp,
-							onPointerMove: zoom.handlers.onPointerMove,
 							onPointerOut,
-							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
-									columns: false,
-									numTicks: 4
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NearestPointerEvents, { ...zoom.handlers }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
+									axis: "y",
+									numTicks: chartOptions.axis.y.numTicks,
+									enabled: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain,
+									children: (tickValues) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+										!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+											columns: false,
+											numTicks: chartOptions.axis.y.numTicks,
+											tickValues: tickValues ?? chartOptions.axis.y.tickValues
+										}),
+										!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
+										!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+											...chartOptions.axis.y,
+											...tickValues ? { tickValues } : {}
+										})
+									] })
 								}),
-								!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
-								!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
 								allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -4540,7 +4798,7 @@ var area_chart_module_default = {
 const validateData$3 = (data) => {
 	if (!data?.length) return (0, _wordpress_i18n.__)("No data available", "jetpack-charts");
 	if (data.some((series) => !series.data?.length)) return (0, _wordpress_i18n.__)("No data available", "jetpack-charts");
-	if (data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || "date" in point && point.date && isNaN(point.date.getTime())))) return (0, _wordpress_i18n.__)("Invalid data", "jetpack-charts");
+	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: false }) || "date" in point && point.date && isNaN(point.date.getTime())))) return (0, _wordpress_i18n.__)("Invalid data", "jetpack-charts");
 	return null;
 };
 //#endregion
@@ -4656,6 +4914,12 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}));
 	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = (0, react.useMemo)(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
+	const hasWholeNumberValues = (0, react.useMemo)(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [
+		dataSorted,
+		isSeriesVisible,
+		stacked,
+		stackOffset
+	]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -4748,8 +5012,9 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
 		withGlyph: false,
 		glyphSize: 0,
-		collapseGroups: legend.collapseGroups ?? false
-	}), [legend.collapseGroups]), legendShape);
+		collapseGroups: legend.collapseGroups ?? false,
+		comparisonItem: legend.comparisonItem ?? false
+	}), [legend.collapseGroups, legend.comparisonItem]), legendShape);
 	const chartMetadata = (0, react.useMemo)(() => ({
 		stacked,
 		stackOffset,
@@ -4899,12 +5164,23 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 							onPointerOut,
 							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
-									columns: false,
-									numTicks: 4
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
+									axis: "y",
+									numTicks: chartOptions.axis.y.numTicks,
+									enabled: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain,
+									children: (tickValues) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+										!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+											columns: false,
+											numTicks: chartOptions.axis.y.numTicks,
+											tickValues: tickValues ?? chartOptions.axis.y.tickValues
+										}),
+										!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
+										!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+											...chartOptions.axis.y,
+											...tickValues ? { tickValues } : {}
+										})
+									] })
 								}),
-								!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
-								!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
 								allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -5093,6 +5369,65 @@ const createTruncatedTickComponent = (axis) => (props) => {
 const TruncatedXTickComponent = createTruncatedTickComponent("x");
 const TruncatedYTickComponent = createTruncatedTickComponent("y");
 //#endregion
+//#region src/charts/bar-chart/private/value-domain.ts
+/** Domain for a value axis that has nothing to scale, so its ticks still read 0 to 1. */
+const EMPTY_DOMAIN = [0, 1];
+/**
+* The value a bar is drawn at, preferring `visualValue` so a zero still shows a sliver.
+*
+* A missing reading is NaN, not null: `ComparisonBars` coerces the value with `Number()`,
+* which turns null into 0 and would draw a comparison shadow at the baseline.
+*
+* @param point - A data point handed to visx.
+* @return The bar value, or NaN when the bucket has no reading.
+*/
+const getBarValue = (point) => {
+	const enhanced = point;
+	return (enhanced?.visualValue !== void 0 ? enhanced.visualValue : point?.value) ?? NaN;
+};
+/**
+* Whether visx renders a bar for a point.
+*
+* @param point - A data point handed to visx.
+* @return True when the point has a finite bar value.
+*/
+const isBarRendered = (point) => Number.isFinite(getBarValue(point));
+/**
+* How many bars visx renders for a list of points.
+*
+* @param points - Data points handed to visx.
+* @return The number of points that get a bar.
+*/
+const countRenderedBars = (points) => points.filter(isBarRendered).length;
+/**
+* An explicit domain for the value scale, or null to let visx fit one to the data.
+*
+* Zero goes into the domain here rather than through the scale's `zero` flag: visx applies
+* `nice` before `zero`, which would leave the axis topping out at a raw maximum.
+*
+* @param data             - Every series handed to the chart.
+* @param includeZero      - Whether the domain must span zero.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+* @return Value domain, or null when visx should fit its own.
+*/
+const getValueScaleDomain = (data, includeZero, isSeriesRendered) => {
+	let min = Infinity;
+	let max = -Infinity;
+	for (const series of data) {
+		if (!isSeriesRendered(series)) continue;
+		for (const point of series.data) {
+			const value = getBarValue(point);
+			if (!Number.isFinite(value)) continue;
+			min = Math.min(min, value);
+			max = Math.max(max, value);
+		}
+	}
+	if (min === Infinity) return [...EMPTY_DOMAIN];
+	if (min === max) return min === 0 ? [...EMPTY_DOMAIN] : [Math.min(0, min), Math.max(0, max)];
+	if (includeZero) return [Math.min(0, min), Math.max(0, max)];
+	return null;
+};
+//#endregion
 //#region src/charts/bar-chart/private/use-bar-chart-options.ts
 /** Outer padding of the category band scale (space at the chart edges). */
 const BASE_BAND_PADDING = .2;
@@ -5217,10 +5552,6 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution, formatting));
 		const valueFormatter = _automattic_number_formatters.formatNumberCompact;
 		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,
@@ -5231,7 +5562,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				yTickFormat: valueFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: bucketAccessor,
-				yAccessor: valueAccessor,
+				yAccessor: getBarValue,
 				gridVisibility: "x",
 				xScale: bandScale,
 				yScale: linearScale
@@ -5240,7 +5571,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
-				xAccessor: valueAccessor,
+				xAccessor: getBarValue,
 				yAccessor: bucketAccessor,
 				gridVisibility: "y",
 				xScale: linearScale,
@@ -5255,20 +5586,10 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 	]);
 	return (0, react.useMemo)(() => {
 		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, 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 ? stableOptions.yScale?.domain : stableOptions.xScale?.domain)) {
-				const allValues = [];
-				data.forEach((series) => {
-					series.data.forEach((d) => {
-						const enhanced = d;
-						const v = enhanced.visualValue !== void 0 ? enhanced.visualValue : d.value;
-						if (typeof v === "number" && Number.isFinite(v)) allValues.push(v);
-					});
-				});
-				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(0, ...allValues), Math.max(0, ...allValues)] };
-			}
-		}
+		const valueScaleOptions = horizontal ? stableOptions.xScale : stableOptions.yScale;
+		const includeZero = data.some((s) => s.options?.type === "comparison") || valueScaleOptions?.zero !== false;
+		const domain = valueScaleOptions?.domain ? null : getValueScaleDomain(data, includeZero, isSeriesRendered);
+		const valueScaleDomainOverride = domain ? { domain } : {};
 		const xScale = {
 			...baseXScale,
 			...stableOptions.xScale || {},
@@ -5319,7 +5640,8 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		axisConfig,
 		stableOptions,
 		horizontal,
-		data
+		data,
+		isSeriesRendered
 	]);
 }
 //#endregion
@@ -5484,6 +5806,8 @@ function BandHighlight({ visible, horizontal, onChange }) {
 		if (position === void 0 || !Number.isFinite(position)) return null;
 		return {
 			datum: nearest.datum,
+			key: nearest.key,
+			index: nearest.index,
 			x: horizontal ? margin?.left ?? 0 : position,
 			y: horizontal ? position : margin?.top ?? 0,
 			width: horizontal ? innerWidth : scale.bandwidth(),
@@ -5620,8 +5944,8 @@ function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointe
 //#endregion
 //#region src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (data) => {
-	if (!data?.length) return "No data available";
-	if (data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))))) return "Invalid data";
+	if (!data?.length) return (0, _wordpress_i18n.__)("No data available", "jetpack-charts");
+	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: true }) || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))))) return (0, _wordpress_i18n.__)("Invalid data", "jetpack-charts");
 	return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
@@ -5630,8 +5954,10 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
 });
 const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+	if (!withTooltips && (withBandHighlight || onBandHighlightChange)) warnOnce("bar-chart-band-highlight-without-tooltips", "BarChart: withBandHighlight and onBandHighlightChange require withTooltips.");
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
+	const legendComparisonItem = legend.comparisonItem ?? false;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
@@ -5642,10 +5968,21 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		enabled: showZeroValues,
 		valueAxisLength: horizontal ? width : height
 	});
-	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
+	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
+		collapseGroups: legendCollapseGroups,
+		comparisonItem: legendComparisonItem
+	}), [legendCollapseGroups, legendComparisonItem]));
 	const { getElementStyles } = useGlobalChartsContext();
 	const isSeriesRendered = (0, react.useCallback)((series) => isSeriesVisible(series.label), [isSeriesVisible]);
+	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
+	const valueAxis = horizontal ? chartOptions.axis.x : chartOptions.axis.y;
+	const callerValueDomain = horizontal ? options.xScale?.domain : options.yScale?.domain;
+	const wholeNumberTicksProps = {
+		axis: horizontal ? "x" : "y",
+		numTicks: valueAxis.numTicks,
+		enabled: hasWholeNumberValues && !valueAxis.tickValues && !callerValueDomain
+	};
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = (0, react.useRef)(null);
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "BarChart");
@@ -5778,15 +6115,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			const p = point;
 			return nearestDatum.label != null ? p.label === nearestDatum.label : !!nearestDatum.date && !!p.date && p.date.getTime() === nearestDatum.date.getTime();
 		});
-		if (comparisonEntry && comparisonDatum && comparisonDatum.value != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		if (comparisonEntry && comparisonDatum) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: bar_chart_module_default["bar-chart__tooltip"],
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: bar_chart_module_default["bar-chart__tooltip-header"],
 					children: categoryLabel
 				}),
-				renderTooltipRow(primaryKey, (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)),
-				renderTooltipRow(comparisonEntry.series.label, (0, _automattic_number_formatters.formatNumber)(comparisonDatum.value))
+				renderTooltipRow(primaryKey, formatReading(nearestDatum.value)),
+				renderTooltipRow(comparisonEntry.series.label, formatReading(comparisonDatum.value))
 			]
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -5794,7 +6131,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-header"],
 				children: primaryKey
-			}), renderTooltipRow(categoryLabel, (0, _automattic_number_formatters.formatNumber)(nearestDatum.value))]
+			}), renderTooltipRow(categoryLabel, formatReading(nearestDatum.value))]
 		});
 	}, [chartOptions.tooltip, comparisonEntries]);
 	const renderPattern = (0, react.useCallback)((index, color) => {
@@ -5845,15 +6182,15 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const createKeyboardHighlightStyle = (0, react.useCallback)(() => {
 		if (selectedIndex === void 0) return "";
 		const primaryCount = primaryEntries.length;
-		const maxDataPoints = Math.max(...primaryEntries.map((e) => e.series.data.length));
+		if (!primaryCount) return "";
 		const dataPointIndex = Math.floor(selectedIndex / primaryCount);
 		const seriesIndex = selectedIndex % primaryCount;
-		if (dataPointIndex >= maxDataPoints || seriesIndex >= primaryCount) return "";
 		const seriesData = primaryEntries[seriesIndex]?.series;
-		if (!seriesData || dataPointIndex >= seriesData.data.length) return "";
-		const actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;
+		const datum = seriesData?.data[dataPointIndex];
+		if (!seriesData || !datum || !isBarRendered(datum)) return "";
+		const domBarIndex = primaryEntries.slice(0, seriesIndex).reduce((count, { series }) => count + countRenderedBars(series.data), 0) + countRenderedBars(seriesData.data.slice(0, dataPointIndex));
 		return `
-			.bar-chart[data-chart-id="bar-chart-${chartId}"] .visx-bar-group .visx-bar:nth-child(${actualBarIndex + 1}) {
+			.bar-chart[data-chart-id="bar-chart-${chartId}"] .visx-bar-group .visx-bar:nth-child(${domBarIndex + 1}) {
 				stroke: #005fcc;
 				stroke-width: 2px;
 			}
@@ -5947,17 +6284,20 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									horizontal,
 									onChange: onBandHighlightChange
 								}),
-								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
-									columns: gridVisibility.includes("y"),
-									rows: false,
-									numTicks: 4,
-									tickValues: chartOptions.axis.x.tickValues
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
-									columns: false,
-									rows: gridVisibility.includes("x"),
-									numTicks: 4,
-									tickValues: chartOptions.axis.y.tickValues
-								})] }),
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
+									...wholeNumberTicksProps,
+									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+										columns: gridVisibility.includes("y"),
+										rows: false,
+										numTicks: chartOptions.axis.x.numTicks,
+										tickValues: (horizontal ? valueTicks : void 0) ?? chartOptions.axis.x.tickValues
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+										columns: false,
+										rows: gridVisibility.includes("x"),
+										numTicks: chartOptions.axis.y.numTicks,
+										tickValues: (horizontal ? void 0 : valueTicks) ?? chartOptions.axis.y.tickValues
+									})] })
+								}),
 								withPatterns && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({
 									data: seriesData,
 									index
@@ -6000,7 +6340,16 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									onPointerDown,
 									onPointerUp
 								}),
-								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y })] }),
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
+									...wholeNumberTicksProps,
+									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+										...chartOptions.axis.x,
+										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
+										...chartOptions.axis.y,
+										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
+									})] })
+								}),
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,