@automattic/charts 2.0.0 → 3.0.0

package/dist/index.js

@@ -62,6 +62,14 @@ const useChartInstanceContext = () => {
 };
 const useSingleChartContext = useChartInstanceContext;
 //#endregion
+//#region src/styles/chart-scope-class.ts
+/**
+* Stable class that carries the `--a8c-charts-*` catalog. Applied to the `GlobalChartsProvider` wrapper, to portal-rendered surfaces (which sit outside the provider tree), and to standalone components when no provider is above them.
+*
+* Deliberately unhashed: consumers are documented as being able to target it to override a token on the provider element.
+*/
+const CHART_SCOPE_CLASS = "a8c-charts-scope";
+//#endregion
 //#region src/utils/create-composition.ts
 /**
 * Utility function to create chart components with composition API.
@@ -508,15 +516,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.
@@ -544,17 +568,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;
 	}
@@ -589,6 +626,14 @@ const resolveFontSize = (val) => {
 	}
 };
 //#endregion
+//#region src/providers/chart-scope/chart-scope-context.ts
+/**
+* The nearest chart element, published so JS token resolution reads the same CSS cascade that paints the chart's own colours.
+*
+* All JS token resolution reads this element rather than `document.documentElement`, so a `getComputedStyle` call sees the same `--a8c-charts-*` values — including any override set inside the provider tree — that a CSS-painted sibling element does.
+*/
+const ChartScopeContext = createContext(null);
+//#endregion
 //#region src/providers/chart-context/private/get-chart-color.ts
 /**
 * Golden ratio for mathematically pleasing color distribution
@@ -718,12 +763,75 @@ const getChartColor = (index, colorCache) => {
 	return hsl(Math.round(fallbackHue), fallbackSaturation / 100, fallbackLightness / 100).formatHex();
 };
 //#endregion
+//#region src/providers/chart-context/private/theme-override-vars.ts
+const ROLE_FOR_FIELD = [
+	["--a8c-charts-color-background", (theme) => theme.backgroundColor],
+	["--a8c-charts-color-grid", (theme) => theme.gridStyles?.stroke],
+	["--a8c-charts-color-axis", (theme) => theme.xAxisLineStyles?.stroke],
+	["--a8c-charts-color-tick", (theme) => theme.xTickLineStyles?.stroke],
+	["--a8c-charts-color-label-axis", (theme) => theme.svgLabelSmall?.fill]
+];
+/**
+* The variable a `theme` prop override is published as, one layer outside the role itself.
+*
+* `chart-scope.scss` declares each of these roles as `var(<role>-theme, <catalog default>)`, so an override that is invalid at computed-value time — a fallback-less `var()` naming a token the host never set — only invalidates this variable, and the role still resolves its mapped `--wpds-*` token. Published as the role directly, such a value took the role and every bare `var(<role>)` read site down with it.
+*
+* @param role - The catalog role being overridden.
+* @return The custom property carrying the consumer's value.
+*/
+const themeLayerVar = (role) => `${role}-theme`;
+ROLE_FOR_FIELD.map(([role]) => role);
+/**
+* Whether a value reads the role it is being published for, which would make the catalog entry depend on itself.
+*
+* The dependency runs `<role>: var(<role>-theme, …)`, so a value naming `<role>` closes a cycle through the catalog entry. CSS marks every custom property in a cycle invalid at computed-value time — the role's own fallback is *not* used, so the token resolves to nothing and every chart loses that colour. Verified in Chrome: `--role-theme: var(--role, blue); --role: var(--role-theme, green)` leaves `--role` empty, not `green`.
+*
+* Three things this has to get right, none of which a plain substring test gets:
+*
+* `var()` permits whitespace after the opening paren, so testing for `var(<role>` misses `var( --a8c-charts-color-grid, … )`.
+*
+* Several roles are prefixes of others (`--a8c-charts-color-label` of `--a8c-charts-color-label-secondary`), and every role is a prefix of its own theme layer. A prefix match would read a legitimate cross-role pointer as a self-reference and silently drop the override, so the role must be followed by something that cannot continue an identifier — `-` included. A value naming `<role>-theme` is therefore not treated as a self-reference: that cycle is confined to the theme layer, which leaves the role free to fall back to the catalog default.
+*
+* `resolveCssVariable` also accepts a bare custom-property name with no `var()` wrapper (`--a8c-charts-color-grid`), so that is legal `theme` input too. It forms no cycle — custom properties accept arbitrary token streams — so it survives as a literal string and drops silently at the use site instead of falling back to the catalog default.
+*
+* @param value - The consumer's value for the field.
+* @param role  - The catalog role this value would override.
+* @return True when the value reads `role`, so it must not be published.
+*/
+const readsOwnRole = (value, role) => value.trim() === role || new RegExp(`var\\(\\s*${role.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(value);
+/**
+* Maps a sparse consumer theme onto the theme-layer variables its overridden catalog roles read, so CSS-painted and JS-resolved colours read one source.
+*
+* A value that reads the role it would override is left unpublished — that is the default theme's own pointer surviving `mergeThemes`, and publishing it would invalidate the role. The role is still reported in `roles`: `withCatalogPointers` restores its theme field to the catalog pointer either way, so CSS and visx agree on the catalog default rather than visx painting a literal CSS never sees.
+*
+* @param theme - The consumer's `theme` prop, before merging with the default theme.
+* @return The wrapper's custom properties, and the roles the consumer overrode.
+*/
+const themeOverrideVars = (theme) => {
+	if (!theme) return {
+		vars: {},
+		roles: []
+	};
+	const vars = {};
+	const roles = [];
+	for (const [role, read] of ROLE_FOR_FIELD) {
+		const value = read(theme);
+		if (typeof value !== "string" || value === "") continue;
+		roles.push(role);
+		if (!readsOwnRole(value, role)) vars[themeLayerVar(role)] = value;
+	}
+	return {
+		vars,
+		roles
+	};
+};
+//#endregion
 //#region src/providers/chart-context/themes.ts
 /**
 * Default theme configuration
 */
 const defaultTheme = {
-	backgroundColor: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))",
+	backgroundColor: "var(--a8c-charts-color-background, #fff)",
 	labelBackgroundColor: "transparent",
 	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
 	colors: [
@@ -734,59 +842,59 @@ const defaultTheme = {
 		"#FF8C8F"
 	],
 	gridStyles: {
-		stroke: "var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
+		stroke: "var(--a8c-charts-color-grid, #dbdbdb)",
 		strokeWidth: 1
 	},
 	tickLength: 4,
 	gridColor: "",
 	gridColorDark: "",
 	xTickLineStyles: {
-		stroke: "var(--a8c-charts-color-tick, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
+		stroke: "var(--a8c-charts-color-tick, #dbdbdb)",
 		strokeWidth: 1
 	},
 	xAxisLineStyles: {
-		stroke: "var(--a8c-charts-color-axis, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
+		stroke: "var(--a8c-charts-color-axis, #dbdbdb)",
 		strokeWidth: 1
 	},
 	legend: {
-		labelStyles: { color: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
+		labelStyles: { color: "var(--a8c-charts-color-label, #1e1e1e)" },
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
 	svgLabelSmall: {
-		fill: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
+		fill: "var(--a8c-charts-color-label-axis, #1e1e1e)",
 		fontFamily: "inherit"
 	},
 	svgLabelBig: { fontFamily: "inherit" },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
-			backgroundFill: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))"
+			anchorLineStroke: "var(--a8c-charts-color-annotation, #1e1e1e)",
+			backgroundFill: "var(--a8c-charts-color-surface, #fff)"
 		},
-		connector: { stroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
+		connector: { stroke: "var(--a8c-charts-color-annotation, #1e1e1e)" },
 		circleSubject: {
 			stroke: "transparent",
-			fill: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
+			fill: "var(--a8c-charts-color-annotation, #1e1e1e)",
 			radius: 5
 		}
 	},
-	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))" },
+	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)" },
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
 		labelSpacing: "xs",
 		deltaColors: [
-			"var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))",
-			"var(--a8c-charts-color-trend-neutral, var(--wpds-color-foreground-content-neutral-weak, #707070))",
-			"var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))"
+			"var(--a8c-charts-color-trend-down, #cc1818)",
+			"var(--a8c-charts-color-trend-neutral, #707070)",
+			"var(--a8c-charts-color-trend-up, #008030)"
 		]
 	},
 	conversionFunnelChart: {
-		backgroundColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))",
-		positiveChangeColor: "var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))",
-		negativeChangeColor: "var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))"
+		backgroundColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
+		positiveChangeColor: "var(--a8c-charts-color-trend-up, #008030)",
+		negativeChangeColor: "var(--a8c-charts-color-trend-down, #cc1818)"
 	},
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
@@ -811,15 +919,65 @@ const defaultTheme = {
 	}
 };
 //#endregion
+//#region src/providers/chart-context/private/with-catalog-pointers.ts
+const CATALOG_RESTORE_FOR_ROLE = {
+	"--a8c-charts-color-background": () => ({ backgroundColor: defaultTheme.backgroundColor }),
+	"--a8c-charts-color-grid": (theme) => ({ gridStyles: {
+		...theme.gridStyles,
+		stroke: defaultTheme.gridStyles.stroke
+	} }),
+	"--a8c-charts-color-axis": (theme) => ({ xAxisLineStyles: {
+		...theme.xAxisLineStyles,
+		stroke: defaultTheme.xAxisLineStyles.stroke
+	} }),
+	"--a8c-charts-color-tick": (theme) => ({ xTickLineStyles: {
+		...theme.xTickLineStyles,
+		stroke: defaultTheme.xTickLineStyles.stroke
+	} }),
+	"--a8c-charts-color-label-axis": (theme) => ({ svgLabelSmall: {
+		...theme.svgLabelSmall,
+		fill: defaultTheme.svgLabelSmall.fill
+	} })
+};
+/**
+* Restores the mapped theme fields of `overriddenRoles` to their catalog pointer, so the theme-layer variable `themeOverrideVars` writes on the provider wrapper is the only carrier for an overridden role — CSS and the JS bridge (`useXYChartTheme`) then resolve it through the same cascade instead of visx reading a baked literal that can disagree with a closer CSS override.
+*
+* This covers roles `themeOverrideVars` deliberately left unpublished as well as the ones it published. A value that reads its own role is not publishable, but leaving visx the consumer's literal is what the whole mechanism exists to prevent: `theme={ { gridStyles: { stroke: 'var(--brand, var(--a8c-charts-color-grid, red))' } } }` would have CSS paint the catalog default while visx painted `--brand`.
+*
+* Every field outside the five mapped roles is left exactly as `merged` provided it: those aren't published as theme-layer vars, so rewriting them would erase a consumer's override with no replacement carrier.
+*
+* @param merged          - The consumer theme merged onto `defaultTheme` (`mergeThemes` output).
+* @param overriddenRoles - The catalog roles the consumer overrode, from `themeOverrideVars`.
+* @return A new theme object; `merged` is not mutated.
+*/
+const withCatalogPointers = (merged, overriddenRoles) => {
+	let result = merged;
+	for (const role of overriddenRoles) {
+		const restore = CATALOG_RESTORE_FOR_ROLE[role];
+		if (restore) result = {
+			...result,
+			...restore(result)
+		};
+	}
+	return result;
+};
+//#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
 const GlobalChartsContext = createContext(null);
 const GlobalChartsProvider = ({ children, theme }) => {
 	const [charts, setCharts] = useState(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Map());
 	const wrapperRef = useRef(null);
+	const [scopeNode, setScopeNode] = useState(null);
+	const setWrapperNode = useCallback((node) => {
+		wrapperRef.current = node;
+		setScopeNode(node);
+	}, []);
+	const { vars: overrideVars, roles: overriddenRoles } = useMemo(() => themeOverrideVars(theme), [theme]);
 	const providerTheme = useMemo(() => {
-		return theme ? mergeThemes(defaultTheme, theme) : defaultTheme;
-	}, [theme]);
+		if (!theme) return defaultTheme;
+		return withCatalogPointers(mergeThemes(defaultTheme, theme), overriddenRoles);
+	}, [theme, overriddenRoles]);
 	const [colorCache, setColorCache] = useState(() => ({
 		colors: [],
 		hues: [],
@@ -896,7 +1054,6 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		}
 		return getChartColor(index, colorCache);
 	}, [colorCache, groupToColorMap]);
-	const resolveThemeColor = useCallback((value) => value ? normalizeColorToHex(value, wrapperRef.current, resolveCssVariable) : "", []);
 	const getElementStyles = useCallback(({ data, index, overrideColor, legendShape }) => {
 		const isSeriesData = data && typeof data === "object" && "data" in data && "options" in data;
 		const isPointPercentageData = data && typeof data === "object" && "value" in data && typeof data.value === "number" && !("data" in data);
@@ -939,7 +1096,6 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		getChartData,
 		theme: providerTheme,
 		getElementStyles,
-		resolveThemeColor,
 		toggleSeriesVisibility,
 		isSeriesVisible,
 		getHiddenSeries,
@@ -951,7 +1107,6 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		getChartData,
 		providerTheme,
 		getElementStyles,
-		resolveThemeColor,
 		toggleSeriesVisibility,
 		isSeriesVisible,
 		getHiddenSeries,
@@ -960,9 +1115,16 @@ const GlobalChartsProvider = ({ children, theme }) => {
 	return /* @__PURE__ */ jsx(GlobalChartsContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx("div", {
-			ref: wrapperRef,
-			style: { display: "contents" },
-			children
+			ref: setWrapperNode,
+			className: CHART_SCOPE_CLASS,
+			style: {
+				display: "contents",
+				...overrideVars
+			},
+			children: /* @__PURE__ */ jsx(ChartScopeContext.Provider, {
+				value: scopeNode,
+				children
+			})
 		})
 	});
 };
@@ -1022,12 +1184,33 @@ const useDeepMemo = (value) => {
 	return ref.current;
 };
 //#endregion
+//#region src/providers/chart-scope/use-chart-scope-element.ts
+/**
+* Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
+*
+* @return {HTMLElement | null} The nearest chart scope element, or `null`.
+*/
+const useChartScopeElement = () => useContext(ChartScopeContext);
+//#endregion
+//#region src/providers/chart-scope/use-standalone-scope-class.ts
+/**
+* Returns the catalog class when there is no `GlobalChartsProvider` above this component, and `undefined` when there is.
+*
+* Standalone components need the catalog to resolve at all, but inside a provider the tokens already inherit — re-declaring them there would shadow a consumer override set anywhere in the tree.
+*
+* @return The scope class name, or undefined when a provider is present.
+*/
+const useStandaloneScopeClass = () => useContext(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
+//#endregion
 //#region src/hooks/use-xychart-theme.ts
-const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
+	const scopeElement = useChartScopeElement();
+	const seriesColorKey = JSON.stringify((data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color)));
 	return useMemo(() => {
-		const seriesColors = (data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color));
+		const resolve = createCssVariableResolver(scopeElement);
+		const resolveColor = (value) => value ? resolve(value) ?? value : value;
+		const seriesColors = JSON.parse(seriesColorKey);
 		return buildChartTheme({
 			...theme,
 			colors: [...seriesColors, ...theme.colors ?? []],
@@ -1049,7 +1232,11 @@ const useXYChartTheme = (data) => {
 				fill: resolveColor(theme.svgLabelSmall.fill)
 			}
 		});
-	}, [theme, data]);
+	}, [
+		theme,
+		seriesColorKey,
+		scopeElement
+	]);
 };
 //#endregion
 //#region src/hooks/use-chart-data-transform.ts
@@ -1136,7 +1323,7 @@ const getXAxisLabelMetrics = (theme, orientation) => {
 const useChartMargin = (height, options, data, theme, horizontal = false) => {
 	const yTicks = 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));
@@ -1525,6 +1712,7 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
 	const theme = useGlobalChartsTheme();
 	const context = useContext(GlobalChartsContext);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const legendScale = scaleOrdinal({
 		domain: items.map((item) => item.label),
 		range: items.map((item) => item.color)
@@ -1577,7 +1765,7 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 			justify: orientation === "horizontal" ? flexAlignment : void 0,
 			wrap: orientation === "horizontal" ? "wrap" : void 0,
 			role: "list",
-			className: clsx(base_legend_module_default.legend, className),
+			className: clsx(standaloneScopeClass, base_legend_module_default.legend, className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
@@ -1864,9 +2052,10 @@ const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipCon
 		data,
 		className
 	});
+	const standaloneScopeClass = useStandaloneScopeClass();
 	if (!renderContainer) return content;
 	return /* @__PURE__ */ jsx("div", {
-		className: base_tooltip_module_default.tooltip,
+		className: clsx(standaloneScopeClass, base_tooltip_module_default.tooltip),
 		style: {
 			top,
 			left,
@@ -1935,10 +2124,11 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tabIndex: -1,
 				role: "tooltip",
 				"aria-atomic": "true",
-				className: keyboardFocusedClassName,
+				className: clsx(CHART_SCOPE_CLASS, keyboardFocusedClassName),
 				children: tooltipContent
 			}, `chart-tooltip-${selectedIndex}`);
 			return /* @__PURE__ */ jsx("div", {
+				className: CHART_SCOPE_CLASS,
 				role: "tooltip",
 				"aria-live": "polite",
 				children: tooltipContent
@@ -2231,28 +2421,38 @@ const getCurveType = (type, smoothing) => {
 		default: return 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) => {
@@ -2261,26 +2461,90 @@ const getPointSpacingInHours = (sortedData) => {
 		return Math.min(seriesSpacing, Math.abs(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(differenceInHours(maxX, minX));
-	if (diffInHours <= 24 && isSubDaily) return formatHourTick;
-	if (diffInHours <= 168 && isSubDaily) return formatDateOrHourTick;
-	if (Math.abs(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(differenceInHours(span.maxX, span.minX));
+	if (resolution === "hour") {
+		if (diffInHours <= 24) return formatHourTick;
+		if (diffInHours <= 168) return formatDateOrHourTick;
+	}
+	return Math.abs(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 = 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 = 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) {
@@ -2317,9 +2581,11 @@ function withResponsive(WrappedComponent) {
 			enableDebounceLeadingCall: true
 		});
 		const hasAspectRatio = aspectRatio !== void 0 && aspectRatio > 0;
+		const [scopeNode, setScopeNode] = useState(null);
 		const wrapperRef = useRef(null);
 		const setWrapperRef = useCallback((node) => {
 			wrapperRef.current = node;
+			setScopeNode(node);
 			if (typeof parentRef === "function") parentRef(node);
 			else if (parentRef) parentRef.current = node;
 		}, [parentRef]);
@@ -2365,14 +2631,17 @@ function withResponsive(WrappedComponent) {
 				...width !== void 0 ? { width } : null,
 				...height !== void 0 ? { height } : null
 			},
-			children: hasAspectRatio ? /* @__PURE__ */ jsx("div", {
-				className: with_responsive_module_default.content,
-				style: {
-					width: boxWidth,
-					height: boxHeight
-				},
-				children: wrappedComponent
-			}) : wrappedComponent
+			children: /* @__PURE__ */ jsx(ChartScopeContext.Provider, {
+				value: scopeNode,
+				children: hasAspectRatio ? /* @__PURE__ */ jsx("div", {
+					className: with_responsive_module_default.content,
+					style: {
+						width: boxWidth,
+						height: boxHeight
+					},
+					children: wrappedComponent
+				}) : wrappedComponent
+			})
 		});
 	};
 }
@@ -2807,11 +3076,12 @@ const getVerticalAnchor = (subjectType, isFlippedVertically, y, yMax, height) =>
 };
 const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", styles: datumStyles, testId, renderLabel, renderLabelPopover }) => {
 	const providerTheme = useGlobalChartsTheme();
+	const scopeElement = useChartScopeElement();
 	const { xScale, yScale } = useContext(DataContext) || {};
 	const labelRef = useRef(null);
 	const [height, setHeight] = useState(null);
 	const styles = deepmerge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
-	const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
+	const resolveColor = (value) => value ? resolveCssVariable(value, scopeElement) ?? value : value;
 	useEffect(() => {
 		if (labelRef.current?.getBBox) {
 			const bbox = labelRef.current.getBBox();
@@ -3058,8 +3328,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	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 = useRef(null);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
@@ -3835,7 +4105,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor
+									strokeColor: theme.backgroundColor ?? providerTheme.backgroundColor
 								})] }),
 								/* @__PURE__ */ jsx(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -3995,11 +4265,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) => sprintf(__("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.
@@ -4013,12 +4345,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 = 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 = useMemo(() => {
 		const bandScale = {
 			type: "band",
@@ -4030,19 +4376,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 = 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,
@@ -4051,20 +4404,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 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) => {
@@ -4078,17 +4435,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,
@@ -4100,15 +4460,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
 				}
@@ -4118,7 +4480,8 @@ function useBarChartOptions(data, horizontal, options = {}) {
 		};
 	}, [
 		defaultOptions,
-		options,
+		axisConfig,
+		stableOptions,
 		horizontal,
 		data
 	]);
@@ -4280,7 +4643,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
-	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const isSeriesRendered = 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 = useRef(null);
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "BarChart");
@@ -4299,24 +4668,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 = 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 = useMemo(() => dataWithVisibleZeros.map((series, index) => ({
+		series,
+		index,
+		isVisible: isSeriesRendered(series)
+	})), [dataWithVisibleZeros, isSeriesRendered]);
 	const allSeriesHidden = useMemo(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
@@ -4876,12 +5232,22 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
 	const selectedBarRef = useRef(null);
+	const [scopeNode, setScopeNode] = useState(null);
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
 	const { containerRef: portalContainerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
 		detectBounds: true,
 		scroll: true
 	});
+	const portalContainerRefRef = useRef(portalContainerRef);
+	useEffect(() => {
+		portalContainerRefRef.current = portalContainerRef;
+	}, [portalContainerRef]);
+	const setChartRef = useCallback((node) => {
+		portalContainerRefRef.current(node);
+		chartRef.current = node;
+		setScopeNode(node);
+	}, []);
 	const clearSelectionAndRef = useCallback(() => {
 		clearSelection();
 		selectedBarRef.current = null;
@@ -5027,6 +5393,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		direction: "column",
 		align: "center",
 		justify: "center",
+		ref: setScopeNode,
 		className: clsx(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
@@ -5038,80 +5405,80 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
 		direction: "column",
 		gap: "xl",
-		ref: (node) => {
-			portalContainerRef(node);
-			chartRef.current = node;
-		},
+		ref: setChartRef,
 		className: clsx(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
 			height: resolvedHeight
 		},
-		children: [renderMainMetric ? renderMainMetric({
-			mainRate,
-			changeIndicator,
-			className: conversion_funnel_chart_module_default["main-metric"],
-			changeColor
-		}) : /* @__PURE__ */ jsx(Stack, {
-			direction: "row",
-			align: "baseline",
-			gap: "sm",
-			className: conversion_funnel_chart_module_default["main-metric"],
-			children: renderDefaultMainMetric()
-		}), /* @__PURE__ */ jsx(Stack, {
-			direction: "row",
-			align: "flex-end",
-			gap: "lg",
-			className: conversion_funnel_chart_module_default["funnel-container"],
-			children: steps.map((step, index) => {
-				const barHeight = step.rate / maxRate * 100;
-				const { isBlurred } = getStepState(step.id);
-				return /* @__PURE__ */ jsxs(Stack, {
-					direction: "column",
-					className: clsx(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
-					gap: "xl",
-					children: [/* @__PURE__ */ jsxs(Stack, {
+		children: /* @__PURE__ */ jsxs(ChartScopeContext.Provider, {
+			value: scopeNode,
+			children: [renderMainMetric ? renderMainMetric({
+				mainRate,
+				changeIndicator,
+				className: conversion_funnel_chart_module_default["main-metric"],
+				changeColor
+			}) : /* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				align: "baseline",
+				gap: "sm",
+				className: conversion_funnel_chart_module_default["main-metric"],
+				children: renderDefaultMainMetric()
+			}), /* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				align: "flex-end",
+				gap: "lg",
+				className: conversion_funnel_chart_module_default["funnel-container"],
+				children: steps.map((step, index) => {
+					const barHeight = step.rate / maxRate * 100;
+					const { isBlurred } = getStepState(step.id);
+					return /* @__PURE__ */ jsxs(Stack, {
 						direction: "column",
-						gap: "xs",
-						children: [renderStepLabel ? renderStepLabel({
-							step,
-							index,
-							className: conversion_funnel_chart_module_default["step-label"]
-						}) : /* @__PURE__ */ jsx("span", {
-							className: conversion_funnel_chart_module_default["step-label"],
-							children: step.label
-						}), renderStepRate ? renderStepRate({
-							step,
-							index,
-							className: conversion_funnel_chart_module_default["step-rate"]
-						}) : /* @__PURE__ */ jsx("span", {
-							className: conversion_funnel_chart_module_default["step-rate"],
-							children: formatPercentage(step.rate)
+						className: clsx(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
+						gap: "xl",
+						children: [/* @__PURE__ */ jsxs(Stack, {
+							direction: "column",
+							gap: "xs",
+							children: [renderStepLabel ? renderStepLabel({
+								step,
+								index,
+								className: conversion_funnel_chart_module_default["step-label"]
+							}) : /* @__PURE__ */ jsx("span", {
+								className: conversion_funnel_chart_module_default["step-label"],
+								children: step.label
+							}), renderStepRate ? renderStepRate({
+								step,
+								index,
+								className: conversion_funnel_chart_module_default["step-rate"]
+							}) : /* @__PURE__ */ jsx("span", {
+								className: conversion_funnel_chart_module_default["step-rate"],
+								children: formatPercentage(step.rate)
+							})]
+						}), /* @__PURE__ */ jsx(Stack, {
+							direction: "column",
+							justify: "flex-end",
+							className: conversion_funnel_chart_module_default["bar-container"],
+							onClick: stepHandlers.get(step.id)?.onClick,
+							onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
+							role: "button",
+							tabIndex: isBlurred ? -1 : 0,
+							"aria-label": step.label,
+							style: { backgroundColor: barBackgroundColor },
+							children: /* @__PURE__ */ jsx("div", {
+								className: clsx(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
+								style: {
+									height: `${barHeight}%`,
+									backgroundColor: barColor
+								}
+							})
 						})]
-					}), /* @__PURE__ */ jsx(Stack, {
-						direction: "column",
-						justify: "flex-end",
-						className: conversion_funnel_chart_module_default["bar-container"],
-						onClick: stepHandlers.get(step.id)?.onClick,
-						onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
-						role: "button",
-						tabIndex: isBlurred ? -1 : 0,
-						"aria-label": step.label,
-						style: { backgroundColor: barBackgroundColor },
-						children: /* @__PURE__ */ jsx("div", {
-							className: clsx(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
-							style: {
-								height: `${barHeight}%`,
-								backgroundColor: barColor
-							}
-						})
-					})]
-				}, step.id);
-			})
-		})]
+					}, step.id);
+				})
+			})]
+		})
 	}), tooltipOpen && tooltipData && (() => {
 		const tooltipContent = renderTooltip ? renderTooltip({
 			step: tooltipData,
@@ -5124,7 +5491,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		return /* @__PURE__ */ jsx(TooltipInPortal, {
 			top: tooltipTop,
 			left: tooltipLeft,
-			className: conversion_funnel_chart_module_default["tooltip-wrapper"],
+			className: clsx("a8c-charts-scope", conversion_funnel_chart_module_default["tooltip-wrapper"]),
 			children: tooltipContent
 		}, Math.random());
 	})()] });
@@ -5274,6 +5641,7 @@ function normalizeGeoChartError(eventArgs) {
 */
 const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", onError, renderPlaceholder }) => {
 	const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const containerRef = useRef(null);
 	const reportedErrorIdsRef = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
@@ -5306,8 +5674,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	});
 	const fullColorHex = getElementStyles({ index: 0 }).color;
 	const lightColorHex = lightenHexColor(fullColorHex, .8);
-	const backgroundColorHex = normalizeColorToHex(backgroundColor, null, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
-	const defaultFillColorHex = normalizeColorToHex(featureFillColor, null, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
+	const backgroundColorHex = normalizeColorToHex(backgroundColor, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
+	const defaultFillColorHex = normalizeColorToHex(featureFillColor, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
 	const sanitizedData = useMemo(() => {
 		if (data.length === 0) return {
 			data,
@@ -5567,7 +5935,8 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 const CELL_MIX_FLOOR = .15;
 const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = [], primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
 	const chartId = useChartId(providedChartId);
-	const { getElementStyles, resolveThemeColor, theme } = useGlobalChartsContext();
+	const { getElementStyles, theme } = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
 	const [selectedIndex, setSelectedIndex] = useState();
@@ -5582,7 +5951,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		index: 0,
 		overrideColor: primaryColor || heatmapChartSettings.primaryColor
 	});
-	const chartBackgroundHex = resolveThemeColor(theme.backgroundColor);
+	const chartBackgroundHex = normalizeColorToHex(theme.backgroundColor, scopeElement, resolveCssVariable);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
 	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + (1 - CELL_MIX_FLOOR) * intensity)));
 	const extent = useMemo(() => getValueExtent(data), [data]);
@@ -5809,6 +6178,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 					top: tooltipTop,
 					left: tooltipLeft,
 					children: /* @__PURE__ */ jsx("div", {
+						className: "a8c-charts-scope",
 						role: "tooltip",
 						tabIndex: -1,
 						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
@@ -8779,6 +9149,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 					top: tooltipTop || 0,
 					left: tooltipLeft || 0,
 					children: /* @__PURE__ */ jsx("div", {
+						className: "a8c-charts-scope",
 						role: "tooltip",
 						children: renderTooltip({ tooltipData })
 					})
@@ -9077,6 +9448,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 					top: tooltipTop || 0,
 					left: tooltipLeft || 0,
 					children: /* @__PURE__ */ jsx("div", {
+						className: "a8c-charts-scope",
 						role: "tooltip",
 						children: renderTooltip({ tooltipData })
 					})
@@ -9364,7 +9736,7 @@ const Icon$1 = ({ direction }) => {
 function TrendIndicator({ direction, value, className, style, showIcon = true }) {
 	const ariaLabel = `${DIRECTION_LABELS[direction]}: ${value}`;
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx(trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
+		className: clsx(useStandaloneScopeClass(), trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
 		style,
 		"aria-label": ariaLabel,
 		children: [showIcon && /* @__PURE__ */ jsx(Icon$1, { direction }), /* @__PURE__ */ jsx("span", {
@@ -9374,6 +9746,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
 
 //# sourceMappingURL=index.js.map