fix: resolve aggregate column for exp histograms before samples table

frontend/jest.setup.ts

@@ -62,40 +62,6 @@ if (typeof window.ResizeObserver === 'undefined') {
 	(window as any).ResizeObserver = ResizeObserverMock;
 }
 
-if (typeof globalThis.DOMRect === 'undefined') {
-	(globalThis as any).DOMRect = class DOMRect {
-		x = 0;
-		y = 0;
-		width = 0;
-		height = 0;
-		top = 0;
-		right = 0;
-		bottom = 0;
-		left = 0;
-		constructor(x = 0, y = 0, width = 0, height = 0) {
-			this.x = x;
-			this.y = y;
-			this.width = width;
-			this.height = height;
-			this.top = y;
-			this.right = x + width;
-			this.bottom = y + height;
-			this.left = x;
-		}
-		toJSON(): any {
-			return { x: this.x, y: this.y, width: this.width, height: this.height };
-		}
-		static fromRect(rect?: {
-			x?: number;
-			y?: number;
-			width?: number;
-			height?: number;
-		}): DOMRect {
-			return new DOMRect(rect?.x, rect?.y, rect?.width, rect?.height);
-		}
-	};
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,9 +48,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.6",
+    "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.1.0",
+    "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -238,4 +238,4 @@
     "tmp@<0.2.6": ">=0.2.6 <0.3.0",
     "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -664,7 +664,6 @@ function TanStackTableInner<TData, TItemKey = string>(
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
-											value ??= '10';
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
 											if (page !== 1) {

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -5,7 +5,6 @@ import BarChart from 'container/DashboardContainer/visualization/charts/BarChart
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { StackMode } from 'lib/uPlotV2/config/types';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -132,9 +131,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 			<div ref={graphRef} className={styles.graphContainer}>
 				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 					<BarChart
-						stack={StackMode.Normal}
 						config={config}
 						data={chartData}
+						isStackedBarChart
 						legendConfig={{ position: LegendPosition.BOTTOM }}
 						customTooltip={renderBillingTooltip}
 						width={containerDimensions.width}

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -58,17 +58,26 @@ describe('prepareBillingBarConfig', () => {
 		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
 	});
 
-	it('sets padding and focus alpha for behavioral parity', () => {
+	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
 		const builder = prepareBillingBarConfig({
 			...baseProps,
 			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
 		});
 		const config = builder.getConfig();
-		// Stacking bands come from the chart now — see useChartStacking.
+		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
 		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
 		expect(config.focus).toStrictEqual({ alpha: 0.3 });
 	});
 
+	it('sets no bands when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toBeUndefined();
+	});
+
 	it('uses queryName as label when legend is undefined', () => {
 		const apiResponse: MetricRangePayloadProps = {
 			data: {

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { DrawStyle } from 'lib/uPlotV2/config/types';
 import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -62,6 +63,7 @@ export function prepareBillingBarConfig({
 		});
 	});
 
+	builder.setBands(getInitialStackedBands(results.length));
 	builder.setPadding([32, 32, 16, 16]);
 	builder.setFocus({ alpha: 0.3 });
 

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -6,24 +6,25 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { StackMode } from 'lib/uPlotV2/config/types';
-
+import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
 	const {
 		children,
+		isStackedBarChart,
 		customTooltip,
 		config,
 		data,
-		stack = StackMode.None,
 		pinnedTooltipElement,
 		...rest
 	} = props;
 
-	// Written during render so it lands before UPlotChart's effect reads the config,
-	// which derives the fill bands, percent axis unit and percent range from it.
-	config.setStackMode(stack);
+	const chartData = useBarChartStacking({
+		data,
+		isStackedBarChart,
+		config,
+	});
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -36,6 +37,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				isStackedBarChart: isStackedBarChart,
 				canPinTooltip: rest.canPinTooltip,
 				renderTooltipFooter: rest.renderTooltipFooter,
 			};
@@ -46,6 +48,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.timezone,
 			rest.yAxisUnit,
 			rest.decimalPrecision,
+			isStackedBarChart,
 			rest.canPinTooltip,
 			rest.renderTooltipFooter,
 		],
@@ -55,7 +58,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 		<ChartWrapper
 			{...rest}
 			config={config}
-			data={data}
+			data={chartData}
 			customTooltip={renderTooltip}
 			pinnedTooltipElement={pinnedTooltipElement}
 		>

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -6,15 +6,12 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import UPlotChart from 'lib/uPlotV2/components/UPlotChart/UPlotChart';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import { prepareAlignedData } from 'lib/uPlotV2/components/UPlotChart/utils';
 import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
 import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';
 import uPlot from 'uplot';
 
-import { ChartWrapperProps } from '../types';
-import { useChartStacking } from './useChartStacking';
+import { ChartProps } from '../types';
 
 const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 300;
@@ -42,20 +39,9 @@ export default function ChartWrapper({
 	pinnedTooltipElement,
 	tooltipPortalRoot,
 	'data-testid': testId,
-}: ChartWrapperProps): JSX.Element {
+}: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
 
-	const stack = config.getStackMode();
-	const chartData = useChartStacking({ data, config });
-
-	// Tooltips need pre-stack values, gap-processed exactly as UPlotChart processes the
-	// plot data — otherwise the cursor's index addresses a shorter array.
-	const unstackedData = useMemo(
-		() =>
-			stack === StackMode.None ? undefined : prepareAlignedData({ data, config }),
-		[data, config, stack],
-	);
-
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
 			if (!showLegend) {
@@ -75,11 +61,11 @@ export default function ChartWrapper({
 	const renderTooltipCallback = useCallback(
 		(args: TooltipRenderArgs): React.ReactNode => {
 			if (customTooltip) {
-				return customTooltip({ ...args, unstackedData });
+				return customTooltip(args);
 			}
 			return null;
 		},
-		[customTooltip, unstackedData],
+		[customTooltip],
 	);
 
 	const syncMetadata = useMemo(
@@ -105,7 +91,7 @@ export default function ChartWrapper({
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
 					<UPlotChart
 						config={config}
-						data={chartData}
+						data={data}
 						width={chartWidth}
 						height={chartHeight}
 						plotRef={(plot): void => {

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/__tests__/useChartStacking.test.ts

@@ -1,98 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import uPlot from 'uplot';
-
-import { useChartStacking } from '../useChartStacking';
-
-type Hooks = Record<string, (...args: unknown[]) => void>;
-
-function createConfig(stack: StackMode): {
-	config: UPlotConfigBuilder;
-	hooks: Hooks;
-} {
-	const hooks: Hooks = {};
-	const config = {
-		getStackMode: (): StackMode => stack,
-		addHook: jest.fn((type: string, hook: (...args: unknown[]) => void) => {
-			hooks[type] = hook;
-			return jest.fn();
-		}),
-	} as unknown as UPlotConfigBuilder;
-	return { config, hooks };
-}
-
-const data = [[1], [30], [10]] as unknown as uPlot.AlignedData;
-
-describe('useChartStacking', () => {
-	it('returns the data untouched and registers nothing when the config says `none`', () => {
-		const { config } = createConfig(StackMode.None);
-		const { result } = renderHook(() => useChartStacking({ data, config }));
-
-		expect(result.current).toBe(data);
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('treats a missing config as unstacked', () => {
-		const { result } = renderHook(() => useChartStacking({ data, config: null }));
-
-		expect(result.current).toBe(data);
-	});
-
-	it('accumulates raw values when the config declares `normal`', () => {
-		const { config } = createConfig(StackMode.Normal);
-		const { result } = renderHook(() => useChartStacking({ data, config }));
-
-		expect(result.current).toStrictEqual([[1], [40], [10]]);
-	});
-
-	it('rescales each column to its total when the config declares `percent`', () => {
-		const { config } = createConfig(StackMode.Percent);
-		const { result } = renderHook(() => useChartStacking({ data, config }));
-
-		expect(result.current).toStrictEqual([[1], [100], [25]]);
-	});
-
-	it('registers the uPlot hooks that re-stack on data and visibility changes', () => {
-		const { config } = createConfig(StackMode.Normal);
-		renderHook(() => useChartStacking({ data, config }));
-
-		expect(
-			(config.addHook as jest.Mock).mock.calls.map(([type]) => type),
-		).toStrictEqual(['setData', 'setSeries']);
-	});
-
-	it('re-stacks from the raw values when the legend hides a series', () => {
-		const { config, hooks } = createConfig(StackMode.Normal);
-		renderHook(() => useChartStacking({ data, config }));
-
-		const plot = {
-			data: [[1]],
-			series: [{}, { show: true }, { show: false }],
-			delBand: jest.fn(),
-			addBand: jest.fn(),
-			setData: jest.fn(),
-		};
-		hooks.setSeries(plot, 2, { show: false });
-
-		// The hidden series keeps its raw value and stops contributing to the total.
-		expect(plot.setData).toHaveBeenCalledWith([[1], [30], [10]]);
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-	});
-
-	it('ignores a focus-only setSeries so hovering does not re-stack', () => {
-		const { config, hooks } = createConfig(StackMode.Normal);
-		renderHook(() => useChartStacking({ data, config }));
-
-		const plot = {
-			data: [[1]],
-			series: [{}, { show: true }, { show: true }],
-			delBand: jest.fn(),
-			addBand: jest.fn(),
-			setData: jest.fn(),
-		};
-		hooks.setSeries(plot, 1, { focus: true });
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/useChartStacking.ts

@@ -1,132 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	updateStacksInChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			updateStacksInChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		// uPlot fires setSeries for hover focus too; only visibility changes restack.
-		if (!has(opts, 'focus')) {
-			updateStacksInChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseChartStackingParams {
-	data: uPlot.AlignedData;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Stacks a chart's data for the mode declared on its config, and re-stacks on data or
- * visibility changes. The pre-stack values live in a ref because the uPlot hooks that
- * read them run outside React's render cycle.
- */
-export function useChartStacking({
-	data,
-	config,
-}: UseChartStackingParams): uPlot.AlignedData {
-	const stack = config?.getStackMode() ?? StackMode.None;
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = stack === 'none' ? null : data;
-
-	// Guards the re-entrant setData below, which would otherwise re-trigger our own hook.
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (stack === StackMode.None || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		return stackSeries(data, noSeriesHidden, stack).data;
-	}, [data, stack]);
-
-	const updateStacksInChart = useCallback(
-		(plot: uPlot): void => {
-			const unstacked = unstackedDataRef.current;
-			if (
-				!unstacked ||
-				!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-			) {
-				return;
-			}
-
-			const shouldExcludeSeries = (idx: number): boolean =>
-				isSeriesHidden(plot, idx);
-			const { data: stacked, bands } = stackSeries(
-				unstacked,
-				shouldExcludeSeries,
-				stack,
-			);
-
-			plot.delBand(null);
-			bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-			isUpdatingChartRef.current = true;
-			plot.setData(stacked);
-			isUpdatingChartRef.current = false;
-		},
-		[stack],
-	);
-
-	useLayoutEffect(() => {
-		if (stack === StackMode.None || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, updateStacksInChart, isUpdatingChartRef);
-	}, [stack, config, updateStacksInChart]);
-
-	return chartData;
-}

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -6,16 +6,10 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { StackMode } from 'lib/uPlotV2/config/types';
-
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, customTooltip, stack = StackMode.None, ...rest } = props;
-
-	// Written during render so it lands before UPlotChart's effect reads the config,
-	// which derives the fill bands, percent axis unit and percent range from it.
-	rest.config.setStackMode(stack);
+	const { children, customTooltip, ...rest } = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -14,7 +14,6 @@ import {
 	ChartClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import type { StackMode } from 'lib/uPlotV2/config/types';
 
 interface BaseChartProps {
 	width: number;
@@ -53,26 +52,27 @@ interface UPlotChartDataProps {
 	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 }
 
-/** Everything the shared uPlot shell consumes; each chart's props narrow it. */
-export interface ChartWrapperProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {}
-
-export interface TimeSeriesChartProps extends ChartWrapperProps {
+export interface TimeSeriesChartProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
 	timezone?: Timezone;
-	/** How series compose. Defaults to `none`, which draws them independently. */
-	stack?: StackMode;
 }
 
-export interface BarChartProps extends ChartWrapperProps {
-	timezone?: Timezone;
-	/** How series compose. Defaults to `none`, which draws them independently. */
-	stack?: StackMode;
-}
-
-export interface HistogramChartProps extends ChartWrapperProps {
+export interface HistogramChartProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
 	isQueriesMerged?: boolean;
 }
 
+export interface BarChartProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+	isStackedBarChart?: boolean;
+	timezone?: Timezone;
+}
+
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;
+
 /**
  * One resolved pie/donut slice: a display label, its (already parsed) positive
  * numeric value, and the colour used for the arc + legend swatch.

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -1,158 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { StackMode } from 'lib/uPlotV2/config/types';
-
-import { stackSeries } from '../stackSeriesUtils';
-
-const includeAll = (): boolean => false;
-
-// Stacking is top-down: the first series carries the column total, the last its own
-// raw value. Every expectation below reads in that order.
-describe('stackSeries', () => {
-	it('is a no-op under `none`, returning the data and no bands', () => {
-		const data: AlignedData = [[1], [30], [10]];
-
-		const { data: result, bands } = stackSeries(data, includeAll, StackMode.None);
-
-		expect(result).toBe(data);
-		expect(bands).toStrictEqual([]);
-	});
-
-	describe('normal', () => {
-		it('accumulates raw values from the bottom series upward', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[10, 20],
-				[1, 2],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
-				[1, 2],
-				[11, 22],
-				[1, 2],
-			]);
-		});
-
-		it('treats nulls as 0 without breaking the running total', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[10, null],
-				[1, 2],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
-				[1, 2],
-				[11, 2],
-				[1, 2],
-			]);
-		});
-
-		it('emits one band per adjacent pair of participating series', () => {
-			const data: AlignedData = [[1], [10], [5], [1]];
-
-			expect(stackSeries(data, includeAll, StackMode.Normal).bands).toStrictEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('copies omitted series through unstacked and skips their bands', () => {
-			const data: AlignedData = [[1], [10], [5], [1]];
-			const omitMiddle = (seriesIndex: number): boolean => seriesIndex === 2;
-
-			const { data: stacked, bands } = stackSeries(
-				data,
-				omitMiddle,
-				StackMode.Normal,
-			);
-
-			expect(stacked).toStrictEqual([[1], [11], [5], [1]]);
-			expect(bands).toStrictEqual([{ series: [1, 3] }]);
-		});
-	});
-
-	describe('percent', () => {
-		it('rescales each column to its total so the top series reads 100', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[30, 10],
-				[10, 10],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1, 2],
-				[100, 100],
-				[25, 50],
-			]);
-		});
-
-		it('normalises per column, so an identical series differs across x', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[1, 3],
-				[1, 1],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1, 2],
-				[100, 100],
-				[50, 25],
-			]);
-		});
-
-		it('excludes omitted series from the total, so the visible ones still reach 100', () => {
-			const data: AlignedData = [[1], [30], [10], [60]];
-			const omitLast = (seriesIndex: number): boolean => seriesIndex === 3;
-
-			expect(stackSeries(data, omitLast, StackMode.Percent).data).toStrictEqual([
-				[1],
-				[100],
-				[25],
-				[60],
-			]);
-		});
-
-		it('yields 0 for a column whose participating series sum to zero', () => {
-			const data: AlignedData = [
-				[1, 2],
-				[0, 5],
-				[0, 5],
-			];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1, 2],
-				[0, 100],
-				[0, 50],
-			]);
-		});
-
-		it('divides by the signed total when a column mixes signs', () => {
-			// 30 + (-10) = 20, so the shares are 150% and -50% and still sum to 100.
-			const data: AlignedData = [[1], [30], [-10]];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1],
-				[100],
-				[-50],
-			]);
-		});
-
-		it('yields 0 across a column whose signed total cancels to zero', () => {
-			const data: AlignedData = [[1], [10], [-10]];
-
-			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
-				[1],
-				[0],
-				[0],
-			]);
-		});
-	});
-
-	it('defaults to normal when no mode is given', () => {
-		const data: AlignedData = [[1], [30], [10]];
-
-		expect(stackSeries(data, includeAll).data).toStrictEqual(
-			stackSeries(data, includeAll, StackMode.Normal).data,
-		);
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -0,0 +1,117 @@
+import { AlignedData } from 'uplot';
+
+import { getInitialStackedBands, stack } from '../stackUtils';
+
+describe('stackUtils', () => {
+	describe('stack', () => {
+		const neverOmit = (): boolean => false;
+
+		it('preserves time axis as first row', () => {
+			const data: AlignedData = [
+				[100, 200, 300],
+				[1, 2, 3],
+				[4, 5, 6],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[0]).toStrictEqual([100, 200, 300]);
+		});
+
+		it('stacks value series cumulatively (last = raw, first = total)', () => {
+			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
+			const data: AlignedData = [
+				[0, 1, 2],
+				[1, 2, 3], // series 1
+				[4, 5, 6], // series 2
+				[7, 8, 9], // series 3
+			];
+			const { data: result } = stack(data, neverOmit);
+			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
+			expect(result[1]).toStrictEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
+			expect(result[2]).toStrictEqual([11, 13, 15]); // 4+7, 5+8, 6+9
+			expect(result[3]).toStrictEqual([7, 8, 9]);
+		});
+
+		it('treats null values as 0 when stacking', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, null],
+				[null, 10],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[1]).toStrictEqual([1, 10]); // total
+			expect(result[2]).toStrictEqual([0, 10]); // last series with null→0
+		});
+
+		it('copies omitted series as-is without accumulating', () => {
+			// Omit series 2 (index 2); series 1 and 3 are stacked.
+			const data: AlignedData = [
+				[0, 1],
+				[10, 20], // series 1
+				[100, 200], // series 2 - omitted
+				[1, 2], // series 3
+			];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { data: result } = stack(data, omitSeries2);
+			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
+			expect(result[1]).toStrictEqual([11, 22]); // 10+1, 20+2
+			expect(result[2]).toStrictEqual([100, 200]); // copied, not stacked
+			expect(result[3]).toStrictEqual([1, 2]);
+		});
+
+		it('returns bands between consecutive visible series when none omitted', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+				[3, 4],
+				[5, 6],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		});
+
+		it('returns bands only between visible series when some are omitted', () => {
+			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
+			const data: AlignedData = [[0], [1], [2], [3], [4]];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { bands } = stack(data, omitSeries2);
+			expect(bands).toStrictEqual([{ series: [1, 3] }, { series: [3, 4] }]);
+		});
+
+		it('returns empty bands when only one value series', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toStrictEqual([]);
+		});
+	});
+
+	describe('getInitialStackedBands', () => {
+		it('returns one band between each consecutive pair for seriesCount 3', () => {
+			expect(getInitialStackedBands(3)).toStrictEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+			]);
+		});
+
+		it('returns empty array for seriesCount 0 or 1', () => {
+			expect(getInitialStackedBands(0)).toStrictEqual([]);
+			expect(getInitialStackedBands(1)).toStrictEqual([]);
+		});
+
+		it('returns single band for seriesCount 2', () => {
+			expect(getInitialStackedBands(2)).toStrictEqual([{ series: [1, 2] }]);
+		});
+
+		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
+			const bands = getInitialStackedBands(5);
+			expect(bands).toStrictEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+				{ series: [3, 4] },
+				{ series: [4, 5] },
+			]);
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,20 +1,13 @@
-import { StackMode } from 'lib/uPlotV2/config/types';
 import uPlot, { AlignedData } from 'uplot';
 
 /**
  * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series keeps its raw values and
- * contributes nothing to the total. `None` is a no-op.
+ * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
  */
 export function stackSeries(
 	data: AlignedData,
 	omit: (seriesIndex: number) => boolean,
-	mode: StackMode = StackMode.Normal,
 ): { data: AlignedData; bands: uPlot.Band[] } {
-	if (mode === StackMode.None) {
-		return { data, bands: [] };
-	}
-
 	const timeAxis = data[0];
 	const pointCount = timeAxis.length;
 	const valueSeriesCount = data.length - 1; // exclude time axis
@@ -24,7 +17,6 @@ export function stackSeries(
 		valueSeriesCount,
 		pointCount,
 		omit,
-		mode,
 	});
 	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
 
@@ -39,46 +31,6 @@ interface BuildStackedSeriesParams {
 	valueSeriesCount: number;
 	pointCount: number;
 	omit: (seriesIndex: number) => boolean;
-	mode: StackMode;
-}
-
-/** Per-point total. Mixed-sign columns sum signed, as "share of total" implies. */
-function columnTotals({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: Omit<BuildStackedSeriesParams, 'mode'>): number[] {
-	const totals = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = 1; seriesIndex <= valueSeriesCount; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const rawValues = data[seriesIndex] as (number | null)[];
-		rawValues.forEach((rawValue, pointIndex) => {
-			totals[pointIndex] += rawValue == null ? 0 : Number(rawValue);
-		});
-	}
-
-	return totals;
-}
-
-/** A column whose participating series sum to 0 has no share to divide, so every slice is 0. */
-function toPercent(value: number, total: number): number {
-	return total === 0 ? 0 : (value / total) * 100;
-}
-
-/** What a raw value adds to the stack at a given point. */
-type Contribution = (value: number, pointIndex: number) => number;
-
-function contributionForMode(params: BuildStackedSeriesParams): Contribution {
-	if (params.mode !== StackMode.Percent) {
-		return (value): number => value;
-	}
-	// Resolved up front: totals span series the accumulation below has not reached yet.
-	const totals = columnTotals(params);
-	return (value, pointIndex): number => toPercent(value, totals[pointIndex]);
 }
 
 /**
@@ -90,17 +42,9 @@ function buildStackedSeries({
 	valueSeriesCount,
 	pointCount,
 	omit,
-	mode,
 }: BuildStackedSeriesParams): (number | null)[][] {
 	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
 	const cumulativeSums = Array(pointCount).fill(0) as number[];
-	const contributionOf = contributionForMode({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-		mode,
-	});
 
 	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
 		const rawValues = data[seriesIndex] as (number | null)[];
@@ -110,10 +54,7 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += contributionOf(
-					numericValue,
-					pointIndex,
-				));
+				return (cumulativeSums[pointIndex] += numericValue);
 			});
 		}
 	}
@@ -160,3 +101,16 @@ function findNextVisibleSeriesIndex(
 	}
 	return -1;
 }
+
+/**
+ * Returns band indices for initial stacked state (no series omitted).
+ * Top-down: first series at top, band fills between consecutive series.
+ * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
+		bands.push({ series: [seriesIndex, seriesIndex + 1] });
+	}
+	return bands;
+}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -0,0 +1,116 @@
+import uPlot, { AlignedData } from 'uplot';
+
+/**
+ * Stack data cumulatively (top-down: first series = top, last = bottom).
+ * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
+ */
+export function stack(
+	data: AlignedData,
+	omit: (seriesIndex: number) => boolean,
+): { data: AlignedData; bands: uPlot.Band[] } {
+	const timeAxis = data[0];
+	const pointCount = timeAxis.length;
+	const valueSeriesCount = data.length - 1; // exclude time axis
+
+	const stackedSeries = buildStackedSeries({
+		data,
+		valueSeriesCount,
+		pointCount,
+		omit,
+	});
+	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
+
+	return {
+		data: [timeAxis, ...stackedSeries] as AlignedData,
+		bands,
+	};
+}
+
+interface BuildStackedSeriesParams {
+	data: AlignedData;
+	valueSeriesCount: number;
+	pointCount: number;
+	omit: (seriesIndex: number) => boolean;
+}
+
+/**
+ * Accumulate from last series upward: last series = raw values, first = total.
+ * Omitted series are copied as-is (no accumulation).
+ */
+function buildStackedSeries({
+	data,
+	valueSeriesCount,
+	pointCount,
+	omit,
+}: BuildStackedSeriesParams): (number | null)[][] {
+	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
+	const cumulativeSums = Array(pointCount).fill(0) as number[];
+
+	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
+		const rawValues = data[seriesIndex] as (number | null)[];
+
+		if (omit(seriesIndex)) {
+			stackedSeries[seriesIndex - 1] = rawValues;
+		} else {
+			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
+				const numericValue = rawValue == null ? 0 : Number(rawValue);
+				return (cumulativeSums[pointIndex] += numericValue);
+			});
+		}
+	}
+
+	return stackedSeries;
+}
+
+/**
+ * Bands define fill between consecutive visible series for stacked appearance.
+ * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+function buildFillBands(
+	seriesLength: number,
+	omit: (seriesIndex: number) => boolean,
+): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+
+	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
+			seriesLength,
+			seriesIndex,
+			omit,
+		);
+		if (nextVisibleSeriesIndex !== -1) {
+			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
+		}
+	}
+
+	return bands;
+}
+
+function findNextVisibleSeriesIndex(
+	seriesLength: number,
+	afterIndex: number,
+	omit: (seriesIndex: number) => boolean,
+): number {
+	for (let i = afterIndex + 1; i < seriesLength; i++) {
+		if (!omit(i)) {
+			return i;
+		}
+	}
+	return -1;
+}
+
+/**
+ * Returns band indices for initial stacked state (no series omitted).
+ * Top-down: first series at top, band fills between consecutive series.
+ * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
+		bands.push({ series: [seriesIndex, seriesIndex + 1] });
+	}
+	return bands;
+}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -0,0 +1,313 @@
+import { renderHook } from '@testing-library/react';
+import uPlot from 'uplot';
+
+import type { UseBarChartStackingParams } from '../useBarChartStacking';
+import { useBarChartStacking } from '../useBarChartStacking';
+
+type MockConfig = { addHook: jest.Mock };
+
+function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
+	return c as unknown as UseBarChartStackingParams['config'];
+}
+
+function createMockConfig(): {
+	config: MockConfig;
+	invokeSetData: (plot: uPlot) => void;
+	invokeSetSeries: (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	) => void;
+	removeSetData: jest.Mock;
+	removeSetSeries: jest.Mock;
+} {
+	let setDataHandler: ((plot: uPlot) => void) | null = null;
+	let setSeriesHandler:
+		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
+		| null = null;
+
+	const removeSetData = jest.fn();
+	const removeSetSeries = jest.fn();
+
+	const addHook = jest.fn(
+		(
+			hookName: string,
+			handler: (plot: uPlot, ...args: unknown[]) => void,
+		): (() => void) => {
+			if (hookName === 'setData') {
+				setDataHandler = handler as (plot: uPlot) => void;
+				return removeSetData;
+			}
+			if (hookName === 'setSeries') {
+				setSeriesHandler = handler as (
+					plot: uPlot,
+					seriesIndex: number | null,
+					opts: uPlot.Series,
+				) => void;
+				return removeSetSeries;
+			}
+			return jest.fn();
+		},
+	);
+
+	const config: MockConfig = { addHook };
+
+	const invokeSetData = (plot: uPlot): void => {
+		setDataHandler?.(plot);
+	};
+
+	const invokeSetSeries = (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	): void => {
+		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
+	};
+
+	return {
+		config,
+		invokeSetData,
+		invokeSetSeries,
+		removeSetData,
+		removeSetSeries,
+	};
+}
+
+function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
+	return {
+		data: [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		],
+		series: [{ show: true }, { show: true }, { show: true }],
+		delBand: jest.fn(),
+		addBand: jest.fn(),
+		setData: jest.fn(),
+		...overrides,
+	} as unknown as uPlot;
+}
+
+describe('useBarChartStacking', () => {
+	it('returns data as-is when isStackedBarChart is false', () => {
+		const data: uPlot.AlignedData = [
+			[100, 200],
+			[1, 2],
+			[3, 4],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: null,
+			}),
+		);
+		expect(result.current).toBe(data);
+	});
+
+	it('returns data as-is when config is null and isStackedBarChart is true', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[4, 5],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		// Still returns stacked data (computed in useMemo); no hooks registered
+		expect(result.current[0]).toStrictEqual([0, 1]);
+		expect(result.current[1]).toStrictEqual([5, 7]); // stacked
+		expect(result.current[2]).toStrictEqual([4, 5]);
+	});
+
+	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+			[7, 8, 9],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current[0]).toStrictEqual([0, 1, 2]);
+		expect(result.current[1]).toStrictEqual([12, 15, 18]); // s1+s2+s3
+		expect(result.current[2]).toStrictEqual([11, 13, 15]); // s2+s3
+		expect(result.current[3]).toStrictEqual([7, 8, 9]);
+	});
+
+	it('returns data as-is when only one value series (no stacking needed)', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current).toStrictEqual(data);
+	});
+
+	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
+		expect(config.addHook).toHaveBeenCalledWith(
+			'setSeries',
+			expect.any(Function),
+		);
+	});
+
+	it('does not register hooks when isStackedBarChart is false', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).not.toHaveBeenCalled();
+	});
+
+	it('calls cleanup when unmounted', () => {
+		const { config, removeSetData, removeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		const { unmount } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		unmount();
+
+		expect(removeSetData).toHaveBeenCalled();
+		expect(removeSetSeries).toHaveBeenCalled();
+	});
+
+	it('re-stacks and updates plot when setData hook is invoked', () => {
+		const { config, invokeSetData } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		];
+		const plot = createMockPlot({
+			data: [
+				[0, 1, 2],
+				[5, 7, 9],
+				[4, 5, 6],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetData(plot);
+
+		expect(plot.delBand).toHaveBeenCalledWith(null);
+		expect(plot.addBand).toHaveBeenCalled();
+		expect(plot.setData).toHaveBeenCalledWith(
+			expect.arrayContaining([
+				[0, 1, 2],
+				expect.any(Array), // stacked row 1
+				expect.any(Array), // stacked row 2
+			]),
+		);
+	});
+
+	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[10, 20],
+			[5, 10],
+		];
+		// Plot data must match unstacked length so canApplyStacking passes
+		const plot = createMockPlot({
+			data: [
+				[0, 1],
+				[15, 30],
+				[5, 10],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetSeries(plot, 1, { show: false });
+
+		expect(plot.setData).toHaveBeenCalled();
+	});
+
+	it('does not re-stack when setSeries is called with focus option', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+		const plot = createMockPlot();
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		(plot.setData as jest.Mock).mockClear();
+		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
+
+		expect(plot.setData).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -0,0 +1,125 @@
+import {
+	MutableRefObject,
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'react';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { has } from 'lodash-es';
+import uPlot from 'uplot';
+
+import { stackSeries } from '../charts/utils/stackSeriesUtils';
+
+/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
+function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
+	return !plot.series[seriesIndex]?.show;
+}
+
+function canApplyStacking(
+	unstackedData: uPlot.AlignedData | null,
+	plot: uPlot,
+	isUpdating: boolean,
+): boolean {
+	return (
+		!isUpdating &&
+		!!unstackedData &&
+		!!plot.data &&
+		unstackedData[0]?.length === plot.data[0]?.length
+	);
+}
+
+function setupStackingHooks(
+	config: UPlotConfigBuilder,
+	applyStackingToChart: (plot: uPlot) => void,
+	isUpdatingRef: MutableRefObject<boolean>,
+): () => void {
+	const onDataChange = (plot: uPlot): void => {
+		if (!isUpdatingRef.current) {
+			applyStackingToChart(plot);
+		}
+	};
+
+	const onSeriesVisibilityChange = (
+		plot: uPlot,
+		_seriesIdx: number | null,
+		opts: uPlot.Series,
+	): void => {
+		if (!has(opts, 'focus')) {
+			applyStackingToChart(plot);
+		}
+	};
+
+	const removeSetDataHook = config.addHook('setData', onDataChange);
+	const removeSetSeriesHook = config.addHook(
+		'setSeries',
+		onSeriesVisibilityChange,
+	);
+
+	return (): void => {
+		removeSetDataHook?.();
+		removeSetSeriesHook?.();
+	};
+}
+
+export interface UseBarChartStackingParams {
+	data: uPlot.AlignedData;
+	isStackedBarChart?: boolean;
+	config: UPlotConfigBuilder | null;
+}
+
+/**
+ * Handles stacking for bar charts: computes initial stacked data and re-stacks
+ * when data or series visibility changes (e.g. legend toggles).
+ */
+export function useBarChartStacking({
+	data,
+	isStackedBarChart = false,
+	config,
+}: UseBarChartStackingParams): uPlot.AlignedData {
+	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
+	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
+	unstackedDataRef.current = isStackedBarChart ? data : null;
+
+	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
+	const isUpdatingChartRef = useRef(false);
+
+	const chartData = useMemo((): uPlot.AlignedData => {
+		if (!isStackedBarChart || !data || data.length < 2) {
+			return data;
+		}
+		const noSeriesHidden = (): boolean => false; // include all series in initial stack
+		const { data: stacked } = stackSeries(data, noSeriesHidden);
+		return stacked;
+	}, [data, isStackedBarChart]);
+
+	const applyStackingToChart = useCallback((plot: uPlot): void => {
+		const unstacked = unstackedDataRef.current;
+		if (
+			!unstacked ||
+			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
+		) {
+			return;
+		}
+
+		const shouldExcludeSeries = (idx: number): boolean =>
+			isSeriesHidden(plot, idx);
+		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
+
+		plot.delBand(null);
+		bands.forEach((band: uPlot.Band) => plot.addBand(band));
+
+		isUpdatingChartRef.current = true;
+		plot.setData(stacked);
+		isUpdatingChartRef.current = false;
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!isStackedBarChart || !config) {
+			return undefined;
+		}
+		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
+	}, [isStackedBarChart, config, applyStackingToChart]);
+
+	return chartData;
+}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -22,7 +22,6 @@ import { prepareBarPanelConfig } from './utils';
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { StackMode } from 'lib/uPlotV2/config/types';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -148,7 +147,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<BarChart
 					key={`${syncMode}-${syncFilterMode}`}
-					stack={widget.stackedBarChart ? StackMode.Normal : StackMode.None}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -161,6 +159,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					groupByPerQuery={groupByPerQuery}
+					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/__tests__/utils.test.ts

@@ -35,10 +35,20 @@ jest.mock('lib/getLabelName', () => ({
 	),
 }));
 
+jest.mock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+	() => ({
+		getInitialStackedBands: jest.fn().mockReturnValue([]),
+	}),
+);
+
 const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
 	.getLegend as jest.Mock;
 const getLabelNameMock = jest.requireMock('lib/getLabelName')
 	.default as jest.Mock;
+const getInitialStackedBandsMock = jest.requireMock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+).getInitialStackedBands as jest.Mock;
 
 const createApiResponse = (
 	result: MetricRangePayloadProps['data']['result'] = [],
@@ -237,5 +247,36 @@ describe('BarPanel utils', () => {
 			}).getConfig();
 			expect(config.series?.[1]).toMatchObject({ stroke: '#ff0000' });
 		});
+
+		it('calls getInitialStackedBands when widget is stackedBarChart', () => {
+			const widget = createWidget({ stackedBarChart: true });
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+				{
+					metric: {},
+					queryName: 'Q2',
+					values: [[1000, '2']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({ ...baseParams, widget, apiResponse });
+			// seriesCount = result.length + 1 = 3
+			expect(getInitialStackedBandsMock).toHaveBeenCalledWith(3);
+		});
+
+		it('does not call getInitialStackedBands for non-stacked chart', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({ ...baseParams, apiResponse });
+			expect(getInitialStackedBandsMock).not.toHaveBeenCalled();
+		});
 	});
 });

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,6 +1,7 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -68,6 +69,11 @@ export function prepareBarPanelConfig({
 		return builder;
 	}
 
+	if (widget.stackedBarChart) {
+		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		builder.setBands(getInitialStackedBands(seriesCount));
+	}
+
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -4,9 +4,9 @@
 	gap: var(--spacing-4);
 	padding: var(--spacing-2) var(--spacing-2);
 
-	--tabs-content-padding: 0;
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-content-padding: 0;
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 }
 
 .pageError {

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -4,8 +4,8 @@
 	height: 100%;
 	margin-top: var(--spacing-2);
 	margin-left: var(--spacing-2);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 	[role='tabpanel'] {
 		margin: 0;
 		padding: var(--spacing-0) var(--spacing-4);

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,10 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	--tabs-content-padding: 0;
+	--tab-content-padding: 0;
 	margin-top: var(--spacing-3);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 }
 
 .tabLabel {

frontend/src/container/MCPServerSettings/ClientTabs/ClientTabs.styles.scss

@@ -6,8 +6,8 @@
 	}
 
 	// Remove default tab content padding/margin — the card provides spacing.
-	--tabs-content-padding: 0;
-	--tabs-content-margin: var(--spacing-4) 0 0;
+	--tab-content-padding: 0;
+	--tab-content-margin: var(--spacing-4) 0 0;
 }
 
 .mcp-client-tabs {

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -9,7 +9,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { StackMode } from 'lib/uPlotV2/config/types';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
@@ -138,7 +137,6 @@ function TimeSeries({
 									key={`${WIDGET_ID}-${index}`}
 								>
 									<BarChart
-										stack={StackMode.Normal}
 										config={chart.config}
 										legendConfig={{
 											position: LegendPosition.BOTTOM,
@@ -146,6 +144,7 @@ function TimeSeries({
 										data={chart.chartData as uPlot.AlignedData}
 										width={containerDimensions.width}
 										height={containerDimensions.height}
+										isStackedBarChart
 										yAxisUnit={yAxisUnit || 'short'}
 										timezone={timezone}
 									/>

frontend/src/container/MeterExplorer/Explorer/configBuilder.ts

@@ -1,5 +1,6 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -88,6 +89,9 @@ export function buildMeterChartConfig({
 		return builder;
 	}
 
+	const seriesCount = (apiResponse.data.result.length ?? 0) + 1;
+	builder.setBands(getInitialStackedBands(seriesCount));
+
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
     class="c0"
   >
     <p
-      class="_typography_j4pmm_1"
+      class="_typography_ulrzs_1"
       data-slot="typography"
       data-variant="text"
     />
@@ -50,7 +50,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
         class="value-text-container"
       >
         <p
-          class="_typography_j4pmm_1 value-graph-text"
+          class="_typography_ulrzs_1 value-graph-text"
           data-slot="typography"
           data-testid="value-graph-text"
           data-variant="text"
@@ -59,7 +59,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
           295.43
         </p>
         <p
-          class="_typography_j4pmm_1 value-graph-unit"
+          class="_typography_ulrzs_1 value-graph-unit"
           data-slot="typography"
           data-testid="value-graph-suffix-unit"
           data-variant="text"

frontend/src/container/PipelinePage/tests/__snapshots__/DragAction.test.tsx.snap

@@ -22,11 +22,11 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
     class="c0"
   >
     <div
-      class="_switch-wrapper_1a8sn_6"
+      class="_switch-wrapper_jbsv7_1"
     >
       <button
         aria-checked="true"
-        class="_switch_1a8sn_6"
+        class="_switch_jbsv7_1"
         data-color="robin"
         data-state="checked"
         id=":r0:"
@@ -35,7 +35,7 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
         value="on"
       >
         <span
-          class="_switch__thumb_1a8sn_71"
+          class="_switch__thumb_jbsv7_59"
           data-state="checked"
         />
       </button>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap

@@ -74,7 +74,7 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
             />
             <div>
               <p
-                class="_typography_j4pmm_1"
+                class="_typography_ulrzs_1"
                 data-slot="typography"
                 data-variant="text"
               >

frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.module.scss

@@ -105,7 +105,7 @@
 	flex-direction: column;
 	flex: 1;
 	min-height: 0;
-	--tabs-content-padding: 0px;
+	--tab-content-padding: 0px;
 
 	[role='tabpanel'] {
 		display: flex;

frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss

@@ -35,7 +35,7 @@
 }
 
 .filterSelect {
-	min-width: 400px;
+	min-width: 300px;
 	flex: 1;
 }
 
@@ -57,6 +57,8 @@
 
 	--tanstack-cell-padding-top-override: 5px;
 	--tanstack-cell-padding-bottom-override: 5px;
+	--tanstack-cell-padding-left-override: 5px;
+	--tanstack-cell-padding-right-override: 5px;
 
 	--tanstack-cell-padding-left-override: 16px;
 	--tanstack-cell-padding-right-override: 16px;

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -9,7 +9,6 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 		(): TooltipContentItem[] =>
 			buildTooltipContent({
 				data: props.uPlotInstance.data,
-				unstackedData: props.unstackedData,
 				series: props.uPlotInstance.series,
 				dataIndexes: props.dataIndexes,
 				activeSeriesIndex: props.seriesIndex,
@@ -22,7 +21,6 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 			}),
 		[
 			props.uPlotInstance,
-			props.unstackedData,
 			props.seriesIndex,
 			props.dataIndexes,
 			props.yAxisUnit,

frontend/src/lib/uPlotV2/components/Tooltip/TimeSeriesTooltip.tsx

@@ -11,7 +11,6 @@ export default function TimeSeriesTooltip(
 		(): TooltipContentItem[] =>
 			buildTooltipContent({
 				data: props.uPlotInstance.data,
-				unstackedData: props.unstackedData,
 				series: props.uPlotInstance.series,
 				dataIndexes: props.dataIndexes,
 				activeSeriesIndex: props.seriesIndex,
@@ -23,7 +22,6 @@ export default function TimeSeriesTooltip(
 			}),
 		[
 			props.uPlotInstance,
-			props.unstackedData,
 			props.seriesIndex,
 			props.dataIndexes,
 			props.yAxisUnit,

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/utils.test.ts

@@ -72,35 +72,6 @@ describe('Tooltip utils', () => {
 			expect(result).toBe(20);
 		});
 
-		it('reports the pre-stack value, identically for normal and percent', () => {
-			const unstackedData: AlignedData = [[0], [30], [10]];
-			const series = [{}, { show: true }, { show: true }] as Series[];
-			const read = (data: AlignedData): number | null =>
-				getTooltipBaseValue({
-					data,
-					unstackedData,
-					index: 1,
-					dataIndex: 0,
-					isStackedBarChart: true,
-					series,
-				});
-
-			expect(read([[0], [40], [10]])).toBe(30);
-			expect(read([[0], [100], [25]])).toBe(30);
-		});
-
-		it('falls back to subtraction when no pre-stack data is given', () => {
-			const result = getTooltipBaseValue({
-				data: [[0], [40], [10]],
-				index: 1,
-				dataIndex: 0,
-				isStackedBarChart: true,
-				series: [{}, { show: true }, { show: true }] as Series[],
-			});
-
-			expect(result).toBe(30);
-		});
-
 		it('returns null when value is missing', () => {
 			const data: AlignedData = [
 				[0, 1],

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -23,25 +23,17 @@ export function resolveSeriesColor(
 
 export function getTooltipBaseValue({
 	data,
-	unstackedData,
 	index,
 	dataIndex,
 	isStackedBarChart,
 	series,
 }: {
 	data: AlignedData;
-	unstackedData?: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
 	series?: Series[];
 }): number | null {
-	// The subtraction below only recovers the raw value under `normal` stacking.
-	const unstackedSeries = unstackedData?.[index];
-	if (unstackedSeries) {
-		return unstackedSeries[dataIndex] ?? null;
-	}
-
 	let baseValue = data[index][dataIndex] ?? null;
 	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
 	// When series are hidden, we must use the next *visible* series, not index+1,
@@ -64,7 +56,6 @@ export function getTooltipBaseValue({
 
 export function buildTooltipContent({
 	data,
-	unstackedData,
 	series,
 	dataIndexes,
 	activeSeriesIndex,
@@ -76,7 +67,6 @@ export function buildTooltipContent({
 	syncFilterMode,
 }: {
 	data: AlignedData;
-	unstackedData?: AlignedData;
 	series: Series[];
 	dataIndexes: Array<number | null>;
 	activeSeriesIndex: number | null;
@@ -125,7 +115,6 @@ export function buildTooltipContent({
 
 		const baseValue = getTooltipBaseValue({
 			data,
-			unstackedData,
 			index: seriesIndex,
 			dataIndex,
 			isStackedBarChart,

frontend/src/lib/uPlotV2/components/types.ts

@@ -69,11 +69,6 @@ export interface TooltipRenderArgs {
 	syncedSeriesIndexes?: number[] | null;
 	/** Receiver-side filter mode for the synced tooltip. Defaults to Filtered. */
 	syncFilterMode?: SyncTooltipFilterMode;
-	/**
-	 * Pre-stack values, injected by `ChartWrapper`. `Percent` discards the column total,
-	 * so the raw value cannot be recovered from the plot's own cumulative data.
-	 */
-	unstackedData?: uPlot.AlignedData;
 }
 
 export interface IRenderTooltipFooterArgs {

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -20,7 +20,6 @@ import {
 	ConfigBuilderProps,
 	LegendItem,
 	SelectionPreferencesSource,
-	StackMode,
 } from './types';
 import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
 import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
@@ -29,11 +28,6 @@ import { SeriesProps, UPlotSeriesBuilder } from './UPlotSeriesBuilder';
 /**
  * Type definitions for uPlot option objects
  */
-/** Renders a 0–100 number as `50%`, unlike the 0–1 `percentunit`. */
-const PERCENT_AXIS_UNIT = 'percent';
-
-const PERCENT_AXIS_MAX = 100;
-
 type LegendConfig = {
 	show?: boolean;
 	live?: boolean;
@@ -63,8 +57,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private bands: uPlot.Band[] = [];
 
-	private stackMode: StackMode = StackMode.None;
-
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -151,15 +143,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.axes[scaleKey] = new UPlotAxisBuilder(props);
 	}
 
-	/** Drives the fill bands, the percent axis unit and the percent range below. */
-	setStackMode(stackMode: StackMode): void {
-		this.stackMode = stackMode;
-	}
-
-	getStackMode(): StackMode {
-		return this.stackMode;
-	}
-
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -228,41 +211,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.bands = bands;
 	}
 
-	/**
-	 * The panel's own limits are in the source unit, which means nothing once values are
-	 * normalised. Soft rather than hard, so mixed-sign shares outside 0–100 stay visible.
-	 */
-	private resolveScale(scale: UPlotScaleBuilder): UPlotScaleBuilder {
-		if (this.stackMode !== StackMode.Percent || scale.props.scaleKey !== 'y') {
-			return scale;
-		}
-		return new UPlotScaleBuilder({
-			...scale.props,
-			min: undefined,
-			max: undefined,
-			softMin: 0,
-			softMax: PERCENT_AXIS_MAX,
-			// Thresholds still draw, but a 500ms one must not stretch the axis to 0–500.
-			thresholds: undefined,
-		});
-	}
-
-	/** Explicit bands win; otherwise a stack fills between consecutive series. */
-	private resolveBands(): uPlot.Band[] | undefined {
-		if (this.bands.length > 0) {
-			return this.bands;
-		}
-		if (this.stackMode === StackMode.None || this.series.length < 2) {
-			return undefined;
-		}
-		return (
-			this.series
-				.slice(0, -1)
-				// uPlot series are 1-based (index 0 is the timestamp axis).
-				.map((_, index) => ({ series: [index + 1, index + 2] as [number, number] }))
-		);
-	}
-
 	/**
 	 * Set cursor configuration
 	 */
@@ -496,19 +444,9 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 				};
 			}),
 		];
-		config.axes = Object.entries(this.axes).map(([scaleKey, axis]) => {
-			if (scaleKey !== 'y' || this.stackMode !== StackMode.Percent) {
-				return axis.getConfig();
-			}
-			// Ticks read as percentages; the panel unit still applies to tooltips and
-			// thresholds, so build from a copy rather than touching the axis props.
-			return new UPlotAxisBuilder({
-				...axis.props,
-				yAxisUnit: PERCENT_AXIS_UNIT,
-			}).getConfig();
-		});
+		config.axes = Object.values(this.axes).map((a) => a.getConfig());
 		config.scales = this.scales.reduce(
-			(acc, s) => ({ ...acc, ...this.resolveScale(s).getConfig() }),
+			(acc, s) => ({ ...acc, ...s.getConfig() }),
 			{} as Record<string, uPlot.Scale>,
 		);
 
@@ -518,7 +456,7 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		config.cursor = this.getCursorConfig();
 		config.tzDate = this.tzDate;
 		config.plugins = this.plugins.length > 0 ? this.plugins : undefined;
-		config.bands = this.resolveBands();
+		config.bands = this.bands.length > 0 ? this.bands : undefined;
 
 		if (Array.isArray(this.padding)) {
 			config.padding = this.padding;

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -5,7 +5,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
+import { DrawStyle, SelectionPreferencesSource } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -496,161 +496,3 @@ describe('UPlotConfigBuilder', () => {
 		expect(config.bands).toBeUndefined();
 	});
 });
-
-describe('UPlotConfigBuilder stacking', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([]);
-	});
-
-	/**
-	 * Soft limits end up captured in the scale's range closure, so the only way to read
-	 * them back is to run it and inspect the range config it hands uPlot.
-	 */
-	function scaleSoftLimits(
-		builder: UPlotConfigBuilder,
-		scaleKey: string,
-	): { min: number; max: number } {
-		const rangeNum = jest.fn().mockReturnValue([0, 0]);
-		(uPlot as unknown as { rangeNum: unknown }).rangeNum = rangeNum;
-
-		const range = builder.getConfig().scales?.[scaleKey]?.range as (
-			u: unknown,
-			min: number,
-			max: number,
-			key: string,
-		) => void;
-		range({ scales: { [scaleKey]: { distr: 1 } } }, 40, 60, scaleKey);
-
-		const [, , rangeConfig] = rangeNum.mock.calls[0] as [
-			number,
-			number,
-			{ min: { soft: number }; max: { soft: number } },
-		];
-		return { min: rangeConfig.min.soft, max: rangeConfig.max.soft };
-	}
-
-	/** Renders y-axis ticks the way uPlot would, so unit formatting is observable. */
-	function yAxisTicks(builder: UPlotConfigBuilder, ticks: number[]): string[] {
-		const yAxis = builder.getConfig().axes?.find((a) => a.scale === 'y');
-		const values = yAxis?.values as (
-			u: unknown,
-			splits: number[],
-		) => (string | null)[];
-		return values(null, ticks).map((v) => String(v));
-	}
-
-	function builderFor(stack?: StackMode, seriesCount = 3): UPlotConfigBuilder {
-		const builder = new UPlotConfigBuilder({ id: 'stack-test' });
-		if (stack) {
-			builder.setStackMode(stack);
-		}
-		builder.addAxis({ scaleKey: 'y', show: true, side: 3, yAxisUnit: 'ms' });
-		for (let i = 0; i < seriesCount; i++) {
-			builder.addSeries({
-				scaleKey: 'y',
-				label: `S${i}`,
-				drawStyle: DrawStyle.Bar,
-				colorMapping: {},
-				isDarkMode: false,
-			} as SeriesProps);
-		}
-		return builder;
-	}
-
-	it('defaults to no stacking, so no bands and the panel unit on the axis', () => {
-		const builder = builderFor();
-
-		expect(builder.getStackMode()).toBe('none');
-		expect(builder.getConfig().bands).toBeUndefined();
-		expect(yAxisTicks(builder, [1000])).toStrictEqual(['1 s']);
-	});
-
-	it('derives one band per adjacent series pair once a stack is declared', () => {
-		expect(builderFor(StackMode.Normal).getConfig().bands).toStrictEqual([
-			{ series: [1, 2] },
-			{ series: [2, 3] },
-		]);
-	});
-
-	it('emits no bands for a single series', () => {
-		expect(builderFor(StackMode.Normal, 1).getConfig().bands).toBeUndefined();
-	});
-
-	it('keeps the panel unit on the axis for a normal stack', () => {
-		expect(yAxisTicks(builderFor(StackMode.Normal), [1000])).toStrictEqual([
-			'1 s',
-		]);
-	});
-
-	it('formats the axis as percentages for a percent stack', () => {
-		expect(yAxisTicks(builderFor(StackMode.Percent), [0, 50, 100])).toStrictEqual(
-			['0%', '50%', '100%'],
-		);
-	});
-
-	it('leaves other axes on their own unit under a percent stack', () => {
-		const builder = builderFor(StackMode.Percent);
-		builder.addAxis({ scaleKey: 'x', show: true, side: 2 });
-
-		expect(builder.getConfig().axes?.map((a) => a.scale)).toStrictEqual([
-			'y',
-			'x',
-		]);
-	});
-
-	it('pins the y scale to the 0–100 band under a percent stack, dropping panel limits', () => {
-		const builder = new UPlotConfigBuilder({ id: 'stack-scale' });
-		builder.setStackMode(StackMode.Percent);
-		builder.addScale({ scaleKey: 'y', softMin: 5, softMax: 500 });
-
-		// Soft, not hard: mixed-sign shares fall outside 0–100 and must stay visible.
-		expect(builder.getConfig().scales?.y).toMatchObject({ auto: true });
-		expect(scaleSoftLimits(builder, 'y')).toStrictEqual({ min: 0, max: 100 });
-	});
-
-	it('leaves the panel limits alone when the stack is not percent', () => {
-		const builder = new UPlotConfigBuilder({ id: 'stack-scale' });
-		builder.setStackMode(StackMode.Normal);
-		builder.addScale({ scaleKey: 'y', softMin: 5, softMax: 500 });
-
-		expect(scaleSoftLimits(builder, 'y')).toStrictEqual({ min: 5, max: 500 });
-	});
-
-	it.each([StackMode.Normal, StackMode.Percent])(
-		'draws thresholds under a %s stack',
-		(stack) => {
-			const builder = new UPlotConfigBuilder({ id: 'stack-thr' });
-			builder.setStackMode(stack);
-			builder.addThresholds({
-				scaleKey: 'y',
-				thresholds: [{ thresholdValue: 500, thresholdColor: 'red' }],
-				yAxisUnit: 'ms',
-			});
-
-			expect(builder.getConfig().hooks?.draw).toHaveLength(1);
-		},
-	);
-
-	it('keeps a source-unit threshold from stretching the percent band', () => {
-		const builder = new UPlotConfigBuilder({ id: 'stack-thr' });
-		builder.setStackMode(StackMode.Percent);
-		const thresholds = {
-			scaleKey: 'y',
-			thresholds: [{ thresholdValue: 500, thresholdColor: 'red' }],
-			yAxisUnit: 'ms',
-		};
-		builder.addThresholds(thresholds);
-		builder.addScale({ scaleKey: 'y', thresholds });
-
-		// Without this the 500ms threshold would widen a percentage axis to 0–500.
-		expect(scaleSoftLimits(builder, 'y')).toStrictEqual({ min: 0, max: 100 });
-	});
-
-	it('lets explicit bands win over the derived ones', () => {
-		const builder = builderFor(StackMode.Normal);
-		builder.setBands([{ series: [1, 3] }]);
-
-		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
-	});
-});

frontend/src/lib/uPlotV2/config/types.ts

@@ -33,13 +33,6 @@ export enum SelectionPreferencesSource {
 /**
  * Props for configuring the uPlot config builder
  */
-/** `Percent` rescales each x-slice to its column total, so every column fills to 100. */
-export enum StackMode {
-	None = 'none',
-	Normal = 'normal',
-	Percent = 'percent',
-}
-
 export interface ConfigBuilderProps {
 	id: string;
 	onDragSelect?: (startTime: number, endTime: number) => void;

frontend/src/lib/uPlotV2/utils/__tests__/dataUtils.test.ts

@@ -281,20 +281,3 @@ describe('dataUtils', () => {
 		});
 	});
 });
-
-describe('insertLargeGapNullsIntoAlignedData index alignment', () => {
-	// ChartWrapper gap-processes the pre-stack series to keep tooltip indices aligned;
-	// that only holds because insertions are decided from the x axis, never from y.
-	it('inserts at the same positions regardless of the y values', () => {
-		const x = [0, 100, 200];
-		const options = [{ spanGaps: 50 }];
-		const raw = [x, [1, 2, 3]] as uPlot.AlignedData;
-		const stacked = [x, [10, 20, 30]] as uPlot.AlignedData;
-
-		const fromRaw = insertLargeGapNullsIntoAlignedData(raw, options);
-		const fromStacked = insertLargeGapNullsIntoAlignedData(stacked, options);
-
-		expect(fromRaw[0]).toStrictEqual(fromStacked[0]);
-		expect(fromRaw[1]).toHaveLength((fromStacked[1] as unknown[]).length);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -116,7 +116,7 @@
    is hidden — the row stays a single crisp line and scrolls only when narrow. */
 .typeTabsScroll {
 	justify-self: flex-end;
-	--tabs-list-wrapper-secondary-padding-left: 0;
+	--tab-list-wrapper-secondary-padding-left: 0;
 }
 
 /* Connected segmented control, mirroring Overview's SegmentedControl: no outer

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -7,7 +7,6 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import { StackMode } from 'lib/uPlotV2/config/types';
 import {
 	flattenTimeSeries,
 	getExecStats,
@@ -220,9 +219,7 @@ function BarPanelRenderer({
 						height={containerDimensions.height}
 						syncMode={dashboardPreference?.syncMode}
 						syncFilterMode={dashboardPreference?.syncFilterMode}
-						stack={
-							spec.visualization?.stackedBarChart ? StackMode.Normal : StackMode.None
-						}
+						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
 						renderTooltipFooter={renderTooltipFooter}
 						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/utils/buildConfig.ts

@@ -1,6 +1,7 @@
 import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
@@ -100,6 +101,12 @@ function addSeries({
 }: AddSeriesArgs): void {
 	const colorMapping = spec.legend?.customColors ?? {};
 
+	if (spec.visualization?.stackedBarChart) {
+		// uPlot uses 1-based series indices (index 0 is the timestamp axis);
+		// `+1` keeps the band targets aligned with the series we're about to add.
+		builder.setBands(getInitialStackedBands(series.length + 1));
+	}
+
 	series.forEach((s) => {
 		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
 		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);

pkg/statementbuilder/metricsstatementbuilder/statement_builder.go

@@ -428,20 +428,24 @@ func (b *StatementBuilder) buildTemporalAggDeltaFastPath(
 		sb.SelectMore(fmt.Sprintf("`%s`", GroupByColumnAlias(i, g.Name)))
 	}
 
-	aggCol, err := metricstelemetryschema.AggregationColumnForSamplesTable(
-		samplesTable, query.Aggregations[0].Temporality, query.Aggregations[0].TimeAggregation,
-	)
-	if err != nil {
-		return "", nil, err
-	}
-	if query.Aggregations[0].TimeAggregation == metrictypes.TimeAggregationRate {
-		// TODO(srikanthccv): should it be step interval or use [start_time_unix_nano](https://github.com/open-telemetry/opentelemetry-proto/blob/d3fb76d70deb0874692bd0ebe03148580d85f3bb/opentelemetry/proto/metrics/v1/metrics.proto#L400C11-L400C31)?
-		aggCol = fmt.Sprintf("%s/%d", aggCol, stepSec)
-	}
-
+	var aggCol string
 	if query.Aggregations[0].SpaceAggregation.IsPercentile() &&
 		query.Aggregations[0].Type == metrictypes.ExpHistogramType {
+		// merging sketches already spans every series in the step, so neither a
+		// samples-table value column nor the rate divisor applies
 		aggCol = fmt.Sprintf("quantilesDDMerge(0.01, %f)(sketch)[1]", query.Aggregations[0].SpaceAggregation.Percentile())
+	} else {
+		col, err := metricstelemetryschema.AggregationColumnForSamplesTable(
+			samplesTable, query.Aggregations[0].Temporality, query.Aggregations[0].TimeAggregation,
+		)
+		if err != nil {
+			return "", nil, err
+		}
+		aggCol = col
+		if query.Aggregations[0].TimeAggregation == metrictypes.TimeAggregationRate {
+			// TODO(srikanthccv): should it be step interval or use [start_time_unix_nano](https://github.com/open-telemetry/opentelemetry-proto/blob/d3fb76d70deb0874692bd0ebe03148580d85f3bb/opentelemetry/proto/metrics/v1/metrics.proto#L400C11-L400C31)?
+			aggCol = fmt.Sprintf("%s/%d", aggCol, stepSec)
+		}
 	}
 
 	sb.SelectMore(fmt.Sprintf("%s AS value", aggCol))

pkg/statementbuilder/metricsstatementbuilder/stmt_builder_test.go

@@ -126,6 +126,64 @@ func TestStatementBuilder(t *testing.T) {
 			},
 			expectedErr: nil,
 		},
+		{
+			name:        "test_exp_histogram_percentile_delta",
+			requestType: qbtypes.RequestTypeTimeSeries,
+			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Signal:       telemetrytypes.SignalMetrics,
+				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "signoz_latency",
+						Type:             metrictypes.ExpHistogramType,
+						Temporality:      metrictypes.Delta,
+						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
+					},
+				},
+				GroupBy: []qbtypes.GroupByKey{
+					{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+							Name: "service.name",
+						},
+					},
+				},
+			},
+			expected: qbtypes.Statement{
+				Query: "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `__GROUP_BY_KEY_0_service.name`, quantilesDDMerge(0.01, 0.950000)(sketch)[1] AS value FROM signoz_metrics.distributed_exp_hist AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `__GROUP_BY_KEY_0_service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, `__GROUP_BY_KEY_0_service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY ts, `__GROUP_BY_KEY_0_service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `__GROUP_BY_KEY_0_service.name`, ts",
+				Args:  []any{"signoz_latency", uint64(1747936800000), uint64(1747983420000), "delta", "signoz_latency", uint64(1747947390000), uint64(1747983420000)},
+			},
+			expectedErr: nil,
+		},
+		{
+			// the sketch merge spans the whole step, so `rate` must not add a /step divisor
+			name:        "test_exp_histogram_percentile_delta_rate_time_aggregation",
+			requestType: qbtypes.RequestTypeTimeSeries,
+			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Signal:       telemetrytypes.SignalMetrics,
+				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "signoz_latency",
+						Type:             metrictypes.ExpHistogramType,
+						Temporality:      metrictypes.Delta,
+						TimeAggregation:  metrictypes.TimeAggregationRate,
+						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
+					},
+				},
+				GroupBy: []qbtypes.GroupByKey{
+					{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+							Name: "service.name",
+						},
+					},
+				},
+			},
+			expected: qbtypes.Statement{
+				Query: "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `__GROUP_BY_KEY_0_service.name`, quantilesDDMerge(0.01, 0.950000)(sketch)[1] AS value FROM signoz_metrics.distributed_exp_hist AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `__GROUP_BY_KEY_0_service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, `__GROUP_BY_KEY_0_service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY ts, `__GROUP_BY_KEY_0_service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `__GROUP_BY_KEY_0_service.name`, ts",
+				Args:  []any{"signoz_latency", uint64(1747936800000), uint64(1747983420000), "delta", "signoz_latency", uint64(1747947390000), uint64(1747983420000)},
+			},
+			expectedErr: nil,
+		},
 		{
 			name:        "test_histogram_percentile1",
 			requestType: qbtypes.RequestTypeTimeSeries,

tests/fixtures/metrics.py

@@ -132,7 +132,12 @@ class MetricsSample(ABC):
 
 
 class MetricsExpHist(ABC):
-    """Represents a row in the exp_hist table for exponential histograms."""
+    """Represents a row in the exp_hist table for exponential histograms.
+
+    Carries the raw observations rather than a serialized sketch: the `sketch`
+    column is an AggregateFunction state that only ClickHouse can build, so
+    `observations` is what gets folded into one on insert. Must be non-empty.
+    """
 
     env: str
     temporality: str
@@ -143,7 +148,7 @@ class MetricsExpHist(ABC):
     sum: np.float64
     min: np.float64
     max: np.float64
-    sketch: bytes
+    observations: list[int]
     flags: np.uint32
 
     def __init__(
@@ -151,11 +156,7 @@ class MetricsExpHist(ABC):
         metric_name: str,
         fingerprint: np.uint64,
         timestamp: datetime.datetime,
-        count: int,
-        sum_value: float,
-        min_value: float,
-        max_value: float,
-        sketch: bytes = b"",
+        observations: list[int],
         temporality: str = "Unspecified",
         env: str = "default",
         flags: int = 0,
@@ -165,28 +166,13 @@ class MetricsExpHist(ABC):
         self.metric_name = metric_name
         self.fingerprint = fingerprint
         self.unix_milli = np.int64(int(timestamp.timestamp() * 1e3))
-        self.count = np.uint64(count)
-        self.sum = np.float64(sum_value)
-        self.min = np.float64(min_value)
-        self.max = np.float64(max_value)
-        self.sketch = sketch
+        self.observations = observations
+        self.count = np.uint64(len(observations))
+        self.sum = np.float64(sum(observations))
+        self.min = np.float64(min(observations))
+        self.max = np.float64(max(observations))
         self.flags = np.uint32(flags)
 
-    def to_row(self) -> list:
-        return [
-            self.env,
-            self.temporality,
-            self.metric_name,
-            self.fingerprint,
-            self.unix_milli,
-            self.count,
-            self.sum,
-            self.min,
-            self.max,
-            self.sketch,
-            self.flags,
-        ]
-
 
 class MetricsMetadata(ABC):
     """Represents a row in the metadata table for metric metadata."""
@@ -429,6 +415,73 @@ class Metrics(ABC):
         return metrics
 
 
+class ExpHistogramMetrics(ABC):
+    """High-level exponential histogram representation. Produces both time series
+    and exp_hist entries."""
+
+    metric_name: str
+    labels: dict[str, str]
+    temporality: str
+    timestamp: datetime.datetime
+    observations: list[int]
+
+    @property
+    def time_series(self) -> MetricsTimeSeries:
+        return self._time_series
+
+    @property
+    def exp_hist(self) -> MetricsExpHist:
+        return self._exp_hist
+
+    def __init__(
+        self,
+        metric_name: str,
+        observations: list[int],
+        labels: dict[str, str] = {},
+        timestamp: datetime.datetime | None = None,
+        temporality: str = "Delta",
+        flags: int = 0,
+        description: str = "",
+        unit: str = "",
+        env: str = "default",
+        resource_attributes: dict[str, str] = {},
+        scope_attributes: dict[str, str] = {},
+    ) -> None:
+        if timestamp is None:
+            timestamp = datetime.datetime.now()
+        self.metric_name = metric_name
+        self.labels = labels
+        self.temporality = temporality
+        self.timestamp = timestamp
+        self.observations = observations
+
+        self._time_series = MetricsTimeSeries(
+            metric_name=metric_name,
+            labels=labels,
+            timestamp=timestamp,
+            temporality=temporality,
+            description=description,
+            unit=unit,
+            # the querier resolves the metric type from this column, and only an
+            # ExponentialHistogram here routes the query to the sketch read
+            type_="ExponentialHistogram",
+            is_monotonic=False,
+            env=env,
+            resource_attrs=resource_attributes,
+            scope_attrs=scope_attributes,
+        )
+
+        self._exp_hist = MetricsExpHist(
+            metric_name=metric_name,
+            fingerprint=self._time_series.fingerprint,
+            timestamp=timestamp,
+            observations=observations,
+            temporality=temporality,
+            env=env,
+            flags=flags,
+        )
+
+
 class MetricsReducedTimeSeries(ABC):
     """Represents a row in the time_series_v4_reduced table i.e what
     the time_series_v4_reduced_mv materializes for a metric under a
@@ -853,6 +906,86 @@ def insert_metrics(
     )
 
 
+def insert_exp_histogram_metrics_to_clickhouse(conn, metrics: list[ExpHistogramMetrics]) -> None:
+    """
+    Insert exponential histograms into ClickHouse tables.
+    Handles insertion into:
+    - distributed_time_series_v4 (time series metadata)
+    - distributed_exp_hist (per-point sketches)
+    """
+    time_series_map: dict[tuple[int, int], MetricsTimeSeries] = {}
+    for metric in metrics:
+        fp = int(metric.time_series.fingerprint)
+        hour_bucket = int(metric.time_series.unix_milli) // 3_600_000
+        if (fp, hour_bucket) not in time_series_map:
+            metric.time_series.unix_milli = np.int64(hour_bucket * 3_600_000)
+            time_series_map[(fp, hour_bucket)] = metric.time_series
+
+    if len(time_series_map) > 0:
+        conn.insert(
+            database="signoz_metrics",
+            table="distributed_time_series_v4",
+            column_names=[
+                "env",
+                "temporality",
+                "metric_name",
+                "description",
+                "unit",
+                "type",
+                "is_monotonic",
+                "fingerprint",
+                "unix_milli",
+                "labels",
+                "attrs",
+                "scope_attrs",
+                "resource_attrs",
+            ],
+            data=[ts.to_row() for ts in time_series_map.values()],
+        )
+
+    # `sketch` is AggregateFunction(quantilesDD(...), UInt64) — the state has to be
+    # folded server-side, it cannot be sent as a literal. The quantilesDDState
+    # parameters must match the column's exactly or the INSERT is rejected.
+    for metric in metrics:
+        hist = metric.exp_hist
+        conn.command(
+            "INSERT INTO signoz_metrics.distributed_exp_hist "
+            "(env, temporality, metric_name, fingerprint, unix_milli, count, sum, min, max, sketch, flags) "
+            "SELECT %(env)s, %(temporality)s, %(metric_name)s, %(fingerprint)s, %(unix_milli)s, "
+            "%(count)s, %(sum)s, %(min)s, %(max)s, "
+            "quantilesDDState(0.01, 0.5, 0.75, 0.9, 0.95, 0.99)(toUInt64(observation)), %(flags)s "
+            "FROM (SELECT arrayJoin(%(observations)s) AS observation)",
+            parameters={
+                "env": hist.env,
+                "temporality": hist.temporality,
+                "metric_name": hist.metric_name,
+                "fingerprint": int(hist.fingerprint),
+                "unix_milli": int(hist.unix_milli),
+                "count": int(hist.count),
+                "sum": float(hist.sum),
+                "min": float(hist.min),
+                "max": float(hist.max),
+                "observations": hist.observations,
+                "flags": int(hist.flags),
+            },
+        )
+
+
+@pytest.fixture(name="insert_exp_histogram_metrics", scope="function")
+def insert_exp_histogram_metrics(
+    clickhouse: types.TestContainerClickhouse,
+) -> Generator[Callable[[list[ExpHistogramMetrics]], None], Any]:
+    def _insert_exp_histogram_metrics(metrics: list[ExpHistogramMetrics]) -> None:
+        insert_exp_histogram_metrics_to_clickhouse(clickhouse.conn, metrics)
+
+    yield _insert_exp_histogram_metrics
+
+    truncate_metrics_tables(
+        clickhouse.conn,
+        clickhouse.env["SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_CLUSTER"],
+    )
+
+
 def insert_reduced_metrics_to_clickhouse(
     conn,
     time_series: list[MetricsReducedTimeSeries],

tests/integration/tests/queriermetrics/14_exp_histogram.py

@@ -0,0 +1,129 @@
+from collections.abc import Callable
+from datetime import UTC, datetime, timedelta
+from http import HTTPStatus
+
+import pytest
+
+from fixtures import types
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+from fixtures.metrics import ExpHistogramMetrics
+from fixtures.querier import (
+    build_builder_query,
+    get_all_series,
+    get_series_values,
+    make_query_request,
+)
+
+# quantilesDD carries 0.01 relative accuracy and the log-spaced observations put
+# neighbouring ranks ~1.25% apart, so a percentile can land a few percent off
+PERCENTILE_TOLERANCE = 0.05
+
+
+@pytest.mark.parametrize(
+    "space_aggregation, frontend_first, frontend_last, backend_first, backend_last",
+    [
+        ("p50", 118, 153, 711, 921),
+        ("p95", 1108, 1435, 6651, 8613),
+        ("p99", 1352, 1751, 8113, 10507),
+    ],
+)
+@pytest.mark.parametrize("time_aggregation", ["", "rate"])
+def test_exp_histogram_percentile_delta_grouped(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_exp_histogram_metrics: Callable[[list[ExpHistogramMetrics]], None],
+    time_aggregation: str,
+    space_aggregation: str,
+    frontend_first: float,
+    frontend_last: float,
+    backend_first: float,
+    backend_last: float,
+) -> None:
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = "test_exp_histogram_latency"
+
+    insert_exp_histogram_metrics(
+        [
+            ExpHistogramMetrics(
+                metric_name=metric_name,
+                # log-spaced latencies with a long tail, drifting ~30% higher across
+                # the hour so each point carries a distinct distribution
+                observations=[round(base * 1.0125**rank * (1 + minute / 200)) for rank in range(400)],
+                labels={"service.name": service},
+                timestamp=now - timedelta(minutes=60 - minute),
+                temporality="Delta",
+            )
+            for service, base in (("frontend", 10), ("backend", 60))
+            for minute in range(60)
+        ]
+    )
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        time_aggregation,
+        space_aggregation,
+        temporality="delta",
+        group_by=["service.name"],
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK, response.text
+
+    all_series = get_all_series(response.json(), "A")
+    values_by_service = {series["labels"][0]["value"]: [point["value"] for point in sorted(series["values"], key=lambda point: point["timestamp"])] for series in all_series}
+    assert set(values_by_service.keys()) == {"frontend", "backend"}, f"got series {set(values_by_service.keys())}"
+
+    for service, first, last in (
+        ("frontend", frontend_first, frontend_last),
+        ("backend", backend_first, backend_last),
+    ):
+        values = values_by_service[service]
+        assert len(values) >= 55, f"{service}: expected a point per minute, got {len(values)}"
+        assert values[0] == pytest.approx(first, rel=PERCENTILE_TOLERANCE), f"{service} {space_aggregation} at the oldest point: got {values[0]}, want ~{first}"
+        assert values[-1] == pytest.approx(last, rel=PERCENTILE_TOLERANCE), f"{service} {space_aggregation} at the newest point: got {values[-1]}, want ~{last}"
+        # every observation drifts up minute over minute, so the sketch must too
+        assert values == sorted(values), f"{service} {space_aggregation} is not non-decreasing: {values}"
+
+
+def test_exp_histogram_percentile_delta_merges_across_series(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_exp_histogram_metrics: Callable[[list[ExpHistogramMetrics]], None],
+) -> None:
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = "test_exp_histogram_latency_merged"
+
+    insert_exp_histogram_metrics(
+        [
+            ExpHistogramMetrics(
+                metric_name=metric_name,
+                observations=[round(base * 1.0125**rank * (1 + minute / 200)) for rank in range(400)],
+                labels={"service.name": service},
+                timestamp=now - timedelta(minutes=60 - minute),
+                temporality="Delta",
+            )
+            for service, base in (("frontend", 10), ("backend", 60))
+            for minute in range(60)
+        ]
+    )
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query("A", metric_name, "", "p95", temporality="delta")
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK, response.text
+
+    # both services' sketches merge into one, so p95 sits well above the frontend's
+    # own p95 (~1108) and below the backend's (~6651)
+    values = [point["value"] for point in sorted(get_series_values(response.json(), "A"), key=lambda point: point["timestamp"])]
+    assert len(values) >= 55, f"expected a point per minute, got {len(values)}"
+    assert values[0] == pytest.approx(5188, rel=PERCENTILE_TOLERANCE), f"oldest point: got {values[0]}, want ~5188"
+    assert values[-1] == pytest.approx(6718, rel=PERCENTILE_TOLERANCE), f"newest point: got {values[-1]}, want ~6718"