chore: remove comment

#### Description

- Charts take a `stack` prop (`none` | `normal` | `percent`) and hand it
to their config, which derives the fill bands, and for `percent` the
percentage y-axis and a 0–100 soft range. Callers stop computing bands
or transforming data — V1/V2 bar panels, Meter Explorer and Billing each
drop their `setBands` call and declare `stack` instead.
- Stacking is no longer bar-specific, so TimeSeries stacks too. The
upcoming area chart is built on TimeSeries and needs this.
- `percent` rescales each x-slice to its column total. Mixed-sign
columns divide by the signed total, so shares can fall outside 0–100 and
still sum to it; a column summing to zero yields zero. The percent range
is soft rather than hard so those out-of-band shares stay visible.
- Tooltips now report the pre-stack value, identically in every mode.
They used to recover it by subtracting the series below, which only
works while stacking is cumulative — `percent` discards the column
total, so the raw value cannot be derived from the plot's data at all.
- `stack` lives on the two chart prop types rather than the shared
config builder props, so the ~10 other consumers of that builder
(histogram, alert previews, infra metrics, …) never expose an option
they cannot honour.

No spec or API change: both bar panels still read the existing
`stackedBarChart` boolean and map it to `normal`/`none`. `percent` is
reachable from the chart layer but nothing selects it yet — that arrives
with the panel spec change.

#### Additional Information

- Behaviour outside dashboards should be unchanged, with one exception:
Meter Explorer and the V1 bar panel previously passed `seriesCount + 1`
when computing bands, emitting a trailing band pointing at a series that
does not exist (Billing passed the correct count). Deriving bands
centrally normalises all three.
- Thresholds still draw under `percent`, but no longer widen the scale —
they carry source-unit values, so one at 500ms would stretch a
percentage axis to 0–500.
- percent also swaps the unit to a percent formatter and sets *soft* 0–1
limits (they normalise to 0–1, we use 0–100). It applies those limits
only when the user set none; we always apply them, because our soft
limits come from `spec.axes` in the source unit and are meaningless once
values are normalised.
- Commits are split so each one builds and is reviewable on its own: the
stacking algorithm, the config derivation, the tooltip change, then the
chart/consumer migration.

docs/api/openapi.yml

@@ -2646,6 +2646,54 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardtypesAreaChartAppearance:
+      properties:
+        fillMode:
+          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
+        fillOpacity:
+          $ref: '#/components/schemas/DashboardtypesFillOpacity'
+        lineInterpolation:
+          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
+        lineStyle:
+          $ref: '#/components/schemas/DashboardtypesLineStyle'
+        showPoints:
+          type: boolean
+        spanGaps:
+          $ref: '#/components/schemas/DashboardtypesSpanGaps'
+      type: object
+    DashboardtypesAreaChartPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
+      type: object
+    DashboardtypesAreaChartVisualization:
+      properties:
+        fillSpans:
+          type: boolean
+        stack:
+          $ref: '#/components/schemas/DashboardtypesStackMode'
+        timePreference:
+          $ref: '#/components/schemas/DashboardtypesTimePreference'
+      type: object
+    DashboardtypesAreaFillMode:
+      enum:
+      - solid
+      - gradient
+      - none
+      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2877,6 +2925,11 @@ components:
       - gradient
       - none
       type: string
+    DashboardtypesFillOpacity:
+      maximum: 1
+      minimum: 0
+      nullable: true
+      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -3294,6 +3347,7 @@ components:
     DashboardtypesPanelPlugin:
       discriminator:
         mapping:
+          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -3305,6 +3359,7 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
@@ -3315,12 +3370,25 @@ components:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
+      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
       type: string
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AreaChartPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -3639,6 +3707,12 @@ components:
             are connected.
           type: boolean
       type: object
+    DashboardtypesStackMode:
+      enum:
+      - none
+      - normal
+      - percent
+      type: string
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

frontend/.claude/skills/scaffold-feature/SKILL.md

@@ -1,96 +0,0 @@
----
-name: scaffold-feature
-description: Scaffold the co-located feature structure in frontend/src. Use when creating a new page, feature, view (tab), or component folder, when a feature needs a shell with tabs, or when moving existing code out of src/container into src/pages. Generates the full folder tree (components/hooks/store/types/utils/constants/__tests__/README) with one command.
----
-
-# Scaffold a feature
-
-The frontend is moving to a co-located layout (Bulletproof React / FSD): everything a
-feature owns lives in the feature's folder. Read `references/layout.md` for the full
-target structure and the rules about what may live where.
-
-**Never hand-create these folders.** Run the generator so every feature comes out
-identical, then fill it in.
-
-## Command
-
-```bash
-pnpm scaffold page <Name> [options]        # a page/feature under src/pages
-pnpm scaffold component <Name> [options]   # a component folder
-```
-
-| Option | Applies to | Effect |
-| --- | --- | --- |
-| `--views A,B,C` | `page` | Makes the page a shell with tab switching and generates one view folder per name. |
-| `--parent <path>` | `component` | Parent, relative to `src` (default `components`). A feature path like `pages/Traces/Explorer` nests the component under that feature's `components/`. |
-| `--full` | `component` | Also adds `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `README.md` for a component that owns children. |
-| `--no-tests` | both | Skips `__tests__/`. |
-| `--dry-run` | both | Prints what would be written, writes nothing. |
-| `--force` | both | Overwrites files that already exist (off by default; existing entries are reported as skipped). |
-
-Folder names keep the casing you type, with the first letter forced up, so
-`LLMObservability` stays `LLMObservability` rather than being re-cased. Separated names
-collapse to PascalCase: `api-monitoring` and `api monitoring` both give
-`pages/ApiMonitoring`. Test ids, headings, tab paths and constants are all derived from
-that folder name — `TracesFunnels` gives `traces-funnels-page`, `Traces Funnels` and
-`TRACES_FUNNELS_TABS`.
-
-## What you get
-
-```
-pages/ApiMonitoring/
-  index.tsx                       # the page component
-  ApiMonitoring.module.scss
-  components/  hooks/  store/     # empty, ready for the first file
-  types.ts  utils.ts  constants.ts
-  __tests__/ApiMonitoring.test.tsx
-  README.md
-```
-
-With `--views`, the root becomes a `RouteTab` shell (`index.tsx` + `constants.ts` with the
-tab definitions) and each view gets the tree above.
-
-## Examples
-
-```bash
-pnpm scaffold page ApiMonitoring                                    # leaf page, no shell
-pnpm scaffold page Traces --views Explorer,Funnels,Views            # shell + 3 views
-pnpm scaffold page Traces/Explorer                                  # one more view under an existing shell
-pnpm scaffold component DataTable                                   # global, src/components/DataTable
-pnpm scaffold component QueryBar --parent pages/Traces/Explorer     # feature-local component
-```
-
-## After generating
-
-1. **Wire the route** (pages only) — the generator does not touch shared files:
-   - add the path to `src/constants/routes.ts`
-   - add a `Loadable` lazy import to `src/AppRoutes/pageComponents.ts`
-   - add the entry to `src/AppRoutes/routes.ts`
-   - for a shell, replace the local `BASE_PATH` strings in `constants.ts` with those `ROUTES` entries
-2. **Delete the placeholders you don't need** — empty `types.ts` / `utils.ts` /
-   `constants.ts`, and any of `components/`, `hooks/`, `store/` the feature won't use.
-   Those three folders are created empty; git only picks them up once they hold a file.
-3. **Fill the README** — the generated file has the prompts; a feature folder without a
-   filled-in README is not done.
-4. **Follow the repo rules while filling it in**: `@signozhq/ui` + `@signozhq/icons` only,
-   CSS Modules (`docs/css-modules-guide.md`), React Query for server state (prefer
-   `api/generated` hooks), nuqs for URL state, Zustand for client state, `data-testid` on
-   every interactive element.
-5. **Verify** before reporting done:
-   ```bash
-   pnpm tsgo --noEmit
-   pnpm oxlint src/pages/<Feature>
-   pnpm jest src/pages/<Feature>
-   ```
-
-## Editing the templates
-
-Templates live in `templates/` — `feature/`, `shell/`, `component/` and
-`component-extras/` (the `--full` additions). Every template file ends in `.tmpl`, which
-keeps TypeScript, lint and your editor from reading them as source; the generator strips
-that suffix on the way out, so `index.tsx.tmpl` becomes `index.tsx`. Tokens are
-substituted in both file names and contents: `__Pascal__`, `__kebab__`, `__camel__`,
-`__CONST__`, `__Title__`. The shell's `constants.ts` additionally takes
-`__VIEW_IMPORTS__` and `__TAB_ENTRIES__`, which the generator builds from `--views`. The
-empty folders come from `FEATURE_DIRS` in `scaffold.mjs`. Change these, not the generated
-output, when the team's conventions move.

frontend/.claude/skills/scaffold-feature/references/layout.md

@@ -1,102 +0,0 @@
-# Frontend layout
-
-Target structure for `frontend/src`. Inspired by Bulletproof React and Feature-Sliced
-Design: a feature owns its components, hooks, state, types and tests, and nothing outside
-the feature folder reaches into it.
-
-```
-src/
-  app/                    # bootstrap: routing, global styles/theme
-  pages/
-    Traces/               # has a shell
-      index.tsx           # shell — tab switching only
-      constants.ts        # tab definitions
-      Explorer/           # a view
-        index.tsx         # view entry — composition, no business logic
-        components/
-          QueryBar/       # same shape as a global component, nests further as needed
-            QueryBar.tsx
-            QueryBar.module.scss
-            components/
-            hooks/
-            __tests__/
-        hooks/            # feature hooks + React Query wrappers over api/generated
-        store/            # Zustand stores for feature-local client state
-        types.ts
-        utils.ts
-        constants.ts
-        __tests__/
-        README.md
-      Funnels/
-      Views/
-    ApiMonitoring/        # no shell — same shape, one level up
-      index.tsx
-      components/
-      hooks/
-      store/
-      types.ts
-      utils.ts
-      constants.ts
-      __tests__/
-      README.md
-  components/             # cross-feature components, same internal shape as above
-    DataTable/
-      DataTable.tsx
-      DataTable.module.scss
-      components/
-      hooks/
-      store/
-      types.ts
-      utils.ts
-      constants.ts
-      __tests__/
-      README.md
-  lib/
-  utils/
-  types/
-  constants/
-  store/                  # app-wide client state only
-  i18n/
-  api/
-    generated/            # Orval output — never edited by hand
-    client/               # axios instances, interceptors, error handlers
-  index.tsx
-```
-
-## Rules
-
-- **Folder names are PascalCase**, spelled the way the feature is spelled in the product
-  (`ApiMonitoring`, `LLMObservability`). This holds for shells, views and components alike.
-- **A page folder is the unit of ownership.** Anything used by exactly one feature lives
-  inside it, however deeply nested. Promote to `src/components` / `src/utils` / `src/hooks`
-  only when a second feature needs it.
-- **`index.tsx` is the entry**, and it composes. Business logic goes to `hooks/`, data
-  shaping to `utils.ts`, state to `store/`.
-- **Nested components repeat the same shape.** A component folder may hold its own
-  `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `__tests__/`.
-  Nest as deep as ownership actually goes; don't flatten a component that owns children.
-- **Shell vs no shell.** A page with tabs gets a shell `index.tsx` whose only job is tab
-  switching, plus one folder per view. A page without tabs is just the feature folder.
-- **Tests.** Feature-root tests in `__tests__/`; a component's tests next to the component
-  (its own `__tests__/`). Never reach across features in a test.
-- **No barrel files.** A page's `index.tsx` is the route entry (a component), not a
-  re-export hub. Import components by their own path.
-- **File size.** Split past ~300 LOC: extract components, and behaviour into
-  `use<Component>Callbacks`-style hooks. More than ~3 type declarations in a file means a
-  `types.ts`, and more than ~3 in `types.ts` means a `types/` folder.
-- **Styling.** CSS Modules (`<Name>.module.scss`) next to the component — see
-  `docs/css-modules-guide.md`. Semantic tokens only.
-- **State.** Server → React Query (prefer `api/generated` hooks); URL → nuqs; client →
-  Zustand, one store per file, always with a selector. No Redux or Context for new code.
-
-## Migrating existing code
-
-Most feature code still lives in `src/container` and `src/modules`, with a thin wrapper in
-`src/pages`. When touching one of those features:
-
-1. Scaffold the target with `pnpm scaffold page <Name>` (see `../SKILL.md`).
-2. Move files in, one concern per commit — components, then hooks, then state.
-3. Update importers; keep `src/container/<Feature>` deleted, not re-exported. A shim
-   directory is how the old layout survives.
-4. Do the dead-code pass first: unused props, exports, imports and debug logs go before the
-   move, in their own commit.

frontend/.claude/skills/scaffold-feature/scaffold.mjs

@@ -1,379 +0,0 @@
-#!/usr/bin/env node
-import {
-	existsSync,
-	mkdirSync,
-	readdirSync,
-	readFileSync,
-	statSync,
-	writeFileSync,
-} from 'node:fs';
-import { dirname, join, relative, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const SKILL_DIR = dirname(fileURLToPath(import.meta.url));
-const TEMPLATES = join(SKILL_DIR, 'templates');
-const FRONTEND = resolve(SKILL_DIR, '..', '..', '..');
-const SRC = join(FRONTEND, 'src');
-
-// Created empty, so the folder exists before it has a file to justify it.
-const FEATURE_DIRS = ['components', 'hooks', 'store'];
-
-const USAGE = `usage:
-  pnpm scaffold page <Name> [--views A,B,C] [--no-tests] [--dry-run] [--force]
-  pnpm scaffold component <Name> [--parent <path>] [--full] [--no-tests] [--dry-run] [--force]
-
-examples:
-  pnpm scaffold page ApiMonitoring
-  pnpm scaffold page Traces --views Explorer,Funnels,Views
-  pnpm scaffold page Traces/Explorer
-  pnpm scaffold component DataTable
-  pnpm scaffold component QueryBar --parent pages/Traces/Explorer`;
-
-function fail(message) {
-	process.stderr.write(`error: ${message}\n\n${USAGE}\n`);
-	process.exit(1);
-}
-
-function expandEquals(argv) {
-	return argv.flatMap((arg) =>
-		arg.startsWith('--') && arg.includes('=')
-			? [arg.slice(0, arg.indexOf('=')), arg.slice(arg.indexOf('=') + 1)]
-			: [arg],
-	);
-}
-
-function parseArgs(argv) {
-	const flags = {
-		views: [],
-		parent: 'components',
-		full: false,
-		tests: true,
-		dryRun: false,
-		force: false,
-	};
-	const positional = [];
-	const provided = new Set();
-
-	for (let i = 0; i < argv.length; i += 1) {
-		const arg = argv[i];
-		provided.add(arg);
-		if (arg === '--views' || arg === '--parent') {
-			const value = argv[i + 1];
-			if (!value || value.startsWith('--')) {
-				fail(`${arg} needs a value`);
-			}
-			if (arg === '--views') {
-				flags.views = value
-					.split(',')
-					.map((view) => view.trim())
-					.filter(Boolean);
-				if (!flags.views.length) {
-					fail('--views needs at least one name');
-				}
-			} else {
-				flags.parent = value;
-			}
-			i += 1;
-		} else if (arg === '--full') {
-			flags.full = true;
-		} else if (arg === '--no-tests') {
-			flags.tests = false;
-		} else if (arg === '--dry-run') {
-			flags.dryRun = true;
-		} else if (arg === '--force') {
-			flags.force = true;
-		} else if (arg === '-h' || arg === '--help') {
-			process.stdout.write(`${USAGE}\n`);
-			process.exit(0);
-		} else if (arg.startsWith('-')) {
-			fail(`unknown option: ${arg}`);
-		} else {
-			positional.push(arg);
-		}
-	}
-
-	return { positional, flags, provided };
-}
-
-const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-
-// Folder names keep the casing the author typed — only the first letter is forced
-// up — so acronyms like `LLMObservability` survive. Separated names
-// (`api-monitoring`, `api monitoring`) collapse to PascalCase.
-function toDirName(value) {
-	const name = value.trim().replace(/[^a-zA-Z0-9\-_ ]/g, '');
-	if (!name) {
-		fail(`"${value}" has no usable name characters`);
-	}
-	return /[-_\s]/.test(name)
-		? name
-				.split(/[-_\s]+/)
-				.filter(Boolean)
-				.map(capitalize)
-				.join('')
-		: capitalize(name);
-}
-
-const splitHumps = (name, separator) =>
-	name
-		.replace(/([a-z0-9])([A-Z])/g, `$1${separator}$2`)
-		.replace(/([A-Z]+)([A-Z][a-z])/g, `$1${separator}$2`);
-
-const toKebab = (value) => splitHumps(toDirName(value), '-').toLowerCase();
-const toTitle = (value) => splitHumps(toDirName(value), ' ');
-const toConst = (value) => toKebab(value).replace(/-/g, '_').toUpperCase();
-const toCamel = (value) => {
-	const dir = toDirName(value);
-	return dir.charAt(0).toLowerCase() + dir.slice(1);
-};
-
-function tokensFor(name) {
-	return {
-		__Pascal__: toDirName(name),
-		__kebab__: toKebab(name),
-		__camel__: toCamel(name),
-		__CONST__: toConst(name),
-		__Title__: toTitle(name),
-	};
-}
-
-function substitute(text, tokens) {
-	return Object.entries(tokens).reduce(
-		(acc, [token, value]) => acc.split(token).join(value),
-		text,
-	);
-}
-
-const created = [];
-const skipped = [];
-let targetExisted = false;
-
-function writeFile(target, contents, flags) {
-	const rel = relative(FRONTEND, target);
-	if (existsSync(target) && !flags.force) {
-		skipped.push(rel);
-		return;
-	}
-	if (!flags.dryRun) {
-		mkdirSync(dirname(target), { recursive: true });
-		writeFileSync(target, contents);
-	}
-	created.push(rel);
-}
-
-function createDirs(targetDir, dirs, flags) {
-	for (const dir of dirs) {
-		const target = join(targetDir, dir);
-		const rel = `${relative(FRONTEND, target)}/`;
-		if (existsSync(target)) {
-			skipped.push(rel);
-			continue;
-		}
-		if (!flags.dryRun) {
-			mkdirSync(target, { recursive: true });
-		}
-		created.push(rel);
-	}
-}
-
-// Template files carry a `.tmpl` suffix so no TypeScript, lint or editor tooling
-// treats them as source; the suffix is dropped on the way out.
-function renderTree(templateDir, targetDir, tokens, flags) {
-	for (const entry of readdirSync(templateDir).sort()) {
-		const from = join(templateDir, entry);
-		const name = substitute(entry.replace(/\.tmpl$/, ''), tokens);
-		if (statSync(from).isDirectory()) {
-			if (!flags.tests && name === '__tests__') {
-				continue;
-			}
-			renderTree(from, join(targetDir, name), tokens, flags);
-		} else {
-			writeFile(
-				join(targetDir, name),
-				substitute(readFileSync(from, 'utf8'), tokens),
-				flags,
-			);
-		}
-	}
-}
-
-function shellTokens(views) {
-	const viewImports = views
-		.map((view) => `import ${toDirName(view)} from './${toDirName(view)}';`)
-		.join('\n');
-	const tabEntries = views
-		.map((view) => {
-			const path = '`${BASE_PATH}/' + toKebab(view) + '`';
-			return [
-				'\t{',
-				`\t\tComponent: ${toDirName(view)},`,
-				`\t\tname: '${toTitle(view)}',`,
-				`\t\troute: ${path},`,
-				`\t\tkey: ${path},`,
-				'\t},',
-			].join('\n');
-		})
-		.join('\n');
-	return { __VIEW_IMPORTS__: viewImports, __TAB_ENTRIES__: `${tabEntries}\n` };
-}
-
-function scaffoldFeature(targetDir, name, flags) {
-	renderTree(join(TEMPLATES, 'feature'), targetDir, tokensFor(name), flags);
-	createDirs(targetDir, FEATURE_DIRS, flags);
-}
-
-function scaffoldPage(name, flags) {
-	const segments = name.split('/').filter(Boolean).map(toDirName);
-	if (!segments.length) {
-		fail('page needs a name');
-	}
-
-	const viewDirs = flags.views.map(toDirName);
-	const duplicate = viewDirs.find((dir, index) => viewDirs.indexOf(dir) !== index);
-	if (duplicate) {
-		fail(`duplicate view: ${duplicate}`);
-	}
-
-	const targetDir = join(SRC, 'pages', ...segments);
-	const leaf = segments[segments.length - 1];
-	targetExisted = existsSync(targetDir);
-
-	if (flags.views.length) {
-		renderTree(
-			join(TEMPLATES, 'shell'),
-			targetDir,
-			{ ...tokensFor(leaf), ...shellTokens(flags.views) },
-			flags,
-		);
-		for (const view of flags.views) {
-			scaffoldFeature(join(targetDir, toDirName(view)), view, flags);
-		}
-	} else {
-		scaffoldFeature(targetDir, leaf, flags);
-	}
-
-	return targetDir;
-}
-
-function resolveParent(parent) {
-	const segments = parent
-		.replace(/^src\//, '')
-		.replace(/\/components\/?$/, '')
-		.split('/')
-		.filter(Boolean);
-	if (segments[0] === 'pages') {
-		return ['pages', ...segments.slice(1).map(toDirName)];
-	}
-	return segments;
-}
-
-function scaffoldComponent(name, flags) {
-	const tokens = tokensFor(name);
-	const parent = resolveParent(flags.parent);
-	const isGlobal = parent.length === 1 && parent[0] === 'components';
-	const componentsDir = isGlobal
-		? join(SRC, 'components')
-		: join(SRC, ...parent, 'components');
-
-	if (relative(SRC, componentsDir).startsWith('..')) {
-		fail(`--parent must stay inside src: ${flags.parent}`);
-	}
-	if (parent[0] === 'pages' && parent.length < 2) {
-		fail('a component under pages/ needs a feature: --parent pages/<Feature>');
-	}
-	if (!isGlobal && !existsSync(join(SRC, ...parent))) {
-		fail(`parent does not exist: src/${parent.join('/')}`);
-	}
-
-	const targetDir = join(componentsDir, tokens.__Pascal__);
-	targetExisted = existsSync(targetDir);
-
-	renderTree(join(TEMPLATES, 'component'), targetDir, tokens, flags);
-	if (flags.full) {
-		renderTree(join(TEMPLATES, 'component-extras'), targetDir, tokens, flags);
-		createDirs(targetDir, FEATURE_DIRS, flags);
-	}
-
-	return targetDir;
-}
-
-function report(kind, targetDir, flags) {
-	const rel = relative(FRONTEND, targetDir);
-	const verb = flags.dryRun ? 'would create' : 'created';
-
-	if (targetExisted) {
-		process.stdout.write(
-			`\nwarning: ${rel} already existed — only missing entries were added\n`,
-		);
-	}
-
-	process.stdout.write(`\n${verb} ${created.length} entr(ies) in ${rel}\n`);
-	for (const entry of created) {
-		process.stdout.write(`  + ${entry}\n`);
-	}
-
-	if (skipped.length) {
-		process.stdout.write(
-			`\nskipped ${skipped.length} existing entr(ies) — pass --force to overwrite files\n`,
-		);
-		for (const entry of skipped) {
-			process.stdout.write(`  = ${entry}\n`);
-		}
-	}
-
-	const steps =
-		kind === 'page'
-			? [
-					'register the route: src/constants/routes.ts, src/AppRoutes/pageComponents.ts, src/AppRoutes/routes.ts',
-					...(flags.views.length
-						? ['swap BASE_PATH in constants.ts for the new ROUTES entries']
-						: []),
-					'delete the placeholders you do not need (empty types/utils/constants, unused folders)',
-					'fill in README.md',
-					`verify: pnpm tsgo --noEmit && pnpm oxlint ${rel} && pnpm jest ${rel}`,
-				]
-			: [
-					'delete the placeholders you do not need (empty types/utils/constants, unused folders)',
-					`verify: pnpm tsgo --noEmit && pnpm oxlint ${rel} && pnpm jest ${rel}`,
-				];
-
-	process.stdout.write('\nnext:\n');
-	steps.forEach((step, index) => {
-		process.stdout.write(`  ${index + 1}. ${step}\n`);
-	});
-	process.stdout.write(
-		'\nnote: git does not track empty folders — components/, hooks/ and store/ only\n' +
-			'show up in a commit once they hold a file.\n',
-	);
-}
-
-const { positional, flags, provided } = parseArgs(expandEquals(process.argv.slice(2)));
-const [kind, name] = positional;
-
-if (!kind || !name) {
-	fail('a command and a name are required');
-}
-if (positional.length > 2) {
-	fail(`unexpected argument: ${positional[2]}`);
-}
-
-function rejectFlags(unsupported) {
-	for (const flag of unsupported) {
-		if (provided.has(flag)) {
-			fail(`${flag} does not apply to \`${kind}\``);
-		}
-	}
-}
-
-let targetDir;
-if (kind === 'page') {
-	rejectFlags(['--parent', '--full']);
-	targetDir = scaffoldPage(name, flags);
-} else if (kind === 'component') {
-	rejectFlags(['--views']);
-	targetDir = scaffoldComponent(name, flags);
-} else {
-	fail(`unknown command: ${kind}`);
-}
-
-report(kind, targetDir, flags);

frontend/.claude/skills/scaffold-feature/templates/component-extras/README.md.tmpl

@@ -1,21 +0,0 @@
-# __Pascal__
-
-<!-- What this component renders, and the features that use it. -->
-
-## API
-
-<!-- Props, and the behaviour each one controls. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `__Pascal__.tsx` | The component. |
-| `__Pascal__.module.scss` | Styles. |
-| `components/` | Child components this one owns. |
-| `hooks/` | Behaviour extracted out of the component. |
-| `store/` | Zustand stores this component owns. |
-| `types.ts` | Types shared inside this folder. |
-| `utils.ts` | Pure helpers. |
-| `constants.ts` | Constants. |
-| `__tests__/` | Tests. |

frontend/.claude/skills/scaffold-feature/templates/component/__Pascal__.module.scss.tmpl

@@ -1,4 +0,0 @@
-.__camel__ {
-	display: flex;
-	color: var(--l1-foreground);
-}

frontend/.claude/skills/scaffold-feature/templates/component/__Pascal__.tsx.tmpl

@@ -1,7 +0,0 @@
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	return <div className={styles.__camel__} data-testid="__kebab__" />;
-}
-
-export default __Pascal__;

frontend/.claude/skills/scaffold-feature/templates/component/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../__Pascal__';
-
-describe('__Pascal__', () => {
-	it('renders', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/feature/README.md.tmpl

@@ -1,28 +0,0 @@
-# __Title__
-
-<!-- One paragraph: what this feature does, who uses it, and where it is reachable from. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `index.tsx` | Feature entry. Composition only — no business logic. |
-| `components/` | Feature-local components, nested as `components/<Name>/`. |
-| `hooks/` | Feature hooks, including React Query wrappers over `api/generated`. |
-| `store/` | Zustand stores for feature-local client state. |
-| `types.ts` | Shared feature types. Split into `types/` past ~3 declarations. |
-| `utils.ts` | Pure helpers. |
-| `constants.ts` | Feature constants. |
-| `__tests__/` | Feature-root tests. Component tests live with the component. |
-
-## Data
-
-<!-- Endpoints this feature reads/writes, and the hooks that wrap them. -->
-
-## State
-
-<!-- What lives in the URL (nuqs), what lives in React Query, what lives in store/. -->
-
-## Routing
-
-<!-- Route key in constants/routes.ts, lazy import in AppRoutes/pageComponents.ts, entry in AppRoutes/routes.ts. -->

frontend/.claude/skills/scaffold-feature/templates/feature/__Pascal__.module.scss.tmpl

@@ -1,12 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-	padding: var(--spacing-4);
-	background: var(--l1-background);
-}
-
-.title {
-	color: var(--l1-foreground);
-	font-size: var(--font-size-lg);
-}

frontend/.claude/skills/scaffold-feature/templates/feature/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../index';
-
-describe('__Pascal__', () => {
-	it('renders the page', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__-page')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/feature/index.tsx.tmpl

@@ -1,11 +0,0 @@
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	return (
-		<section className={styles.container} data-testid="__kebab__-page">
-			<h1 className={styles.title}>__Title__</h1>
-		</section>
-	);
-}
-
-export default __Pascal__;

frontend/.claude/skills/scaffold-feature/templates/shell/README.md.tmpl

@@ -1,18 +0,0 @@
-# __Title__
-
-<!-- One paragraph: what this section of the product is, and what each tab is for. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `index.tsx` | Shell. Tab switching only — no feature logic. |
-| `constants.ts` | Tab definitions (`TabRoutes`). |
-| `<View>/` | One folder per tab, each a self-contained feature. |
-
-## Routing
-
-`constants.ts` builds tab paths from a local `BASE_PATH`. Register those paths in
-`src/constants/routes.ts`, add the lazy import to `src/AppRoutes/pageComponents.ts` and
-the entries to `src/AppRoutes/routes.ts`, then replace `BASE_PATH` with the `ROUTES`
-entries so there is a single source of truth for each path.

frontend/.claude/skills/scaffold-feature/templates/shell/__Pascal__.module.scss.tmpl

@@ -1,6 +0,0 @@
-.shell {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	background: var(--l1-background);
-}

frontend/.claude/skills/scaffold-feature/templates/shell/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../index';
-
-describe('__Pascal__', () => {
-	it('renders the tab shell', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__-shell')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/shell/constants.ts.tmpl

@@ -1,8 +0,0 @@
-import { TabRoutes } from 'components/RouteTab/types';
-
-__VIEW_IMPORTS__
-
-const BASE_PATH = '/__kebab__';
-
-export const __CONST___TABS: TabRoutes[] = [
-__TAB_ENTRIES__];

frontend/.claude/skills/scaffold-feature/templates/shell/index.tsx.tmpl

@@ -1,25 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import RouteTab from 'components/RouteTab';
-import history from 'lib/history';
-
-import { __CONST___TABS } from './constants';
-
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	const { pathname } = useLocation();
-
-	return (
-		<div className={styles.shell} data-testid="__kebab__-shell">
-			<RouteTab
-				routes={__CONST___TABS}
-				activeKey={pathname}
-				history={history}
-				showRightSection={false}
-				defaultActiveKey={__CONST___TABS[0].key}
-			/>
-		</div>
-	);
-}
-
-export default __Pascal__;

frontend/package.json

@@ -7,7 +7,6 @@
     "preinstall": "npx only-allow pnpm",
     "i18n:generate-hash": "node ./i18-generate-hash.cjs",
     "dev": "vite",
-    "scaffold": "node .claude/skills/scaffold-feature/scaffold.mjs",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",

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

@@ -5,6 +5,7 @@ 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,
@@ -131,9 +132,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,26 +58,17 @@ describe('prepareBillingBarConfig', () => {
 		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
 	});
 
-	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
+	it('sets padding and focus alpha for behavioral parity', () => {
 		const builder = prepareBillingBarConfig({
 			...baseProps,
 			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
 		});
 		const config = builder.getConfig();
-		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		// Stacking bands come from the chart now — see useChartStacking.
 		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,7 +1,6 @@
 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';
@@ -63,7 +62,6 @@ 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,25 +6,24 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
+import { StackMode } from 'lib/uPlotV2/config/types';
+
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
 	const {
 		children,
-		isStackedBarChart,
 		customTooltip,
 		config,
 		data,
+		stack = StackMode.None,
 		pinnedTooltipElement,
 		...rest
 	} = props;
 
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
+	// 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 renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -37,7 +36,6 @@ 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,
 			};
@@ -48,7 +46,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.timezone,
 			rest.yAxisUnit,
 			rest.decimalPrecision,
-			isStackedBarChart,
 			rest.canPinTooltip,
 			rest.renderTooltipFooter,
 		],
@@ -58,7 +55,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 		<ChartWrapper
 			{...rest}
 			config={config}
-			data={chartData}
+			data={data}
 			customTooltip={renderTooltip}
 			pinnedTooltipElement={pinnedTooltipElement}
 		>

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

@@ -6,12 +6,15 @@ 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 { ChartProps } from '../types';
+import { ChartWrapperProps } from '../types';
+import { useChartStacking } from './useChartStacking';
 
 const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 300;
@@ -39,9 +42,20 @@ export default function ChartWrapper({
 	pinnedTooltipElement,
 	tooltipPortalRoot,
 	'data-testid': testId,
-}: ChartProps): JSX.Element {
+}: ChartWrapperProps): 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) {
@@ -61,11 +75,11 @@ export default function ChartWrapper({
 	const renderTooltipCallback = useCallback(
 		(args: TooltipRenderArgs): React.ReactNode => {
 			if (customTooltip) {
-				return customTooltip(args);
+				return customTooltip({ ...args, unstackedData });
 			}
 			return null;
 		},
-		[customTooltip],
+		[customTooltip, unstackedData],
 	);
 
 	const syncMetadata = useMemo(
@@ -91,7 +105,7 @@ export default function ChartWrapper({
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
 					<UPlotChart
 						config={config}
-						data={data}
+						data={chartData}
 						width={chartWidth}
 						height={chartHeight}
 						plotRef={(plot): void => {

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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,132 @@
+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,10 +6,16 @@ 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, ...rest } = props;
+	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 renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {

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

@@ -14,6 +14,7 @@ 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;
@@ -52,27 +53,26 @@ interface UPlotChartDataProps {
 	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+/** Everything the shared uPlot shell consumes; each chart's props narrow it. */
+export interface ChartWrapperProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {}
+
+export interface TimeSeriesChartProps extends ChartWrapperProps {
 	timezone?: Timezone;
+	/** How series compose. Defaults to `none`, which draws them independently. */
+	stack?: StackMode;
 }
 
-export interface HistogramChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+export interface BarChartProps extends ChartWrapperProps {
+	timezone?: Timezone;
+	/** How series compose. Defaults to `none`, which draws them independently. */
+	stack?: StackMode;
+}
+
+export interface HistogramChartProps extends ChartWrapperProps {
 	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

@@ -0,0 +1,158 @@
+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

@@ -1,117 +0,0 @@
-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,13 +1,20 @@
+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 is excluded from stacking.
+ * When `omit(seriesIndex)` returns true, that series keeps its raw values and
+ * contributes nothing to the total. `None` is a no-op.
  */
 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
@@ -17,6 +24,7 @@ export function stackSeries(
 		valueSeriesCount,
 		pointCount,
 		omit,
+		mode,
 	});
 	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
 
@@ -31,6 +39,46 @@ 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]);
 }
 
 /**
@@ -42,9 +90,17 @@ 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)[];
@@ -54,7 +110,10 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
+				return (cumulativeSums[pointIndex] += contributionOf(
+					numericValue,
+					pointIndex,
+				));
 			});
 		}
 	}
@@ -101,16 +160,3 @@ 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

@@ -1,116 +0,0 @@
-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

@@ -1,313 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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,6 +22,7 @@ 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 {
@@ -147,6 +148,7 @@ 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,
@@ -159,7 +161,6 @@ 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,20 +35,10 @@ 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'] = [],
@@ -247,36 +237,5 @@ 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,7 +1,6 @@
 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';
@@ -69,11 +68,6 @@ 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/MeterExplorer/Explorer/TimeSeries.tsx

@@ -9,6 +9,7 @@ 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';
@@ -137,6 +138,7 @@ function TimeSeries({
 									key={`${WIDGET_ID}-${index}`}
 								>
 									<BarChart
+										stack={StackMode.Normal}
 										config={chart.config}
 										legendConfig={{
 											position: LegendPosition.BOTTOM,
@@ -144,7 +146,6 @@ 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,6 +1,5 @@
 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 {
@@ -89,9 +88,6 @@ 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/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -9,6 +9,7 @@ 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,
@@ -21,6 +22,7 @@ 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,6 +11,7 @@ export default function TimeSeriesTooltip(
 		(): TooltipContentItem[] =>
 			buildTooltipContent({
 				data: props.uPlotInstance.data,
+				unstackedData: props.unstackedData,
 				series: props.uPlotInstance.series,
 				dataIndexes: props.dataIndexes,
 				activeSeriesIndex: props.seriesIndex,
@@ -22,6 +23,7 @@ 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,6 +72,35 @@ 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,17 +23,25 @@ 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,
@@ -56,6 +64,7 @@ export function getTooltipBaseValue({
 
 export function buildTooltipContent({
 	data,
+	unstackedData,
 	series,
 	dataIndexes,
 	activeSeriesIndex,
@@ -67,6 +76,7 @@ export function buildTooltipContent({
 	syncFilterMode,
 }: {
 	data: AlignedData;
+	unstackedData?: AlignedData;
 	series: Series[];
 	dataIndexes: Array<number | null>;
 	activeSeriesIndex: number | null;
@@ -115,6 +125,7 @@ export function buildTooltipContent({
 
 		const baseValue = getTooltipBaseValue({
 			data,
+			unstackedData,
 			index: seriesIndex,
 			dataIndex,
 			isStackedBarChart,

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

@@ -69,6 +69,11 @@ 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,6 +20,7 @@ import {
 	ConfigBuilderProps,
 	LegendItem,
 	SelectionPreferencesSource,
+	StackMode,
 } from './types';
 import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
 import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
@@ -28,6 +29,11 @@ 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;
@@ -57,6 +63,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private bands: uPlot.Band[] = [];
 
+	private stackMode: StackMode = StackMode.None;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -143,6 +151,15 @@ 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
 	 */
@@ -211,6 +228,41 @@ 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
 	 */
@@ -444,9 +496,19 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 				};
 			}),
 		];
-		config.axes = Object.values(this.axes).map((a) => a.getConfig());
+		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.scales = this.scales.reduce(
-			(acc, s) => ({ ...acc, ...s.getConfig() }),
+			(acc, s) => ({ ...acc, ...this.resolveScale(s).getConfig() }),
 			{} as Record<string, uPlot.Scale>,
 		);
 
@@ -456,7 +518,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.bands.length > 0 ? this.bands : undefined;
+		config.bands = this.resolveBands();
 
 		if (Array.isArray(this.padding)) {
 			config.padding = this.padding;

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

@@ -56,17 +56,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 				maxTime = fallbackMax;
 			}
 
-			// Align max time to "endTime - 1 minute", rounded down to minute precision
-			// This matches legacy getXAxisScale behavior and avoids empty space at the right edge
-			const oneMinuteAgoTimestamp = (maxTime - 60) * 1000;
-			const currentDate = new Date(oneMinuteAgoTimestamp);
-
-			currentDate.setSeconds(0);
-			currentDate.setMilliseconds(0);
-
-			const unixTimestampSeconds = Math.floor(currentDate.getTime() / 1000);
-			maxTime = unixTimestampSeconds;
-
 			return {
 				[scaleKey]: {
 					time: true,

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 } from '../types';
+import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -496,3 +496,161 @@ 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/__tests__/UPlotScaleBuilder.test.ts

@@ -44,7 +44,7 @@ describe('UPlotScaleBuilder', () => {
 		expect(adjustSpy).toHaveBeenCalledWith(null, null, undefined, undefined);
 	});
 
-	it('handles time scales using explicit min/max and rounds max down to the previous minute', () => {
+	it('handles time scales using explicit min/max', () => {
 		const min = 1_700_000_000; // seconds
 		const max = 1_700_000_600; // seconds
 
@@ -62,21 +62,25 @@ describe('UPlotScaleBuilder', () => {
 
 		expect(xScale.time).toBe(true);
 		expect(xScale.auto).toBe(false);
-		expect(Array.isArray(xScale.range)).toBe(true);
+		expect(xScale.range).toStrictEqual([min, max]);
+	});
 
-		const [resolvedMin, resolvedMax] = xScale.range as [number, number];
+	it('keeps short time windows intact', () => {
+		const min = 1_786_527_160;
+		const max = 1_786_527_183;
 
-		// min is passed through
-		expect(resolvedMin).toBe(min);
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'x',
+				time: true,
+				min,
+				max,
+			}),
+		);
 
-		// max is coerced to "endTime - 1 minute" and rounded down to minute precision
-		const oneMinuteAgoTimestamp = (max - 60) * 1000;
-		const currentDate = new Date(oneMinuteAgoTimestamp);
-		currentDate.setSeconds(0);
-		currentDate.setMilliseconds(0);
-		const expectedMax = Math.floor(currentDate.getTime() / 1000);
+		const config = builder.getConfig();
 
-		expect(resolvedMax).toBe(expectedMax);
+		expect(config.x.range).toStrictEqual([min, max]);
 	});
 
 	it('falls back to getFallbackMinMaxTimeStamp when time scale has no min/max', () => {
@@ -99,9 +103,7 @@ describe('UPlotScaleBuilder', () => {
 
 		expect(getFallbackMinMaxSpy).toHaveBeenCalled();
 		expect(resolvedMin).toBe(100);
-		// max is aligned to "fallbackMax - 60 seconds" minute boundary
-		expect(resolvedMax).toBeLessThanOrEqual(200);
-		expect(resolvedMax).toBeGreaterThan(100);
+		expect(resolvedMax).toBe(200);
 	});
 
 	it('pipes limits through soft-limit adjustment and log-scale normalization before range config', () => {

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

@@ -33,6 +33,13 @@ 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,3 +281,20 @@ 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/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -7,6 +7,7 @@ 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,
@@ -219,7 +220,9 @@ function BarPanelRenderer({
 						height={containerDimensions.height}
 						syncMode={dashboardPreference?.syncMode}
 						syncFilterMode={dashboardPreference?.syncFilterMode}
-						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
+						stack={
+							spec.visualization?.stackedBarChart ? StackMode.Normal : StackMode.None
+						}
 						renderTooltipFooter={renderTooltipFooter}
 						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>

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

@@ -1,7 +1,6 @@
 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';
@@ -101,12 +100,6 @@ 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/types/dashboardtypes/perses_dashboard_test.go

@@ -1274,6 +1274,264 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	}
 }
 
+func TestAreaChartPanelDefaults(t *testing.T) {
+	data := []byte(`{
+		"variables": [],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"links": [],
+					"plugin": {
+						"kind": "signoz/AreaChartPanel",
+						"spec": {}
+					},
+					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		},
+		"links": [],
+		"layouts": []
+	}`)
+	d, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+	spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
+
+	assert.Equal(t, "solid", spec.ChartAppearance.FillMode.ValueOrDefault(), "area fillMode defaults to solid, where the TimeSeries FillMode defaults to none")
+	assert.Nil(t, spec.ChartAppearance.FillOpacity, "an omitted fillOpacity stays nil so the renderer applies the kind default")
+	assert.Equal(t, "none", spec.Visualization.Stack.ValueOrDefault(), "expected Stack default none")
+	assert.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
+	assert.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
+	assert.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
+	assert.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
+	assert.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+	assert.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
+
+	output, err := json.Marshal(d)
+	require.NoError(t, err, "marshal dashboard failed")
+	outputStr := string(output)
+	for field, want := range map[string]string{
+		"fillMode":    `"solid"`,
+		"stack":       `"none"`,
+		"fillOpacity": `null`,
+	} {
+		assert.Contains(t, outputStr, `"`+field+`":`+want, "expected stored/response JSON to contain %s:%s", field, want)
+	}
+}
+
+func TestAreaChartPanelRoundTrip(t *testing.T) {
+	data := []byte(`{
+		"variables": [],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"links": [],
+					"plugin": {
+						"kind": "signoz/AreaChartPanel",
+						"spec": {
+							"visualization": {"timePreference": "global_time", "fillSpans": false, "stack": "percent"},
+							"chartAppearance": {"fillMode": "gradient", "fillOpacity": 0.4}
+						}
+					},
+					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		},
+		"links": [],
+		"layouts": []
+	}`)
+	d, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+	spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
+
+	assert.Equal(t, "percent", spec.Visualization.Stack.ValueOrDefault(), "expected stack percent")
+	assert.Equal(t, "gradient", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected fillMode gradient")
+
+	output, err := json.Marshal(d)
+	require.NoError(t, err, "marshal dashboard failed")
+	assert.Contains(t, string(output), `"stack":"percent"`, "expected stack in stored/response JSON")
+	assert.Contains(t, string(output), `"fillMode":"gradient"`, "expected fillMode in stored/response JSON")
+}
+
+func TestAreaChartPanelFillOpacity(t *testing.T) {
+	tests := []struct {
+		scenario                 string
+		chartAppearance          string
+		expectedFillOpacitySet   bool
+		expectedFillOpacityValue FillOpacity
+		expectedMarshalledJSON   string
+	}{
+		{
+			scenario:                 "zero is a set value, not an absent one",
+			chartAppearance:          `{"fillOpacity": 0}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 0,
+			expectedMarshalledJSON:   `"fillOpacity":0`,
+		},
+		{
+			scenario:                 "fully opaque upper bound",
+			chartAppearance:          `{"fillOpacity": 1}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 1,
+			expectedMarshalledJSON:   `"fillOpacity":1`,
+		},
+		{
+			scenario:                 "typical fractional value",
+			chartAppearance:          `{"fillOpacity": 0.4}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 0.4,
+			expectedMarshalledJSON:   `"fillOpacity":0.4`,
+		},
+		{
+			scenario:                 "precision beyond one decimal place survives",
+			chartAppearance:          `{"fillOpacity": 0.125}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 0.125,
+			expectedMarshalledJSON:   `"fillOpacity":0.125`,
+		},
+		{
+			scenario:               "omitted field stays nil so the renderer applies the kind default",
+			chartAppearance:        `{}`,
+			expectedFillOpacitySet: false,
+			expectedMarshalledJSON: `"fillOpacity":null`,
+		},
+		{
+			scenario:               "explicit null stays nil rather than decoding as zero",
+			chartAppearance:        `{"fillOpacity": null}`,
+			expectedFillOpacitySet: false,
+			expectedMarshalledJSON: `"fillOpacity":null`,
+		},
+	}
+
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			data := []byte(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "signoz/AreaChartPanel", "spec": {"chartAppearance": ` + test.chartAppearance + `}},
+							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`)
+			d, err := unmarshalDashboard(data)
+			require.NoError(t, err, "unmarshal and validate failed")
+
+			require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+			spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
+
+			if !test.expectedFillOpacitySet {
+				assert.Nil(t, spec.ChartAppearance.FillOpacity, "expected fillOpacity to stay unset")
+			} else {
+				require.NotNil(t, spec.ChartAppearance.FillOpacity, "expected fillOpacity to decode as a set value")
+				assert.Equal(t, test.expectedFillOpacityValue, *spec.ChartAppearance.FillOpacity, "unexpected decoded fillOpacity")
+			}
+
+			output, err := json.Marshal(d)
+			require.NoError(t, err, "marshal dashboard failed")
+			assert.Contains(t, string(output), test.expectedMarshalledJSON, "unexpected fillOpacity in stored/response JSON")
+		})
+	}
+}
+
+func TestInvalidateAreaChartPanelSpecValues(t *testing.T) {
+	tests := []struct {
+		scenario               string
+		panelKind              string
+		panelSpec              string
+		expectedErrorSubstring string
+	}{
+		{
+			scenario:               "unknown stack mode",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"visualization": {"stack": "stacked"}}`,
+			expectedErrorSubstring: "stack mode",
+		},
+		{
+			scenario:               "unknown area fill mode",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillMode": "striped"}}`,
+			expectedErrorSubstring: "fill mode",
+		},
+		{
+			scenario:               "fill opacity on a 0-100 scale",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": 40}}`,
+			expectedErrorSubstring: "invalid fillOpacity 40: must be between 0 and 1",
+		},
+		{
+			scenario:               "negative fill opacity",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": -0.5}}`,
+			expectedErrorSubstring: "invalid fillOpacity -0.5: must be between 0 and 1",
+		},
+		{
+			scenario:               "non-numeric fill opacity",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": "0.4"}}`,
+			expectedErrorSubstring: "cannot unmarshal string",
+		},
+		{
+			scenario:               "stack on a time series panel",
+			panelKind:              "signoz/TimeSeriesPanel",
+			panelSpec:              `{"visualization": {"stack": "normal"}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+		{
+			scenario:               "fill opacity on a time series panel",
+			panelKind:              "signoz/TimeSeriesPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": 0.4}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+		{
+			scenario:               "stacked bar chart on an area panel",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"visualization": {"stackedBarChart": true}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+		{
+			scenario:               "stack on a bar chart panel",
+			panelKind:              "signoz/BarChartPanel",
+			panelSpec:              `{"visualization": {"stack": "percent"}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+	}
+
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			data := []byte(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "` + test.panelKind + `", "spec": ` + test.panelSpec + `},
+							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`)
+			_, err := unmarshalDashboard(data)
+			require.Error(t, err, "expected the spec to be rejected")
+			assert.Contains(t, err.Error(), test.expectedErrorSubstring, "unexpected error message: %s", err.Error())
+		})
+	}
+}
+
 func TestNumberPanelDefaults(t *testing.T) {
 	data := []byte(`{
 		"variables": [],

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -30,6 +30,7 @@ func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(PanelKindTimeSeries): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
 		string(PanelKindBarChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
+		string(PanelKindAreaChart):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
 		string(PanelKindNumber):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
 		string(PanelKindPieChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
 		string(PanelKindTable):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
@@ -60,6 +61,7 @@ func (PanelPlugin) JSONSchemaOneOf() []any {
 	return []any{
 		PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)},
 		PanelPluginVariant[BarChartPanelSpec]{Kind: string(PanelKindBarChart)},
+		PanelPluginVariant[AreaChartPanelSpec]{Kind: string(PanelKindAreaChart)},
 		PanelPluginVariant[NumberPanelSpec]{Kind: string(PanelKindNumber)},
 		PanelPluginVariant[PieChartPanelSpec]{Kind: string(PanelKindPieChart)},
 		PanelPluginVariant[TablePanelSpec]{Kind: string(PanelKindTable)},
@@ -223,6 +225,7 @@ var (
 	panelPluginSpecs = map[PanelPluginKind]func() any{
 		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
 		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
+		PanelKindAreaChart:  func() any { return new(AreaChartPanelSpec) },
 		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
 		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
 		PanelKindTable:      func() any { return new(TablePanelSpec) },
@@ -245,6 +248,7 @@ var (
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
 		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindAreaChart:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -183,7 +183,8 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		return nil, err
 	}
 
-	// fillGaps lives on the panel visualization; only timeseries and bar chart carry it.
+	// fillGaps lives on the panel visualization; only timeseries, bar chart and
+	// area chart carry it.
 	fillGaps := false
 	switch panelSpec := panel.Spec.Plugin.Spec.(type) {
 	case *TimeSeriesPanelSpec:
@@ -194,6 +195,10 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		if panelSpec != nil {
 			fillGaps = panelSpec.Visualization.FillSpans
 		}
+	case *AreaChartPanelSpec:
+		if panelSpec != nil {
+			fillGaps = panelSpec.Visualization.FillSpans
+		}
 	}
 
 	return &qb.QueryRangeRequest{

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -168,6 +168,7 @@ type PanelPluginKind string
 const (
 	PanelKindTimeSeries PanelPluginKind = "signoz/TimeSeriesPanel"
 	PanelKindBarChart   PanelPluginKind = "signoz/BarChartPanel"
+	PanelKindAreaChart  PanelPluginKind = "signoz/AreaChartPanel"
 	PanelKindNumber     PanelPluginKind = "signoz/NumberPanel"
 	PanelKindPieChart   PanelPluginKind = "signoz/PieChartPanel"
 	PanelKindTable      PanelPluginKind = "signoz/TablePanel"
@@ -176,7 +177,7 @@ const (
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
 }
 
 type TimeSeriesPanelSpec struct {
@@ -204,6 +205,30 @@ type BarChartPanelSpec struct {
 	Thresholds    []ThresholdWithLabel  `json:"thresholds" validate:"dive"`
 }
 
+type AreaChartPanelSpec struct {
+	Visualization   AreaChartVisualization `json:"visualization"`
+	Formatting      PanelFormatting        `json:"formatting"`
+	ChartAppearance AreaChartAppearance    `json:"chartAppearance"`
+	Axes            Axes                   `json:"axes"`
+	Legend          Legend                 `json:"legend"`
+	Thresholds      []ThresholdWithLabel   `json:"thresholds" validate:"dive"`
+}
+
+// AreaChartAppearance repeats the line-drawing fields rather than embedding
+// TimeSeriesChartAppearance: both carry a `fillMode` under different enums, and
+// a duplicated json tag across an embed boundary is resolved by depth, which the
+// schema reflector does not model.
+type AreaChartAppearance struct {
+	LineInterpolation LineInterpolation `json:"lineInterpolation"`
+	ShowPoints        bool              `json:"showPoints"`
+	LineStyle         LineStyle         `json:"lineStyle"`
+	FillMode          AreaFillMode      `json:"fillMode"`
+	// FillOpacity is a pointer so an omitted field resolves to the kind default at
+	// render time; a plain value would make the Go zero value a transparent fill.
+	FillOpacity *FillOpacity `json:"fillOpacity"`
+	SpanGaps    SpanGaps     `json:"spanGaps"`
+}
+
 type NumberPanelSpec struct {
 	Visualization BasicVisualization    `json:"visualization"`
 	Formatting    PanelFormatting       `json:"formatting"`
@@ -262,6 +287,12 @@ type BarChartVisualization struct {
 	StackedBarChart bool `json:"stackedBarChart"`
 }
 
+type AreaChartVisualization struct {
+	BasicVisualization
+	FillSpans bool      `json:"fillSpans"`
+	Stack     StackMode `json:"stack"`
+}
+
 type PanelFormatting struct {
 	Unit             string          `json:"unit"`
 	DecimalPrecision PrecisionOption `json:"decimalPrecision"`
@@ -622,6 +653,106 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 	}
 }
 
+type AreaFillMode struct{ valuer.String }
+
+var (
+	AreaFillModeSolid    = AreaFillMode{valuer.NewString("solid")} // default
+	AreaFillModeGradient = AreaFillMode{valuer.NewString("gradient")}
+)
+
+func (AreaFillMode) Enum() []any {
+	return []any{AreaFillModeSolid, AreaFillModeGradient}
+}
+
+func (fm AreaFillMode) ValueOrDefault() string {
+	if fm.IsZero() {
+		return AreaFillModeSolid.StringValue()
+	}
+	return fm.StringValue()
+}
+
+func (fm AreaFillMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(fm.ValueOrDefault())
+}
+
+func (fm *AreaFillMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fill mode: must be a string, one of `solid`, `gradient`, or `none`")
+	}
+	val := AreaFillMode{valuer.NewString(v)}
+	switch val {
+	case AreaFillModeSolid, AreaFillModeGradient:
+		*fm = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fill mode %q: must be `solid`, `gradient`, or `none`", v)
+	}
+}
+
+// StackMode is area-only. Bar stacking stays on BarChartVisualization.StackedBarChart,
+// so `percent` is not reachable from a bar panel.
+type StackMode struct{ valuer.String }
+
+var (
+	StackModeNone    = StackMode{valuer.NewString("none")} // default
+	StackModeNormal  = StackMode{valuer.NewString("normal")}
+	StackModePercent = StackMode{valuer.NewString("percent")}
+)
+
+func (StackMode) Enum() []any {
+	return []any{StackModeNone, StackModeNormal, StackModePercent}
+}
+
+func (sm StackMode) ValueOrDefault() string {
+	if sm.IsZero() {
+		return StackModeNone.StringValue()
+	}
+	return sm.StringValue()
+}
+
+func (sm StackMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(sm.ValueOrDefault())
+}
+
+func (sm *StackMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid stack mode: must be a string, one of `none`, `normal`, or `percent`")
+	}
+	val := StackMode{valuer.NewString(v)}
+	switch val {
+	case StackModeNone, StackModeNormal, StackModePercent:
+		*sm = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid stack mode %q: must be `none`, `normal`, or `percent`", v)
+	}
+}
+
+// FillOpacity is the alpha of an area fill, in 0–1 because that is what the
+// chart layer consumes directly. Unlike the enums in this section it has no
+// ValueOrDefault: 0 is a legitimate value, so the kind default lives at render
+// time behind a nil pointer.
+type FillOpacity float64
+
+func (FillOpacity) PrepareJSONSchema(s *jsonschema.Schema) error {
+	s.WithMinimum(0).WithMaximum(1)
+	return nil
+}
+
+func (o *FillOpacity) UnmarshalJSON(data []byte) error {
+	var v float64
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fillOpacity: must be a number between 0 and 1")
+	}
+	if v < 0 || v > 1 {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fillOpacity %v: must be between 0 and 1", v)
+	}
+	*o = FillOpacity(v)
+	return nil
+}
+
 type SpanGaps struct {
 	FillOnlyBelow bool   `json:"fillOnlyBelow" description:"Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected."`
 	FillLessThan  string `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`

pkg/types/dashboardtypes/perses_v1_to_v2.go

@@ -14,6 +14,11 @@ import (
 // (transition.dashboardMigrateV5). Pre-v5 builder queries will produce
 // invalid v2 envelopes — run the v4→v5 migration first.
 //
+// The v1 input shape is closed: nothing writes v1 dashboards any more, so these
+// files only ever convert what v1 could already express. Panel kinds and spec
+// fields added to v2 from here on need no converter entry — change these files
+// only when a v2 type edit breaks the build.
+//
 // The conversion is split across sibling files by concern:
 //   - perses_v1_to_v2_tags.go      tags
 //   - perses_v1_to_v2_panels.go    widgets → panels (+ panel field mappers)