fix(dashboards): align the fill opacity slider with its config section

Assisted-by: Claude Opus 5

docs/api/openapi.yml

@@ -3199,6 +3199,53 @@ 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
+      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -3430,6 +3477,11 @@ components:
       - gradient
       - none
       type: string
+    DashboardtypesFillOpacity:
+      maximum: 1
+      minimum: 0
+      nullable: true
+      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -3892,6 +3944,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'
@@ -3904,6 +3957,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'
@@ -3915,6 +3969,7 @@ components:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
+      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
@@ -3922,6 +3977,18 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       type: string
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AreaChartPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -4252,6 +4319,12 @@ components:
             are connected.
           type: boolean
       type: object
+    DashboardtypesStackMode:
+      enum:
+      - none
+      - normal
+      - percent
+      type: string
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

docs/contributing/go/readme.md

@@ -21,5 +21,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
-- [SQL Compiler](sqlcompiler.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/sqlcompiler.md

@@ -1,84 +0,0 @@
-# SQL Compiler
-
-List pages (dashboards, alert rules) share one filter DSL in their search bars. [pkg/parser/filterquery/sqlcompiler](/pkg/parser/filterquery/sqlcompiler/compiler.go) compiles a DSL string into a WHERE clause for the relational store: `?`-placeholder SQL plus bind arguments, ready for bun on both SQLite and Postgres. Telemetry filters are a different pipeline. They stay on querybuilder's ClickHouse visitor.
-
-The package owns everything generic about the language. A module adopting it writes exactly one thing: a `FieldResolver` that says which keys exist and what each maps to.
-
-## What is the DSL?
-
-The grammar lives at [grammar/FilterQuery.g4](/grammar/FilterQuery.g4), with the ANTLR-generated parser in [pkg/parser/filterquery/grammar](/pkg/parser/filterquery/grammar). It is the same grammar the telemetry search bars use, so the query language feels identical everywhere. The shapes that matter:
-
-- Boolean structure: parentheses > `NOT` > `AND` > `OR`; adjacent terms with no connective are an implicit `AND`.
-- Comparisons: `key OP value`, e.g. `name CONTAINS cpu`, `created_at > '2025-01-01T00:00:00Z'`, `labels.team IN ('infra', 'platform')`, `labels.env EXISTS`. See the `comparison` rule in the grammar for the full operator list.
-- Free text: a bare or quoted token with no key. Quoting is the escape hatch for a phrase that looks like DSL.
-- Values: bare tokens or quoted strings; `IN` accepts `in(...)` and `[...]` forms.
-
-## What does the framework already cover?
-
-```go
-compiled, errs := sqlcompiler.Compile(query, formatter, resolver)
-```
-
-`Compile` returns either a non-nil `*Compiled` or a list of human-readable errors. An empty query compiles to an empty `Compiled`; callers gate on `IsEmpty()`, not nil. On top of parsing, the package handles:
-
-- Syntax errors, collected with line/column positions instead of failing on the first one.
-- The boolean tree: `AND`/`OR`/`NOT`, parentheses, implicit `AND`, and pruning of empty conditions.
-- Operator extraction, including inversion of `NOT LIKE`, `NOT IN`, `NOT EXISTS` and friends.
-- Predicate builders the resolver calls back into:
-
-| Builder                    | Handles                                                                                                                                                                                                     |
-| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `BuildStringOperation`     | `=`, `!=`, `LIKE`/`ILIKE`, `CONTAINS`, `IN` on a string column; escapes `%`/`_` for `CONTAINS`, rejects patterns ending in a dangling backslash, lowers both sides for `ILIKE` so SQLite and Postgres agree |
-| `BuildTimestampComparison` | equality, ranges and `BETWEEN` on RFC3339 timestamps                                                                                                                                                        |
-| `BuildBoolComparison`      | `= true/false`                                                                                                                                                                                              |
-| `BuildFreeTextContains`    | case-insensitive substring match, `COALESCE`d so `NOT (...)` does not drop rows where the column is NULL                                                                                                    |
-
-- Typed value extraction (`ExtractSingleStringValue`, `ExtractStringValueList`, ...) with accumulated errors: the user sees every problem in the query at once.
-- Argument binding through go-sqlbuilder; no value is ever interpolated into the SQL text.
-
-## When do I write a FieldResolver?
-
-Whenever a module adopts the DSL for its list page. The resolver is the per-module policy and the only code you write:
-
-```go
-type FieldResolver interface {
-	ResolveComparison(v *Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string
-	ResolveFreeText(v *Visitor, value string) string
-}
-```
-
-Rules for implementing one:
-
-- Declare the key namespace in `pkg/types/<domain>`: `DSLKey` constants plus a `ReservedOps` map of key to allowed operators. The list API advertises these as `reservedKeywords`, so the frontend suggestions never go stale.
-- Reject a disallowed operator with `v.AddError(...)` and return `""`. Never panic, never fail fast; the compile fails at the end with all errors.
-- Map a key to a column expression through `v.Formatter` (`JSONExtractString`, `LowerExpression`), never by hand, so the expression is valid on both SQLite and Postgres.
-- Delegate the predicate to the `Build*` helpers above; do not hand-build SQL or manage arguments yourself.
-- For a key that lives in a relation table (dashboard tags, rule labels), build an `EXISTS` subquery on a fresh `sqlbuilder.SelectBuilder` and pass that builder into `BuildStringOperation`, so its arguments thread through the compile. For a negative operator, build the positive predicate and toggle `NotExists` on the outer builder.
-
-The reference implementation is the dashboards resolver, [pkg/modules/dashboard/impldashboard/listfilter_resolver.go](/pkg/modules/dashboard/impldashboard/listfilter_resolver.go): reserved keys backed by columns and JSON paths, tag keys via `EXISTS` subqueries, free text across name, description and tags.
-
-## How to wire it in?
-
-Give the module a thin `Compile` wrapper that maps the error list onto the module's error code, as in [pkg/modules/dashboard/impldashboard/listfilter.go](/pkg/modules/dashboard/impldashboard/listfilter.go):
-
-```go
-func Compile(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
-	compiled, errs := sqlcompiler.Compile(query, formatter, dashboardFieldResolver{})
-	if len(errs) > 0 {
-		return nil, errors.NewInvalidInputf(dashboardtypes.ErrCodeDashboardListFilterInvalid,
-			"invalid filter query: %s", strings.Join(errs, "; "))
-	}
-	return compiled, nil
-}
-```
-
-The store then appends `compiled.SQL` with `compiled.Args` to its list query when `!compiled.IsEmpty()`.
-
-## What should I remember?
-
-- One DSL, one compiler; a new list page adds a `FieldResolver`, not a new parser or SQL layer.
-- Keys and allowed operators live in `pkg/types/<domain>` and are advertised as `reservedKeywords`.
-- Column expressions go through `v.Formatter`; predicates go through the `Build*` helpers.
-- Report problems with `v.AddError` and return `""`; errors accumulate.
-- Relation-table keys use `EXISTS` subqueries on their own builder; negation toggles `NotExists`.
-- This package is for the relational store only; telemetry filtering stays in querybuilder.

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -4007,6 +4007,52 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
+}
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -4084,6 +4130,11 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	value: number;
 }
 
+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
 export enum DashboardtypesTimePreferenceDTO {
 	global_time = 'global_time',
 	last_5_min = 'last_5_min',
@@ -4096,6 +4147,27 @@ export enum DashboardtypesTimePreferenceDTO {
 	last_1_week = 'last_1_week',
 	last_1_month = 'last_1_month',
 }
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -4793,29 +4865,6 @@ export enum DashboardtypesFillModeDTO {
 	gradient = 'gradient',
 	none = 'none',
 }
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
 export interface DashboardtypesTimeSeriesChartAppearanceDTO {
 	fillMode?: DashboardtypesFillModeDTO;
 	lineInterpolation?: DashboardtypesLineInterpolationDTO;
@@ -4868,6 +4917,18 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBarChartPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind {
+	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
+}
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO {
+	/**
+	 * @enum signoz/AreaChartPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind;
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTOKind {
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 }
@@ -5073,6 +5134,7 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
@@ -5997,6 +6059,7 @@ export interface DashboardtypesListableDashboardViewDTO {
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
+	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 	'signoz/PieChartPanel' = 'signoz/PieChartPanel',
 	'signoz/TablePanel' = 'signoz/TablePanel',

frontend/src/constants/panelTypes.ts

@@ -29,6 +29,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
+		[PANEL_TYPES.AREA]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.

frontend/src/constants/queryBuilder.ts

@@ -374,6 +374,7 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
+	AREA = 'area',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	TEXT = 'text',

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -27,6 +27,7 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		LIST: false,
 		TRACE: false,
 		BAR: true,
+		AREA: true,
 		PIE: false,
 		HISTOGRAM: false,
 		TEXT: false,

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -19,5 +19,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
+	// Dashboards v2 renders this kind; the fallback only keeps the lookup exhaustive.
+	[PANEL_TYPES.AREA]: TimeSeriesPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
 };

frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss

@@ -1,57 +0,0 @@
-@use '../../../../styles/scrollbar' as *;
-
-.container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	// Let the flex children shrink below their content height so the series list
-	// scrolls within the capped legend height instead of overflowing the wrapper
-	// (the default min-height:auto would block the shrink).
-	min-height: 0;
-}
-
-.scroller {
-	// flex:1 + min-height:0 pins the scroller to the space left after the
-	// toolbar instead of growing to fit every row.
-	flex: 1;
-	min-height: 0;
-	height: 100%;
-	width: 100%;
-	padding-right: var(--spacing-2);
-	overflow-x: hidden;
-	overscroll-behavior: contain;
-
-	@include custom-scrollbar;
-}
-
-.gridItem {
-	// Or the item keeps its content width and the label never ellipsizes.
-	min-width: 0;
-	max-width: 100%;
-}
-
-.gridList {
-	min-width: 0;
-	display: grid;
-	grid-auto-flow: row;
-	// min() keeps the column inside a narrow panel, where a wider one would push
-	// the row's actions out of the clipped area.
-	grid-template-columns: repeat(
-		auto-fill,
-		minmax(min(var(--legend-item-width, 240px), 100%), 1fr)
-	);
-	gap: var(--spacing-1) var(--spacing-4);
-}
-
-.container.isRight .gridList {
-	grid-template-columns: 1fr;
-}
-
-.emptyState {
-	padding: var(--spacing-16) 0;
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-	text-align: center;
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -0,0 +1,204 @@
+@use '../../../../styles/scrollbar' as *;
+
+.legend-search-container {
+	flex-shrink: 0;
+	width: 100%;
+	padding-right: 8px;
+
+	.legend-search-input {
+		font-size: 12px;
+	}
+}
+
+.legend-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	height: 100%;
+	width: 100%;
+	// Allow the flex children to shrink below their content height so the
+	// virtualized grid scrolls within the capped legend height instead of
+	// overflowing the wrapper (default min-height:auto would block the shrink).
+	min-height: 0;
+
+	&:has(.legend-item-focused) .legend-item {
+		opacity: 0.3;
+	}
+
+	&:has(.legend-item-focused) .legend-item.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-empty-state {
+		font-size: 12px;
+		color: var(--l2-foreground);
+		text-align: center;
+		padding: 12px;
+		padding: 2rem 0;
+	}
+
+	.legend-virtuoso-container {
+		// flex:1 + min-height:0 pins the scroller to the space left after the
+		// search box (RIGHT legend) and lets it scroll instead of growing to fit
+		// every row — without this the grid overflows a BOTTOM legend's fixed height.
+		flex: 1;
+		min-height: 0;
+		height: 100%;
+		width: 100%;
+
+		.virtuoso-grid-list {
+			min-width: 0;
+			display: grid;
+			grid-auto-flow: row;
+			grid-template-columns: repeat(
+				auto-fill,
+				minmax(var(--legend-average-width, 240px), 1fr)
+			);
+			column-gap: 12px;
+		}
+
+		.virtuoso-grid-item {
+			min-width: 0;
+		}
+
+		&.legend-virtuoso-container-right {
+			.virtuoso-grid-list {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		&.legend-virtuoso-container-single-row {
+			.virtuoso-grid-list {
+				grid-template-columns: repeat(
+					auto-fit,
+					minmax(var(--legend-average-width, 240px), max-content)
+				);
+				justify-content: center;
+			}
+		}
+
+		@include custom-scrollbar;
+	}
+}
+
+.legend-row {
+	padding: 4px 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+
+	&.legend-single-row {
+		justify-content: center;
+	}
+
+	&.legend-row-right {
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+	}
+	&.legend-row-bottom {
+		flex-direction: row;
+	}
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	// Include padding within the width so a full-width row (legend-item-right) fits its
+	// column instead of overflowing by the 16px horizontal padding — there is no global
+	// border-box reset, so the default content-box would make it overflow.
+	box-sizing: border-box;
+	max-width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+	cursor: pointer;
+
+	&.legend-item-right {
+		width: 100%;
+	}
+
+	&.legend-item-off {
+		opacity: 0.3;
+		text-decoration: line-through;
+		text-decoration-thickness: 1px;
+	}
+
+	&.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-item-label-trigger {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+	}
+
+	.legend-marker {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 50%;
+		min-width: 11px;
+		min-height: 11px;
+		width: 11px;
+		height: 11px;
+		flex-shrink: 0;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+		position: relative;
+
+		&:hover {
+			transform: scale(1.2);
+			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+		}
+
+		&:active {
+			transform: scale(0.9);
+		}
+	}
+
+	.legend-label {
+		flex: 1;
+		font-size: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.legend-copy-button {
+		// Always laid out (space reserved) but transparent, so revealing it on
+		// hover fades the icon in without reflowing the row / shifting the label.
+		// Shrink the shared icon Button (defaults to a 2rem square) to the
+		// compact legend row via its size tokens.
+		--button-height: auto;
+		--button-width: auto;
+		--button-padding: 2px;
+
+		opacity: 0;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		border-radius: 4px;
+		transition:
+			opacity 0.15s ease,
+			color 0.15s ease;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
+	&:hover {
+		background: var(--l3-background);
+		.legend-copy-button {
+			opacity: 1;
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -1,106 +1,139 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
+import { Input } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
+import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendItem } from 'lib/uPlotV2/config/types';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 
-import { LegendAction, LegendPosition, LegendProps } from '../types';
+import { LegendPosition, LegendProps } from '../types';
 
-import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
-import LegendRow from './LegendRow';
-import LegendToolbar from './LegendToolbar';
-import { filterLegendItems, getShownSeriesState } from './utils';
+import './Legend.styles.scss';
 
-import styles from './Legend.module.scss';
+export const MAX_LEGEND_WIDTH = 240;
 
 /**
- * Presentational legend, source-agnostic: the uPlot charts feed it via
- * UPlotLegend, Pie feeds it directly. Every state change is delegated.
+ * Presentational legend. Renders the supplied `items` (markers + labels, an
+ * optional copy button, and a search box for the RIGHT position) and delegates
+ * all interaction to the container handlers. Source-agnostic — the uPlot
+ * charts feed it via UPlotLegend; Pie feeds it directly.
  */
 export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
 	focusedSeriesIndex,
-	onAction,
+	onClick,
+	onMouseMove,
+	onMouseLeave,
 	showCopy = true,
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [filterQuery, setFilterQuery] = useState('');
+	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 
-	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
-	const isRightPosition = position === LegendPosition.RIGHT;
+	// Search is intrinsic to the right-positioned legend.
+	const searchEnabled = position === LegendPosition.RIGHT;
+	const { width: containerWidth } = useResizeObserver(legendContainerRef);
 
-	const { visibleCount, soleShownSeriesIndex } = useMemo(
-		() => getShownSeriesState(items),
-		[items],
-	);
+	const isSingleRow = useMemo(() => {
+		if (position !== LegendPosition.BOTTOM || containerWidth <= 0) {
+			return false;
+		}
+		const totalLegendWidth = items.length * (averageLegendWidth + 16);
+		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
+		return totalRows <= 1;
+	}, [averageLegendWidth, items.length, position, containerWidth]);
 
-	// A bottom legend gets two rows; spending one on chrome costs more chart than
-	// the readout is worth.
-	const showToolbar = isRightPosition && items.length > 0;
-	const showFilter = showToolbar;
+	const visibleLegendItems = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return items;
+		}
 
-	const effectiveQuery = showFilter ? filterQuery : '';
-
-	const visibleLegendItems = useMemo(
-		() => filterLegendItems(items, effectiveQuery),
-		[items, effectiveQuery],
-	);
-
-	const isEmptyState =
-		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
-
-	const isAllShown = visibleCount === items.length;
-
-	// A row that unmounts under the pointer never fires its own mouseleave.
-	const handleMouseLeave = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex: null }),
-		[onAction],
-	);
+		const query = legendSearchQuery.trim().toLowerCase();
+		return items.filter((item) => item.label?.toLowerCase().includes(query));
+	}, [searchEnabled, legendSearchQuery, items]);
 
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => (
-			<LegendRow
-				key={item.seriesIndex}
-				item={item}
-				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
-				isAllShown={isAllShown}
-				isFocused={focusedSeriesIndex === item.seriesIndex}
-				showCopy={showCopy}
-				onAction={onAction}
-			/>
-		),
-		[soleShownSeriesIndex, isAllShown, focusedSeriesIndex, showCopy, onAction],
+		(item: LegendItem): JSX.Element => {
+			// `color` is uPlot's stroke union (string | fn | gradient); only a string
+			// is a usable CSS colour for the marker.
+			const markerColor = typeof item.color === 'string' ? item.color : undefined;
+			return (
+				<div
+					key={item.seriesIndex}
+					data-legend-item-id={item.seriesIndex}
+					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
+						'legend-item-off': !item.show,
+						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+					})}
+				>
+					<TooltipSimple title={item.label} arrow side="top" disableHoverableContent>
+						<div className="legend-item-label-trigger">
+							<div
+								className="legend-marker"
+								style={{ borderColor: markerColor }}
+								data-is-legend-marker={true}
+							/>
+							<span className="legend-label">{item.label}</span>
+						</div>
+					</TooltipSimple>
+					{showCopy && (
+						<CopyButton
+							value={item.label ?? ''}
+							size={12}
+							className="legend-copy-button"
+							ariaLabel={`Copy ${item.label}`}
+							testId="legend-copy"
+						/>
+					)}
+				</div>
+			);
+		},
+		[focusedSeriesIndex, position, showCopy],
 	);
 
+	const isEmptyState = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return false;
+		}
+		return visibleLegendItems.length === 0;
+	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+
 	return (
 		<div
 			ref={legendContainerRef}
-			className={cx(styles.container, {
-				[styles.isRight]: isRightPosition,
-			})}
-			style={{ ['--legend-item-width' as string]: `${itemWidth}px` }}
-			onMouseLeave={handleMouseLeave}
-			data-testid="legend-container"
+			className="legend-container"
+			onClick={onClick}
+			onMouseMove={onMouseMove}
+			onMouseLeave={onMouseLeave}
+			style={{
+				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
+			}}
 		>
-			{showToolbar && (
-				<LegendToolbar
-					visibleCount={visibleCount}
-					totalCount={items.length}
-					showFilter={showFilter}
-					filterQuery={filterQuery}
-					onFilterQueryChange={setFilterQuery}
-				/>
+			{searchEnabled && (
+				<div className="legend-search-container">
+					<Input
+						allowClear
+						placeholder="Search..."
+						value={legendSearchQuery}
+						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						data-testid="legend-search-input"
+						className="legend-search-input"
+					/>
+				</div>
 			)}
 			{isEmptyState ? (
-				<div className={styles.emptyState}>
-					No series found matching &quot;{effectiveQuery}&quot;
+				<div className="legend-empty-state">
+					No series found matching &quot;{legendSearchQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid
-					className={styles.scroller}
-					listClassName={styles.gridList}
-					itemClassName={styles.gridItem}
+					className={cx(
+						'legend-virtuoso-container',
+						`legend-virtuoso-container-${position.toLowerCase()}`,
+						{ 'legend-virtuoso-container-single-row': isSingleRow },
+					)}
 					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>

frontend/src/lib/uPlotV2/components/Legend/LegendRow.module.scss

@@ -1,170 +0,0 @@
-.row {
-	// Width of the revealed actions, given up by the label on hover only.
-	--legend-actions-reserve: 78px;
-
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	height: 28px;
-	padding: 0 var(--spacing-3) 0 var(--spacing-4);
-	box-sizing: border-box;
-	width: 100%;
-	max-width: 100%;
-	min-width: 0;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition: background 160ms linear;
-
-	&:hover,
-	&:focus-visible {
-		background: var(--l3-background);
-	}
-}
-
-.isFocused {
-	background: var(--l3-background);
-}
-
-.marker {
-	// Reads as a checkbox without being one: filled when shown, hollow when
-	// hidden, deliberately not a check glyph.
-	flex: 0 0 auto;
-	box-sizing: border-box;
-	position: relative;
-	// Above the actions, so a narrow row's chip never covers the series colour.
-	z-index: 4;
-	width: 12px;
-	height: 12px;
-	padding: 0;
-	appearance: none;
-	border-width: 1.5px;
-	border-style: solid;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition:
-		transform 200ms ease,
-		box-shadow 200ms ease,
-		background-color 160ms linear,
-		opacity 160ms linear;
-
-	&:hover {
-		transform: scale(1.2);
-		box-shadow: 0 0 0 2px
-			color-mix(in srgb, var(--l1-foreground) 30%, transparent);
-	}
-
-	&:active {
-		transform: scale(0.9);
-	}
-
-	&:disabled {
-		cursor: default;
-	}
-
-	&:disabled:hover {
-		transform: none;
-		box-shadow: none;
-	}
-}
-
-// Series names run long and have no spaces to break on, so they need both a
-// cap and a break rule or the tooltip becomes one panel-wide line.
-.rowTooltip {
-	max-width: 420px;
-	white-space: normal;
-	overflow-wrap: anywhere;
-}
-
-.label {
-	flex: 1 1 auto;
-	box-sizing: border-box;
-	width: 100%;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-	color: var(--l2-foreground);
-	user-select: none;
-}
-
-.isHidden .marker {
-	opacity: 0.45;
-}
-
-.isHidden .label {
-	color: var(--l3-foreground);
-	text-decoration: line-through;
-	text-decoration-thickness: 1px;
-}
-
-/* Row actions */
-
-.actions {
-	position: absolute;
-	top: var(--spacing-2);
-	right: var(--spacing-3);
-	z-index: 3;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding-left: var(--spacing-5, 10px);
-	// Sits on the row's hover background and masks the label's tail behind it.
-	background: var(--l3-background);
-	box-shadow: -8px 0 8px var(--l3-background);
-	opacity: 0;
-	transform: translateX(10px);
-	pointer-events: none;
-	transition:
-		opacity 180ms cubic-bezier(0.08, 0.52, 0.52, 1),
-		transform 180ms cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-// :focus-visible, not :focus-within — the latter also matches the click that
-// just toggled the series, leaving the actions stuck open.
-.row:hover .actions,
-.row:focus-visible .actions,
-.row:has(:focus-visible) .actions {
-	opacity: 1;
-	transform: translateX(0);
-	pointer-events: auto;
-}
-
-// The cap spares rows sized to their actions, not their label.
-.row:hover .label,
-.row:focus-visible .label,
-.row:has(:focus-visible) .label {
-	padding-right: min(var(--legend-actions-reserve), 50%);
-}
-
-.actionTrigger {
-	display: inline-flex;
-}
-
-.actionButton {
-	--button-height: 20px;
-	--button-width: 20px;
-	--button-padding: 0;
-	--button-variant-ghost-color: var(--l3-foreground);
-	--button-variant-ghost-hover-color: var(--l1-foreground);
-
-	flex-shrink: 0;
-}
-
-.actionButton.scopeButton {
-	--button-width: auto;
-	--button-padding: 0 var(--spacing-4);
-	--button-font-size: var(--font-size-xs);
-	--button-border-radius: calc(var(--radius) * 4);
-	--button-base-border-width: 1px;
-	// --l2-border is the actions bar's own background: one step up reads.
-	--button-base-border-color: var(--l3-border);
-
-	border-style: solid;
-}
-.actionButton.scopeButton:hover {
-	border-color: var(--l2-border);
-}

frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx

@@ -1,182 +0,0 @@
-import { KeyboardEvent, memo, MouseEvent, useCallback } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-
-import { LegendAction, OnLegendAction } from '../types';
-
-import { LEGEND_TOOLTIP_DELAY_MS } from './constants';
-import styles from './LegendRow.module.scss';
-
-export interface LegendRowProps {
-	item: LegendItem;
-	/** The only series currently shown, so hiding it is refused. */
-	isSoleShown: boolean;
-	/** Nothing is hidden, so the row's action can only narrow the selection. */
-	isAllShown: boolean;
-	isFocused: boolean;
-	showCopy: boolean;
-	onAction: OnLegendAction;
-}
-
-/**
- * One legend row. The marker is its own target for excluding a single series —
- * the one thing the row click can't do while everything is showing. The actions
- * overlay the label's tail rather than taking layout width, and their reveal is
- * pure CSS.
- */
-function LegendRow({
-	item,
-	isSoleShown,
-	isAllShown,
-	isFocused,
-	showCopy,
-	onAction,
-}: LegendRowProps): JSX.Element {
-	const { seriesIndex, show } = item;
-	const label = item.label ?? '';
-	const isShowAllAction = show && !isAllShown;
-	const scopeActionLabel = isShowAllAction
-		? 'Show all series'
-		: 'Show only current series';
-	// `color` is uPlot's stroke union (string | fn | gradient); only a string is
-	// a usable CSS colour for the marker.
-	const seriesColor = typeof item.color === 'string' ? item.color : undefined;
-
-	/** Everything showing -> isolate; showing alone -> restore all. */
-	const handleRowClick = useCallback((): void => {
-		if (isSoleShown) {
-			onAction({ type: LegendAction.SHOW_ALL });
-			return;
-		}
-		onAction({
-			type: isAllShown ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
-			seriesIndex,
-		});
-	}, [isSoleShown, isAllShown, onAction, seriesIndex]);
-
-	const handleMarkerClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			onAction({ type: LegendAction.TOGGLE, seriesIndex });
-		},
-		[onAction, seriesIndex],
-	);
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent<HTMLDivElement>): void => {
-			// Let the row actions handle their own keys.
-			if (event.target !== event.currentTarget) {
-				return;
-			}
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault();
-				handleRowClick();
-			}
-		},
-		[handleRowClick],
-	);
-
-	const handleScopeClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			if (isShowAllAction) {
-				onAction({ type: LegendAction.SHOW_ALL });
-				return;
-			}
-			onAction({ type: LegendAction.SHOW_ONLY, seriesIndex });
-		},
-		[isShowAllAction, onAction, seriesIndex],
-	);
-
-	const handleMouseEnter = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex }),
-		[onAction, seriesIndex],
-	);
-
-	const handleMouseLeave = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex: null }),
-		[onAction],
-	);
-
-	return (
-		<div
-			className={cx(styles.row, {
-				[styles.isHidden]: !show,
-				[styles.isFocused]: isFocused,
-			})}
-			data-legend-item-id={seriesIndex}
-			data-testid={`legend-item-${seriesIndex}`}
-			role="switch"
-			tabIndex={0}
-			aria-checked={show}
-			aria-label={label}
-			onClick={handleRowClick}
-			onKeyDown={handleKeyDown}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			<button
-				type="button"
-				className={styles.marker}
-				style={{
-					borderColor: seriesColor,
-					backgroundColor: show ? seriesColor : 'transparent',
-				}}
-				onClick={handleMarkerClick}
-				disabled={isSoleShown}
-				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
-				data-is-legend-marker={true}
-				data-testid={`legend-marker-${seriesIndex}`}
-			/>
-			<TooltipSimple
-				title={label}
-				arrow
-				side="top"
-				delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-				disableHoverableContent
-				tooltipContentProps={{ className: styles.rowTooltip }}
-			>
-				<span className={styles.label}>{label}</span>
-			</TooltipSimple>
-			<div className={styles.actions}>
-				<TooltipSimple
-					title={scopeActionLabel}
-					arrow
-					side="top"
-					delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-					disableHoverableContent
-					tooltipContentProps={{ className: styles.rowTooltip }}
-				>
-					{/* Radix's asChild merge strips the button's own data-testid. */}
-					<span className={styles.actionTrigger}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="sm"
-							className={cx(styles.actionButton, styles.scopeButton)}
-							onClick={handleScopeClick}
-							aria-label={scopeActionLabel}
-							testId={`legend-scope-${seriesIndex}`}
-						>
-							{isShowAllAction ? 'All' : 'Only'}
-						</Button>
-					</span>
-				</TooltipSimple>
-				{showCopy && (
-					<CopyButton
-						value={label}
-						size={13}
-						className={styles.actionButton}
-						ariaLabel={`Copy ${label}`}
-						testId={`legend-copy-${seriesIndex}`}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default memo(LegendRow);

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss

@@ -1,35 +0,0 @@
-.toolbar {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--spacing-5, 10px);
-	padding: 0 var(--spacing-4) var(--spacing-5, 10px);
-	flex-shrink: 0;
-
-	> * {
-		flex: 0 1 auto;
-	}
-}
-
-.status {
-	// Wraps rather than losing the count at its end.
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.searchContainer {
-	flex-shrink: 0;
-	width: 100%;
-	padding-right: var(--spacing-4);
-	padding-bottom: var(--spacing-5, 10px);
-}
-
-.searchInput {
-	font-size: var(--font-size-xs);
-}
-
-.searchIcon {
-	color: var(--l3-foreground);
-}

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -1,56 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-import { Input } from 'antd';
-import { Search } from '@signozhq/icons';
-
-import styles from './LegendToolbar.module.scss';
-
-export interface LegendToolbarProps {
-	visibleCount: number;
-	totalCount: number;
-	/** Search is intrinsic to the right-positioned legend. */
-	showFilter: boolean;
-	filterQuery: string;
-	onFilterQueryChange: (query: string) => void;
-}
-
-/** Legend chrome: the series search box and the "Showing N of M" readout. */
-export default function LegendToolbar({
-	visibleCount,
-	totalCount,
-	showFilter,
-	filterQuery,
-	onFilterQueryChange,
-}: LegendToolbarProps): JSX.Element {
-	const handleFilterChange = useCallback(
-		(event: ChangeEvent<HTMLInputElement>): void =>
-			onFilterQueryChange(event.target.value),
-		[onFilterQueryChange],
-	);
-
-	return (
-		<>
-			{showFilter && (
-				<div className={styles.searchContainer}>
-					<Input
-						allowClear
-						prefix={<Search size={12} className={styles.searchIcon} />}
-						placeholder="Search..."
-						value={filterQuery}
-						onChange={handleFilterChange}
-						className={styles.searchInput}
-						data-testid="legend-search-input"
-					/>
-				</div>
-			)}
-			<div className={styles.toolbar}>
-				<span
-					className={styles.status}
-					aria-live="polite"
-					data-testid="legend-status"
-				>
-					{`Showing ${visibleCount} of ${totalCount} series`}
-				</span>
-			</div>
-		</>
-	);
-}

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -8,8 +8,8 @@ import Legend from './Legend';
 
 /**
  * uPlot legend controller. Derives the legend items + focus/visibility state
- * from the chart config (useLegendsSync) and the series interactions from the
- * plot context (useLegendActions), then renders the presentational Legend.
+ * from the chart config (useLegendsSync) and the toggle/focus interactions from
+ * the plot context (useLegendActions), then renders the presentational Legend.
  * Must be rendered inside a PlotContextProvider.
  */
 export default function UPlotLegend({
@@ -17,8 +17,13 @@ export default function UPlotLegend({
 	config,
 	averageLegendWidth,
 }: UPlotLegendProps): JSX.Element {
-	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
-	const onAction = useLegendActions();
+	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
+		useLegendsSync({ config });
+	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
+		useLegendActions({
+			setFocusedSeriesIndex,
+			focusedSeriesIndex,
+		});
 
 	const items = useMemo(() => Object.values(legendItemsMap), [legendItemsMap]);
 
@@ -28,7 +33,9 @@ export default function UPlotLegend({
 			position={position}
 			averageLegendWidth={averageLegendWidth}
 			focusedSeriesIndex={focusedSeriesIndex}
-			onAction={onAction}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
 		/>
 	);
 }

frontend/src/lib/uPlotV2/components/Legend/__tests__/UPlotLegend.test.tsx

@@ -1,419 +0,0 @@
-import React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../../hooks/useLegendActions';
-import UPlotLegend from '../UPlotLegend';
-import { LegendAction, LegendActionPayload, LegendPosition } from '../../types';
-
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-		className,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-		className?: string;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid" className={className}>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync');
-jest.mock('lib/uPlotV2/hooks/useLegendActions');
-
-const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
-	typeof useLegendsSync
->;
-const mockUseLegendActions = useLegendActions as jest.MockedFunction<
-	typeof useLegendActions
->;
-
-/** The payloads of one action type, in dispatch order. */
-const dispatched = (
-	onAction: jest.Mock,
-	type: LegendAction,
-): LegendActionPayload[] =>
-	onAction.mock.calls
-		.map(([payload]) => payload as LegendActionPayload)
-		.filter((payload) => payload.type === type);
-
-describe('UPlotLegend', () => {
-	const baseLegendItemsMap = {
-		0: {
-			seriesIndex: 0,
-			label: 'A',
-			show: true,
-			color: '#ff0000',
-		},
-		1: {
-			seriesIndex: 1,
-			label: 'B',
-			show: false,
-			color: '#00ff00',
-		},
-		2: {
-			seriesIndex: 2,
-			label: 'C',
-			show: true,
-			color: '#0000ff',
-		},
-	};
-
-	let onAction: jest.Mock;
-
-	beforeEach(() => {
-		onAction = jest.fn();
-
-		mockUseLegendsSync.mockReturnValue({
-			legendItemsMap: baseLegendItemsMap,
-			focusedSeriesIndex: 1,
-			setFocusedSeriesIndex: jest.fn(),
-		});
-
-		mockUseLegendActions.mockReturnValue(onAction);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const renderLegend = (position?: LegendPosition): RenderResult =>
-		render(
-			<TooltipProvider>
-				<UPlotLegend
-					position={position}
-					// config is consumed by the mocked useLegendsSync hook, not directly
-					config={{} as any}
-				/>
-			</TooltipProvider>,
-		);
-
-	describe('layout and position', () => {
-		it('renders the search input on a RIGHT legend', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
-
-		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
-			renderLegend();
-
-			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
-			// The row interactions are the same in both placements.
-			expect(screen.getByTestId('legend-item-0')).toBeInTheDocument();
-			expect(screen.getByTestId('legend-scope-0')).toBeInTheDocument();
-		});
-
-		it('renders the marker with the series colour, filled only when shown', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({
-				'border-color': '#ff0000',
-				'background-color': '#ff0000',
-			});
-			// Hidden series read as an empty checkbox.
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({ 'background-color': 'transparent' });
-		});
-
-		it('renders all legend items in the grid by default', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('status readout', () => {
-		it('reports how many series are showing', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-status')).toHaveTextContent(
-				'Showing 2 of 3 series',
-			);
-		});
-	});
-
-	describe('filter behavior', () => {
-		it('filters legend items based on the query (case-insensitive)', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'a');
-
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.queryByText('B')).not.toBeInTheDocument();
-			expect(screen.queryByText('C')).not.toBeInTheDocument();
-		});
-
-		it('shows the empty state when nothing matches', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'network');
-
-			expect(
-				screen.getByText(/No series found matching "network"/i),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
-		});
-
-		it('ignores a whitespace-only query', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), '   ');
-
-			expect(
-				screen.queryByText(/No series found matching/i),
-			).not.toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('row interactions', () => {
-		const allShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1], show: true },
-			2: { ...baseLegendItemsMap[2] },
-		};
-
-		const mockAllShown = (): void => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: allShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		};
-
-		it('isolates the series when everything is showing', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			// Nothing the user can see is there to exclude, so the click means Only.
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toStrictEqual([
-				{ type: LegendAction.SHOW_ONLY, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-		});
-
-		it('toggles the series once something is already hidden', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('excludes just that series when its marker is clicked', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-marker-0'));
-
-			// The marker is the one way to exclude a single series while
-			// everything is showing — the row click isolates instead.
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('stops the marker offering to hide the last series showing', () => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toBeDisabled();
-			expect(screen.getByTestId('legend-marker-1')).toBeEnabled();
-		});
-
-		it('labels the marker with what clicking it does', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toHaveAttribute(
-				'aria-label',
-				'Hide A',
-			);
-			expect(screen.getByTestId('legend-marker-1')).toHaveAttribute(
-				'aria-label',
-				'Show B',
-			);
-		});
-
-		it('adds the clicked series to the selection while one is alone', async () => {
-			const user = userEvent.setup();
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is showing alone; clicking another row builds the selection
-			// up rather than moving the isolation.
-			await user.click(screen.getByText('B'));
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 1 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('toggles the series on Enter and Space', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			row.focus();
-			await user.keyboard('{Enter}');
-			await user.keyboard(' ');
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-		});
-
-		it('reflects visibility on the row for assistive tech', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-item-0')).toHaveAttribute(
-				'aria-checked',
-				'true',
-			);
-			expect(screen.getByTestId('legend-item-1')).toHaveAttribute(
-				'aria-checked',
-				'false',
-			);
-		});
-
-		it('restores every series from All without also toggling the row', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is shown while B is hidden, so its action is All.
-			await user.click(screen.getByTestId('legend-scope-0'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('isolates the series from Only on a hidden row', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-scope-1'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toStrictEqual([
-				{ type: LegendAction.SHOW_ONLY, seriesIndex: 1 },
-			]);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-		});
-
-		it('highlights the hovered series and clears it on leave', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			await user.hover(row);
-			expect(onAction).toHaveBeenCalledWith({
-				type: LegendAction.HOVER,
-				seriesIndex: 0,
-			});
-
-			await user.unhover(row);
-			expect(onAction).toHaveBeenCalledWith({
-				type: LegendAction.HOVER,
-				seriesIndex: null,
-			});
-		});
-	});
-
-	describe('one-series state', () => {
-		const soleShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1] },
-			2: { ...baseLegendItemsMap[2], show: false },
-		};
-
-		beforeEach(() => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: soleShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		});
-
-		it('offers All on the shown row and Only on the hidden ones', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-scope-0')).toHaveTextContent('All');
-			expect(screen.getByTestId('legend-scope-1')).toHaveTextContent('Only');
-			expect(screen.getByTestId('legend-scope-2')).toHaveTextContent('Only');
-		});
-
-		it('restores everything from All', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-scope-0'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-		});
-
-		it('restores everything when the row showing alone is clicked again', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-	});
-});

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

@@ -1,45 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-import { filterLegendItems, getShownSeriesState } from '../utils';
-
-const items = (shown: boolean[]): LegendItem[] =>
-	shown.map((show, index) => ({
-		seriesIndex: index + 1,
-		label: `series-${index}`,
-		color: '#000',
-		show,
-	}));
-
-describe('getShownSeriesState', () => {
-	it('counts the shown series', () => {
-		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
-			visibleCount: 2,
-			soleShownSeriesIndex: null,
-		});
-	});
-
-	it('names the series when exactly one is shown', () => {
-		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
-			visibleCount: 1,
-			soleShownSeriesIndex: 2,
-		});
-	});
-
-	it('reports nothing shown', () => {
-		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
-			visibleCount: 0,
-			soleShownSeriesIndex: null,
-		});
-	});
-});
-
-describe('filterLegendItems', () => {
-	it('matches case-insensitively on the label', () => {
-		const filtered = filterLegendItems(items([true, true, true]), 'SERIES-1');
-		expect(filtered.map((item) => item.label)).toStrictEqual(['series-1']);
-	});
-
-	it('returns every item for a blank query', () => {
-		expect(filterLegendItems(items([true, true]), '   ')).toHaveLength(2);
-	});
-});

frontend/src/lib/uPlotV2/components/Legend/constants.ts

@@ -1,20 +0,0 @@
-/** Widest a single legend item is allowed to get when sizing the legend grid. */
-export const MAX_LEGEND_WIDTH = 240;
-
-/**
- * Enough for a row to contain its own hover actions, which a short label would
- * otherwise size a column too narrow for. Little room for the label is intended.
- */
-export const MIN_LEGEND_ITEM_WIDTH = 110;
-
-/** Marker + row padding, on top of the estimated label width. */
-export const LEGEND_ITEM_EXTRA_WIDTH = 16;
-
-/** Must match `.row`'s height and the grid's row gap, or the reserved
- * rectangle clips a row. */
-export const LEGEND_ROW_HEIGHT = 28;
-export const LEGEND_ROW_GAP = 2;
-export const LEGEND_MAX_BOTTOM_ROWS = 2;
-
-/** Hover delay before a row's full-name tooltip opens. */
-export const LEGEND_TOOLTIP_DELAY_MS = 500;

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

@@ -1,34 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-export interface ShownSeriesState {
-	visibleCount: number;
-	/** The series index when exactly one series is shown, else null. */
-	soleShownSeriesIndex: number | null;
-}
-
-/**
- * Driven by what is actually shown, never a remembered isolation: hiding series
- * one at a time down to a single one is the same state as "Only".
- */
-export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
-	const shown = items.filter((item) => item.show);
-
-	return {
-		visibleCount: shown.length,
-		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
-	};
-}
-
-export function filterLegendItems(
-	items: LegendItem[],
-	query: string,
-): LegendItem[] {
-	const normalisedQuery = query.trim().toLowerCase();
-	if (!normalisedQuery) {
-		return items;
-	}
-
-	return items.filter((item) =>
-		item.label?.toLowerCase().includes(normalisedQuery),
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.module.scss

@@ -12,11 +12,10 @@
 	}
 }
 
-// Matches the legend row's marker.
 .uplotTooltipItemMarker {
-	border-radius: var(--radius);
+	border-radius: 50%;
 	border-style: solid;
-	border-width: 1.5px;
+	border-width: 2px;
 	width: 12px;
 	height: 12px;
 	box-sizing: border-box;
@@ -31,23 +30,11 @@
 	justify-content: space-between;
 }
 
-// The legend's mono type; the container's Inter stays for the header.
-.uplotTooltipItemLabel,
-.uplotTooltipItemValue {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-}
-
 .uplotTooltipItemLabel {
 	white-space: normal;
 	overflow-wrap: anywhere;
 }
 
-.uplotTooltipItemValue {
-	white-space: nowrap;
-}
-
 .uplotTooltipItemContentSeparator {
 	flex: 1;
 	border-width: 0.5px;

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

@@ -25,7 +25,7 @@ export default function TooltipItem({
 		>
 			<div
 				className={Styles.uplotTooltipItemMarker}
-				style={{ borderColor: item.color, backgroundColor: item.color }}
+				style={{ borderColor: item.color }}
 				data-is-legend-marker={true}
 				data-testid={markerTestId}
 			/>
@@ -39,7 +39,7 @@ export default function TooltipItem({
 					className={Styles.uplotTooltipItemContentSeparator}
 					style={{ borderColor: item.color }}
 				/>
-				<span className={Styles.uplotTooltipItemValue}>{item.tooltipValue}</span>
+				<span>{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

frontend/src/lib/uPlotV2/components/__tests__/UPlotLegend.test.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { render, RenderResult, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { LegendItem } from 'lib/uPlotV2/config/types';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+
+import { useLegendActions } from '../../hooks/useLegendActions';
+import UPlotLegend from '../Legend/UPlotLegend';
+import { LegendPosition } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	VirtuosoGrid: ({
+		data,
+		itemContent,
+		className,
+	}: {
+		data: LegendItem[];
+		itemContent: (index: number, item: LegendItem) => React.ReactNode;
+		className?: string;
+	}): JSX.Element => (
+		<div data-testid="virtuoso-grid" className={className}>
+			{data.map((item, index) => (
+				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
+					{itemContent(index, item)}
+				</div>
+			))}
+		</div>
+	),
+}));
+
+jest.mock('lib/uPlotV2/hooks/useLegendsSync');
+jest.mock('lib/uPlotV2/hooks/useLegendActions');
+
+const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
+	typeof useLegendsSync
+>;
+const mockUseLegendActions = useLegendActions as jest.MockedFunction<
+	typeof useLegendActions
+>;
+
+describe('UPlotLegend', () => {
+	const baseLegendItemsMap = {
+		0: {
+			seriesIndex: 0,
+			label: 'A',
+			show: true,
+			color: '#ff0000',
+		},
+		1: {
+			seriesIndex: 1,
+			label: 'B',
+			show: false,
+			color: '#00ff00',
+		},
+		2: {
+			seriesIndex: 2,
+			label: 'C',
+			show: true,
+			color: '#0000ff',
+		},
+	};
+
+	let onLegendClick: jest.Mock;
+	let onLegendMouseMove: jest.Mock;
+	let onLegendMouseLeave: jest.Mock;
+	let onFocusSeries: jest.Mock;
+
+	beforeEach(() => {
+		onLegendClick = jest.fn();
+		onLegendMouseMove = jest.fn();
+		onLegendMouseLeave = jest.fn();
+		onFocusSeries = jest.fn();
+
+		mockUseLegendsSync.mockReturnValue({
+			legendItemsMap: baseLegendItemsMap,
+			focusedSeriesIndex: 1,
+			setFocusedSeriesIndex: jest.fn(),
+		});
+
+		mockUseLegendActions.mockReturnValue({
+			onLegendClick,
+			onLegendMouseMove,
+			onLegendMouseLeave,
+			onFocusSeries,
+		});
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const renderLegend = (position?: LegendPosition): RenderResult =>
+		render(
+			<TooltipProvider>
+				<UPlotLegend
+					position={position}
+					// config is consumed by the mocked useLegendsSync hook, not directly
+					config={{} as any}
+				/>
+			</TooltipProvider>,
+		);
+
+	describe('layout and position', () => {
+		it('renders search input when legend position is RIGHT', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+		});
+
+		it('does not render search input when legend position is BOTTOM (default)', () => {
+			renderLegend();
+
+			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
+		});
+
+		it('renders the marker with the correct border color', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendMarker = document.querySelector(
+				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
+			) as HTMLElement;
+
+			expect(legendMarker).toHaveStyle({
+				'border-color': '#ff0000',
+			});
+		});
+
+		it('renders all legend items in the grid by default', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('search behavior (RIGHT position)', () => {
+		it('filters legend items based on search query (case-insensitive)', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'A');
+
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.queryByText('B')).not.toBeInTheDocument();
+			expect(screen.queryByText('C')).not.toBeInTheDocument();
+		});
+
+		it('shows empty state when no legend items match the search query', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'network');
+
+			expect(
+				screen.getByText(/No series found matching "network"/i),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
+		});
+
+		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, '   ');
+
+			expect(
+				screen.queryByText(/No series found matching/i),
+			).not.toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('legend actions', () => {
+		it('calls onLegendClick when a legend item is clicked', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			await user.click(screen.getByText('A'));
+
+			expect(onLegendClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls mouseMove when the mouse moves over a legend item', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendItem = document.querySelector(
+				'[data-legend-item-id="0"]',
+			) as HTMLElement;
+
+			await user.hover(legendItem);
+
+			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const container = document.querySelector('.legend-container') as HTMLElement;
+
+			await user.hover(container);
+			await user.unhover(container);
+
+			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
+		});
+	});
+});

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
@@ -115,39 +115,26 @@ export enum LegendPosition {
 export interface LegendConfig {
 	position: LegendPosition;
 }
-export enum LegendAction {
-	TOGGLE = 'toggle',
-	SHOW_ONLY = 'showOnly',
-	SHOW_ALL = 'showAll',
-	HOVER = 'hover',
-}
-
-/** Everything the legend can ask of its container, as one dispatch. */
-export type LegendActionPayload =
-	/** Row click / Space / Enter / marker click: hide or show that one series. */
-	| { type: LegendAction.TOGGLE; seriesIndex: number }
-	/** Show that series alone. */
-	| { type: LegendAction.SHOW_ONLY; seriesIndex: number }
-	/** Leave the narrowed selection and show every series. */
-	| { type: LegendAction.SHOW_ALL }
-	/** Row hover, for the chart-side highlight; null on leave. */
-	| { type: LegendAction.HOVER; seriesIndex: number | null };
-
-export type OnLegendAction = (payload: LegendActionPayload) => void;
-
 /**
  * Presentational legend props. Source-agnostic: it renders whatever `items`
  * it's given and delegates interaction to the container handlers, so it serves
- * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
+ * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie). The search
+ * box is intrinsic to the RIGHT position (derived from `position`, not a flag).
  */
 export interface LegendProps {
 	items: LegendItem[];
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Series index highlighted by the chart cursor. */
+	/** Series index to highlight (hovered/focused). */
 	focusedSeriesIndex: number | null;
-	onAction: OnLegendAction;
+	/**
+	 * Container-delegated handlers. Items carry `data-legend-item-id`, so the
+	 * handler reads the target's id rather than binding per item.
+	 */
+	onClick: MouseEventHandler<HTMLDivElement>;
+	onMouseMove: MouseEventHandler<HTMLDivElement>;
+	onMouseLeave: () => void;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
 }

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

@@ -3,6 +3,7 @@ import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
+import { resolveFillOpacity, toAlphaHex } from '../utils/fillOpacity';
 import { generateGradientFill } from '../utils/generateGradientFill';
 import { isolatedPointFilter } from '../utils/seriesPointsFilter';
 import {
@@ -58,7 +59,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap, fillColor, fillMode } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor, fillMode, fillOpacity } =
+			this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? DEFAULT_LINE_WIDTH,
@@ -86,11 +88,17 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
 		} else if (fillMode && fillMode !== FillMode.None) {
+			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
-				lineConfig.fill = `${finalFillColor}70`;
+				lineConfig.fill = `${finalFillColor}${toAlphaHex(resolvedOpacity)}`;
 			} else if (fillMode === FillMode.Gradient) {
 				lineConfig.fill = (self: uPlot): CanvasGradient =>
-					generateGradientFill(self, finalFillColor, 'rgba(0, 0, 0, 0)');
+					generateGradientFill(
+						self,
+						finalFillColor,
+						'rgba(0, 0, 0, 0)',
+						resolvedOpacity,
+					);
 			}
 		}
 

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

@@ -3,7 +3,7 @@ import uPlot from 'uplot';
 
 import { isolatedPointFilter } from '../../utils/seriesPointsFilter';
 import type { SeriesProps } from '../types';
-import { DrawStyle, LineInterpolation, LineStyle } from '../types';
+import { DrawStyle, FillMode, LineInterpolation, LineStyle } from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
@@ -362,4 +362,40 @@ describe('UPlotSeriesBuilder', () => {
 		expect(config.points?.filter).toBeUndefined();
 		expect(config.points?.show).toBe(true);
 	});
+
+	// Pins the alpha the solid fill hardcoded before opacity was configurable.
+	it('fills a solid series at the default opacity', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				fillColor: '#112233',
+				fillMode: FillMode.Solid,
+			}),
+		);
+
+		expect(builder.getConfig().fill).toBe('#11223370');
+	});
+
+	it('fills a solid series at the declared opacity', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				fillColor: '#112233',
+				fillMode: FillMode.Solid,
+				fillOpacity: 0.5,
+			}),
+		);
+
+		expect(builder.getConfig().fill).toBe('#11223380');
+	});
+
+	it('leaves an unfilled series without a fill', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				fillColor: '#112233',
+				fillMode: FillMode.None,
+				fillOpacity: 0.5,
+			}),
+		);
+
+		expect(builder.getConfig().fill).toBeUndefined();
+	});
 });

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

@@ -222,6 +222,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	spanGaps?: boolean | number;
 	fillColor?: string;
 	fillMode?: FillMode;
+	/** 0–1, for `Solid` and `Gradient`; unset uses `DEFAULT_FILL_OPACITY`. */
+	fillOpacity?: number;
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };

frontend/src/lib/uPlotV2/constants.ts

@@ -6,11 +6,6 @@ export const DEFAULT_HOVER_PROXIMITY_VALUE = 30; // only snap if within 30px hor
 export const DEFAULT_FOCUS_PROXIMITY_VALUE = 1e6;
 export const STEP_INTERVAL_MULTIPLIER = 3; // multiply the width computed by STEP_INTERVAL_MULTIPLIER to get the hover prox value
 
-/** Opacity applied to the series that are NOT highlighted while a legend row is hovered. */
-export const LEGEND_HIGHLIGHT_DIM_ALPHA = 0.16;
-/** Stroke-width multiplier applied to the series highlighted from the legend. */
-export const LEGEND_HIGHLIGHT_WIDTH_RATIO = 1.6;
-
 export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
 	focus: {
 		alpha: 0.3,

frontend/src/lib/uPlotV2/context/PlotContext.tsx

@@ -8,10 +8,6 @@ import {
 	useMemo,
 	useRef,
 } from 'react';
-import {
-	LEGEND_HIGHLIGHT_DIM_ALPHA,
-	LEGEND_HIGHLIGHT_WIDTH_RATIO,
-} from 'lib/uPlotV2/constants';
 import type { SeriesVisibilityItem } from 'lib/visualization/panels/types';
 import { updateSeriesVisibilityToLocalStorage } from 'lib/visualization/panels/utils/legendVisibilityUtils';
 import type uPlot from 'uplot';
@@ -24,26 +20,12 @@ export interface IPlotContext {
 	setPlotContextInitialState: (state: PlotContextInitialState) => void;
 	onToggleSeriesVisibility: (seriesIndex: number) => void;
 	onToggleSeriesOnOff: (seriesIndex: number) => void;
-	/** Show this series alone. */
-	onShowOnlySeries: (seriesIndex: number) => void;
-	/** Show every series again. */
-	onShowAllSeries: () => void;
 	onFocusSeries: (seriesIndex: number | null) => void;
-	/** Lift one series above the rest (dim + thicken) without changing visibility. */
-	onHighlightSeries: (seriesIndex: number | null) => void;
 	syncSeriesVisibilityToLocalStorage: () => void;
 }
 
 export const PlotContext = createContext<IPlotContext | null>(null);
 
-/** Data series (index 0 is the x-axis) currently drawn. */
-const countShownSeries = (plot: uPlot): number =>
-	plot.series.reduce(
-		(count, series, index) =>
-			index > 0 && series.show !== false ? count + 1 : count,
-		0,
-	);
-
 export const PlotContextProvider = ({
 	children,
 }: PropsWithChildren): JSX.Element => {
@@ -51,9 +33,6 @@ export const PlotContextProvider = ({
 	const activeSeriesIndex = useRef<number | undefined>(undefined);
 	const idRef = useRef<string | undefined>(undefined);
 	const shouldSavePreferencesRef = useRef<boolean>(false);
-	/** Pre-highlight stroke widths, captured on the first highlight so it can be undone. */
-	const baseSeriesWidthsRef = useRef<Map<number, number | undefined>>(new Map());
-	const highlightedSeriesIndexRef = useRef<number | null>(null);
 
 	const setPlotContextInitialState = useCallback(
 		({
@@ -64,8 +43,6 @@ export const PlotContextProvider = ({
 			uPlotInstanceRef.current = uPlotInstance;
 			idRef.current = id;
 			activeSeriesIndex.current = undefined;
-			baseSeriesWidthsRef.current = new Map();
-			highlightedSeriesIndexRef.current = null;
 			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
 		[],
@@ -87,54 +64,6 @@ export const PlotContextProvider = ({
 		updateSeriesVisibilityToLocalStorage(idRef.current, seriesVisibility);
 	}, []);
 
-	const onHighlightSeries = useCallback((seriesIndex: number | null): void => {
-		const plot = uPlotInstanceRef.current;
-		if (!plot) {
-			return;
-		}
-
-		highlightedSeriesIndexRef.current = seriesIndex;
-
-		plot.series.forEach((series, index) => {
-			if (index === 0) {
-				return;
-			}
-			if (!baseSeriesWidthsRef.current.has(index)) {
-				baseSeriesWidthsRef.current.set(index, series.width);
-			}
-			const baseWidth = baseSeriesWidthsRef.current.get(index);
-			const isHighlighted = index === seriesIndex;
-
-			/* eslint-disable no-param-reassign */
-			series.alpha =
-				seriesIndex === null || isHighlighted ? 1 : LEGEND_HIGHLIGHT_DIM_ALPHA;
-			series.width =
-				isHighlighted && baseWidth !== undefined
-					? baseWidth * LEGEND_HIGHLIGHT_WIDTH_RATIO
-					: baseWidth;
-			/* eslint-enable no-param-reassign */
-		});
-
-		// Only the stroke style changed, so the cached paths stay valid.
-		plot.redraw(false);
-	}, []);
-
-	/**
-	 * Leaving the dim on a hidden series leaves every other one faded, which
-	 * reads as an isolation rather than as one series being excluded.
-	 */
-	const clearHighlightIfHidden = useCallback((): void => {
-		const plot = uPlotInstanceRef.current;
-		const highlightedIndex = highlightedSeriesIndexRef.current;
-		if (!plot || highlightedIndex === null) {
-			return;
-		}
-
-		if (plot.series[highlightedIndex]?.show === false) {
-			onHighlightSeries(null);
-		}
-	}, [onHighlightSeries]);
-
 	const onToggleSeriesVisibility = useCallback(
 		(seriesIndex: number): void => {
 			const plot = uPlotInstanceRef.current;
@@ -174,61 +103,14 @@ export const PlotContextProvider = ({
 			if (!series) {
 				return;
 			}
-
-			// An empty chart is never worth reaching.
-			const isHiding = series.show !== false;
-			if (isHiding && countShownSeries(plot) <= 1) {
-				return;
-			}
-
 			plot.setSeries(seriesIndex, { show: !series.show });
 			if (idRef.current && shouldSavePreferencesRef.current) {
 				syncSeriesVisibilityToLocalStorage();
 			}
-
-			clearHighlightIfHidden();
 		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
+		[syncSeriesVisibilityToLocalStorage],
 	);
 
-	/** Applies `resolveShow` to every data series in one batch, then persists. */
-	const setSeriesVisibility = useCallback(
-		(resolveShow: (seriesIndex: number) => boolean): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
-
-			activeSeriesIndex.current = undefined;
-
-			plot.batch(() => {
-				plot.series.forEach((_, index) => {
-					if (index === 0) {
-						return;
-					}
-					plot.setSeries(index, { show: resolveShow(index) });
-				});
-				if (idRef.current && shouldSavePreferencesRef.current) {
-					syncSeriesVisibilityToLocalStorage();
-				}
-			});
-
-			clearHighlightIfHidden();
-		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
-	);
-
-	const onShowOnlySeries = useCallback(
-		(seriesIndex: number): void => {
-			setSeriesVisibility((index) => index === seriesIndex);
-		},
-		[setSeriesVisibility],
-	);
-
-	const onShowAllSeries = useCallback((): void => {
-		setSeriesVisibility(() => true);
-	}, [setSeriesVisibility]);
-
 	const onFocusSeries = useCallback((seriesIndex: number | null): void => {
 		const plot = uPlotInstanceRef.current;
 		if (!plot) {
@@ -249,20 +131,14 @@ export const PlotContextProvider = ({
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		}),
 		[
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		],
 	);

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -26,7 +26,6 @@ const createMockPlot = (series: MockSeries[] = []): uPlot =>
 		series,
 		batch: jest.fn((fn: () => void) => fn()),
 		setSeries: jest.fn(),
-		redraw: jest.fn(),
 	}) as unknown as uPlot;
 
 interface TestComponentProps {
@@ -45,10 +44,7 @@ const TestComponent = ({
 		syncSeriesVisibilityToLocalStorage,
 		onToggleSeriesVisibility,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowAllSeries,
 		onFocusSeries,
-		onHighlightSeries,
 	} = usePlotContext();
 	const handleInit = (): void => {
 		if (!plot || !id || typeof shouldSaveSelectionPreference !== 'boolean') {
@@ -88,13 +84,6 @@ const TestComponent = ({
 			>
 				Toggle on/off 1
 			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-2"
-				onClick={(): void => onToggleSeriesOnOff(2)}
-			>
-				Toggle on/off 2
-			</button>
 			<button
 				type="button"
 				data-testid="toggle-on-off-5"
@@ -109,34 +98,6 @@ const TestComponent = ({
 			>
 				Focus series
 			</button>
-			<button
-				type="button"
-				data-testid="show-only-1"
-				onClick={(): void => onShowOnlySeries(1)}
-			>
-				Show only 1
-			</button>
-			<button
-				type="button"
-				data-testid="show-all"
-				onClick={(): void => onShowAllSeries()}
-			>
-				Show all
-			</button>
-			<button
-				type="button"
-				data-testid="highlight-1"
-				onClick={(): void => onHighlightSeries(1)}
-			>
-				Highlight 1
-			</button>
-			<button
-				type="button"
-				data-testid="clear-highlight"
-				onClick={(): void => onHighlightSeries(null)}
-			>
-				Clear highlight
-			</button>
 		</div>
 	);
 };
@@ -312,7 +273,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -364,7 +324,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -384,48 +343,6 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
 			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
 		});
-
-		it('refuses to hide the last series showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// An empty chart is never a state worth reaching.
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('still shows a hidden series when only one is left showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-		});
 	});
 
 	describe('onFocusSeries', () => {
@@ -464,193 +381,4 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
 		});
 	});
-	describe('onShowOnlySeries', () => {
-		const renderWithSeries = (
-			series: MockSeries[],
-		): { plot: uPlot; user: ReturnType<typeof userEvent.setup> } => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			return { plot, user };
-		};
-
-		it('hides every other series, leaving the x-axis alone', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalled();
-		});
-
-		it('keeps isolating the series that is already the only one shown', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-		});
-	});
-
-	describe('onShowAllSeries', () => {
-		it('shows every hidden series again', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-all'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: true });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-		});
-	});
-
-	describe('onHighlightSeries', () => {
-		const series = (): MockSeries[] => [
-			{ label: 'x-axis', show: true },
-			{ label: 'CPU', show: true, width: 2 },
-			{ label: 'Memory', show: true, width: 2 },
-		];
-
-		it('dims the other series and thickens the highlighted one', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(3.2);
-			expect(plot.series[2].alpha).toBe(0.16);
-			expect(plot.series[2].width).toBe(2);
-			// Only the stroke changed, so the cached paths are reused.
-			expect(plot.redraw).toHaveBeenCalledWith(false);
-		});
-
-		it('restores every series when the highlight is cleared', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('clear-highlight'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(2);
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('drops the dim when the highlighted series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			// The mock's setSeries doesn't mutate, so mirror what uPlot would do.
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// Otherwise every remaining series stays faded and the panel reads as
-			// an isolation instead of one series being excluded.
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('keeps the dim when a different series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-2'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[2].alpha).toBe(0.16);
-		});
-
-		it('leaves visibility untouched', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-	});
 });

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -1,5 +1,4 @@
 import { renderHook } from '@testing-library/react';
-import { LegendAction } from 'lib/uPlotV2/components/types';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import { useLegendActions } from 'lib/uPlotV2/hooks/useLegendActions';
 
@@ -12,12 +11,10 @@ const mockUsePlotContext = usePlotContext as jest.MockedFunction<
 describe('useLegendActions', () => {
 	let onToggleSeriesVisibility: jest.Mock;
 	let onToggleSeriesOnOff: jest.Mock;
-	let onShowOnlySeries: jest.Mock;
-	let onShowAllSeries: jest.Mock;
-	let onFocusSeries: jest.Mock;
-	let onHighlightSeries: jest.Mock;
+	let onFocusSeriesPlot: jest.Mock;
 	let setPlotContextInitialState: jest.Mock;
 	let syncSeriesVisibilityToLocalStorage: jest.Mock;
+	let setFocusedSeriesIndexMock: jest.Mock;
 	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
 
 	beforeAll(() => {
@@ -40,20 +37,15 @@ describe('useLegendActions', () => {
 	beforeEach(() => {
 		onToggleSeriesVisibility = jest.fn();
 		onToggleSeriesOnOff = jest.fn();
-		onShowOnlySeries = jest.fn();
-		onShowAllSeries = jest.fn();
-		onFocusSeries = jest.fn();
-		onHighlightSeries = jest.fn();
+		onFocusSeriesPlot = jest.fn();
 		setPlotContextInitialState = jest.fn();
 		syncSeriesVisibilityToLocalStorage = jest.fn();
+		setFocusedSeriesIndexMock = jest.fn();
 
 		mockUsePlotContext.mockReturnValue({
 			onToggleSeriesVisibility,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
-			onFocusSeries,
-			onHighlightSeries,
+			onFocusSeries: onFocusSeriesPlot,
 			setPlotContextInitialState,
 			syncSeriesVisibilityToLocalStorage,
 		});
@@ -61,65 +53,149 @@ describe('useLegendActions', () => {
 		cancelAnimationFrameSpy.mockClear();
 	});
 
-	describe('visibility actions', () => {
-		it('toggles a single series on row click', () => {
-			const { result } = renderHook(() => useLegendActions());
+	const createMouseEvent = (options: {
+		legendItemId?: number;
+		isMarker?: boolean;
+	}): any => {
+		const { legendItemId, isMarker = false } = options;
 
-			result.current({ type: LegendAction.TOGGLE, seriesIndex: 2 });
+		return {
+			target: {
+				dataset: {
+					...(isMarker ? { isLegendMarker: 'true' } : {}),
+				},
+				closest: jest.fn(() =>
+					legendItemId !== undefined
+						? { dataset: { legendItemId: String(legendItemId) } }
+						: null,
+				),
+			},
+		};
+	};
 
-			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(2);
-			// The row must never isolate — that is what "Only" is for.
+	describe('onLegendClick', () => {
+		it('toggles series visibility when clicking on legend label', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(createMouseEvent({ legendItemId: 0 }));
+
+			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+		});
+
+		it('toggles series on/off when clicking on marker', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(
+				createMouseEvent({ legendItemId: 0, isMarker: true }),
+			);
+
+			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
 			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 
-		it('forwards the Only and All actions to the plot', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('does nothing when click target is not inside a legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.SHOW_ONLY, seriesIndex: 1 });
-			result.current({ type: LegendAction.SHOW_ALL });
+			result.current.onLegendClick(createMouseEvent({}));
 
-			expect(onShowOnlySeries).toHaveBeenCalledWith(1);
-			expect(onShowAllSeries).toHaveBeenCalled();
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 	});
 
-	describe('hover highlight', () => {
-		it('highlights the hovered series', () => {
-			const { result } = renderHook(() => useLegendActions());
+	describe('onFocusSeries', () => {
+		it('schedules focus update and calls plot focus handler via mouse move', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.HOVER, seriesIndex: 2 });
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(2);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
 		});
 
-		it('clears the highlight on leave', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.HOVER, seriesIndex: null });
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(null);
-		});
-
-		it('coalesces rapid hovers into one frame', () => {
-			const { result } = renderHook(() => useLegendActions());
-
-			result.current({ type: LegendAction.HOVER, seriesIndex: 1 });
-			result.current({ type: LegendAction.HOVER, seriesIndex: 2 });
-
-			// Each new hover cancels the frame the previous one queued.
 			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
 		});
+	});
 
-		it('cancels a pending highlight frame on unmount', () => {
-			jest
-				.spyOn(global, 'requestAnimationFrame')
-				.mockImplementation((): number => 7);
+	describe('onLegendMouseMove', () => {
+		it('focuses new series when hovering over different legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 0,
+				}),
+			);
 
-			const { result, unmount } = renderHook(() => useLegendActions());
-			result.current({ type: LegendAction.HOVER, seriesIndex: 1 });
-			unmount();
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(7);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
+		});
+
+		it('does nothing when hovering over already focused series', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 1,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
+
+			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
+			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onLegendMouseLeave', () => {
+		it('cancels pending animation frame and clears focus state', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseLeave();
+
+			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
 		});
 	});
 });

frontend/src/lib/uPlotV2/hooks/useLegendActions.ts

@@ -1,66 +1,117 @@
-import { useCallback, useEffect, useRef } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 
-import {
-	LegendAction,
-	LegendActionPayload,
-	OnLegendAction,
-} from '../components/types';
-
-/**
- * Legend interactions, bound to the plot through PlotContext. Hover is coalesced
- * to one chart redraw per frame.
- */
-export function useLegendActions(): OnLegendAction {
+export function useLegendActions({
+	setFocusedSeriesIndex,
+	focusedSeriesIndex,
+}: {
+	setFocusedSeriesIndex: Dispatch<SetStateAction<number | null>>;
+	focusedSeriesIndex: number | null;
+}): {
+	onLegendClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onFocusSeries: (seriesIndex: number | null) => void;
+	onLegendMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+} {
 	const {
+		onFocusSeries: onFocusSeriesPlot,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowAllSeries,
-		onHighlightSeries,
+		onToggleSeriesVisibility,
 	} = usePlotContext();
 
-	const rafIdRef = useRef<number | null>(null);
+	const rafId = useRef<number | null>(null); // requestAnimationFrame id
 
-	const cancelPendingHighlight = useCallback((): void => {
-		if (rafIdRef.current != null) {
-			cancelAnimationFrame(rafIdRef.current);
-			rafIdRef.current = null;
+	const getLegendItemIdFromEvent = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): string | undefined => {
+			const target = e.target as HTMLElement | null;
+			if (!target) {
+				return undefined;
+			}
+
+			const legendItemElement = target.closest<HTMLElement>(
+				'[data-legend-item-id]',
+			);
+
+			return legendItemElement?.dataset.legendItemId;
+		},
+		[],
+	);
+
+	const onLegendClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): void => {
+			const legendItemId = getLegendItemIdFromEvent(e);
+			if (!legendItemId) {
+				return;
+			}
+			const isLegendMarker = (e.target as HTMLElement).dataset.isLegendMarker;
+			const seriesIndex = Number(legendItemId);
+
+			if (isLegendMarker) {
+				onToggleSeriesOnOff(seriesIndex);
+				return;
+			}
+
+			onToggleSeriesVisibility(seriesIndex);
+		},
+		[onToggleSeriesVisibility, onToggleSeriesOnOff, getLegendItemIdFromEvent],
+	);
+
+	const onFocusSeries = useCallback(
+		(seriesIndex: number | null): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+			}
+			rafId.current = requestAnimationFrame(() => {
+				setFocusedSeriesIndex(seriesIndex);
+				onFocusSeriesPlot(seriesIndex);
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeriesPlot],
+	);
+
+	const onLegendMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
+		const legendItemId = getLegendItemIdFromEvent(e);
+		const seriesIndex = legendItemId ? Number(legendItemId) : null;
+		if (seriesIndex === focusedSeriesIndex) {
+			return;
 		}
-	}, []);
+		onFocusSeries(seriesIndex);
+	};
 
-	useEffect(() => cancelPendingHighlight, [cancelPendingHighlight]);
+	const onLegendMouseLeave = useCallback(
+		(): void => {
+			// Cancel any pending RAF from handleFocusSeries to prevent race condition
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+				rafId.current = null;
+			}
+			setFocusedSeriesIndex(null);
+			onFocusSeries(null);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeries],
+	);
 
-	return useCallback(
-		(payload: LegendActionPayload): void => {
-			switch (payload.type) {
-				case LegendAction.TOGGLE:
-					onToggleSeriesOnOff(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ONLY:
-					onShowOnlySeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ALL:
-					onShowAllSeries();
-					break;
-				case LegendAction.HOVER: {
-					const { seriesIndex } = payload;
-					cancelPendingHighlight();
-					rafIdRef.current = requestAnimationFrame(() => {
-						rafIdRef.current = null;
-						onHighlightSeries(seriesIndex);
-					});
-					break;
-				}
-				default:
-					break;
+	// Cleanup pending animation frames on unmount
+	useEffect(
+		() => (): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
 			}
 		},
-		[
-			cancelPendingHighlight,
-			onHighlightSeries,
-			onShowAllSeries,
-			onShowOnlySeries,
-			onToggleSeriesOnOff,
-		],
+		[],
 	);
+	return {
+		onLegendClick,
+		onFocusSeries,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	};
 }

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

@@ -0,0 +1,43 @@
+import {
+	DEFAULT_FILL_OPACITY,
+	GRADIENT_MID_STOP_RATIO,
+	resolveFillOpacity,
+	toAlphaHex,
+} from '../fillOpacity';
+
+describe('resolveFillOpacity', () => {
+	it('falls back to the default for a missing or unusable value', () => {
+		expect(resolveFillOpacity(undefined)).toBe(DEFAULT_FILL_OPACITY);
+		expect(resolveFillOpacity(null)).toBe(DEFAULT_FILL_OPACITY);
+		expect(resolveFillOpacity(NaN)).toBe(DEFAULT_FILL_OPACITY);
+	});
+
+	it('keeps 0 rather than treating it as absent', () => {
+		expect(resolveFillOpacity(0)).toBe(0);
+	});
+
+	it('clamps to 0–1', () => {
+		expect(resolveFillOpacity(-0.5)).toBe(0);
+		expect(resolveFillOpacity(2)).toBe(1);
+	});
+});
+
+describe('toAlphaHex', () => {
+	// The alphas hardcoded before opacity was configurable.
+	it('reproduces the legacy solid alpha at the default opacity', () => {
+		expect(toAlphaHex(DEFAULT_FILL_OPACITY)).toBe('70');
+	});
+
+	it('reproduces the legacy gradient mid-stop alpha at the default opacity', () => {
+		expect(toAlphaHex(DEFAULT_FILL_OPACITY * GRADIENT_MID_STOP_RATIO)).toBe('40');
+	});
+
+	it('pads a single-digit alpha', () => {
+		expect(toAlphaHex(0)).toBe('00');
+		expect(toAlphaHex(0.02)).toBe('05');
+	});
+
+	it('maps a full opacity to ff', () => {
+		expect(toAlphaHex(1)).toBe('ff');
+	});
+});

frontend/src/lib/uPlotV2/utils/fillOpacity.ts

@@ -0,0 +1,22 @@
+/**
+ * `0x70 / 255` reproduces the alpha the fill modes hardcoded before opacity was
+ * configurable, so a series that declares none renders byte-identically.
+ */
+export const DEFAULT_FILL_OPACITY = 0x70 / 255;
+
+/** Alpha ratio between a gradient's two stops, so it keeps its falloff at any opacity. */
+export const GRADIENT_MID_STOP_RATIO = 0x40 / 0x70;
+
+/** Clamps into 0–1; missing or non-finite falls back to the default. */
+export function resolveFillOpacity(opacity?: number | null): number {
+	if (typeof opacity !== 'number' || !Number.isFinite(opacity)) {
+		return DEFAULT_FILL_OPACITY;
+	}
+	return Math.min(1, Math.max(0, opacity));
+}
+
+/** 0–1 opacity → the two-digit hex alpha suffix appended to an `#rrggbb` colour. */
+export function toAlphaHex(opacity: number): string {
+	const alpha = Math.round(resolveFillOpacity(opacity) * 255);
+	return alpha.toString(16).padStart(2, '0');
+}

frontend/src/lib/uPlotV2/utils/generateGradientFill.ts

@@ -1,9 +1,16 @@
 import uPlot from 'uplot';
 
+import {
+	DEFAULT_FILL_OPACITY,
+	GRADIENT_MID_STOP_RATIO,
+	toAlphaHex,
+} from './fillOpacity';
+
 export function generateGradientFill(
 	uPlotInstance: uPlot,
 	startColor: string,
 	endColor: string,
+	opacity: number = DEFAULT_FILL_OPACITY,
 ): CanvasGradient {
 	const g = uPlotInstance.ctx.createLinearGradient(
 		0,
@@ -11,8 +18,11 @@ export function generateGradientFill(
 		0,
 		uPlotInstance.bbox.height,
 	);
-	g.addColorStop(0, `${startColor}70`);
-	g.addColorStop(0.6, `${startColor}40`);
+	g.addColorStop(0, `${startColor}${toAlphaHex(opacity)}`);
+	g.addColorStop(
+		0.6,
+		`${startColor}${toAlphaHex(opacity * GRADIENT_MID_STOP_RATIO)}`,
+	);
 	g.addColorStop(1, endColor);
 	return g;
 }

frontend/src/lib/visualization/charts/Pie/Pie.tsx

@@ -45,7 +45,9 @@ export default function Pie({
 		visibleData,
 		legendItems,
 		focusedSeriesIndex,
-		onLegendAction,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	} = usePieInteractions(data, id);
 
 	const {
@@ -225,7 +227,9 @@ export default function Pie({
 					position={position}
 					averageLegendWidth={averageLegendWidth}
 					focusedSeriesIndex={focusedSeriesIndex}
-					onAction={onLegendAction}
+					onClick={onLegendClick}
+					onMouseMove={onLegendMouseMove}
+					onMouseLeave={onLegendMouseLeave}
 				/>
 			</div>
 		</div>

frontend/src/lib/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -100,29 +100,17 @@ describe('Pie', () => {
 		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
 	});
 
-	it('isolates a slice when its legend row is clicked with everything showing', () => {
+	it('hides a slice when its legend marker is clicked', () => {
 		renderPie();
 		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
 		expect(svg.querySelectorAll('path')).toHaveLength(3);
 
-		fireEvent.click(screen.getByTestId('legend-item-1'));
-
-		// Nothing visible to exclude, so the click isolates: one arc left.
-		expect(svg.querySelectorAll('path')).toHaveLength(1);
-	});
-
-	it('excludes a slice when its legend row is clicked with others already hidden', () => {
-		renderPie();
-		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
-
-		// Isolate, then add a second slice back, so nothing is isolated any more.
-		fireEvent.click(screen.getByTestId('legend-item-1'));
-		fireEvent.click(screen.getByTestId('legend-item-0'));
-		expect(svg.querySelectorAll('path')).toHaveLength(2);
-
-		fireEvent.click(screen.getByTestId('legend-item-0'));
+		const marker = document.querySelector(
+			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
+		) as HTMLElement;
+		fireEvent.click(marker);
 
 		// One slice hidden → one fewer arc drawn.
-		expect(svg.querySelectorAll('path')).toHaveLength(1);
+		expect(svg.querySelectorAll('path')).toHaveLength(2);
 	});
 });

frontend/src/lib/visualization/charts/__tests__/utils.test.ts

@@ -1,9 +1,6 @@
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 
-import {
-	calculateAverageLegendWidth,
-	calculateChartDimensions,
-} from 'lib/visualization/charts/utils';
+import { calculateChartDimensions } from 'lib/visualization/charts/utils';
 
 const labels = (count: number, length = 20): string[] =>
 	Array.from({ length: count }, (_, i) =>
@@ -52,104 +49,63 @@ describe('calculateChartDimensions', () => {
 		expect(dims.width).toBe(784);
 	});
 
-	it('RIGHT: never shrinks the column below the floor that fits its chrome', () => {
+	it('RIGHT: never shrinks the column below the 150px floor', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 400,
 			legendConfig: { position: LegendPosition.RIGHT },
 			seriesLabels: labels(3, 3),
 		});
-		expect(dims.legendWidth).toBe(190);
-		expect(dims.width).toBe(810);
+		expect(dims.legendWidth).toBe(150);
+		expect(dims.width).toBe(850);
 	});
 
-	it('RIGHT: on a narrow container the legend keeps its chrome, up to half the width', () => {
+	it('RIGHT: on a narrow container the legend never takes more than 40% of the width', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 300,
 			containerHeight: 400,
 			legendConfig: { position: LegendPosition.RIGHT },
 			seriesLabels: labels(10, 40),
 		});
-		// 40% is 120px, too narrow for the column's own toolbar.
-		expect(dims.legendWidth).toBe(150);
-		expect(dims.width).toBe(150);
+		expect(dims.legendWidth).toBe(120);
+		expect(dims.width).toBe(180);
 	});
 
-	it('RIGHT: stops widening the column once the panel is narrower than its chrome', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 200,
-			containerHeight: 400,
-			legendConfig: { position: LegendPosition.RIGHT },
-			seriesLabels: labels(10, 40),
-		});
-		expect(dims.legendWidth).toBe(100);
-		expect(dims.width).toBe(100);
-	});
-
-	it('BOTTOM: items that fit one row reserve exactly one row', () => {
+	it('BOTTOM: a single row of items reserves one legend row', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(3),
 		});
-		// One 28px row + the wrapper's 12px bottom padding.
+		// One row = line height (28) + padding (12).
 		expect(dims.legendHeight).toBe(40);
 		expect(dims.height).toBe(460);
 		expect(dims.legendWidth).toBe(1000);
 	});
 
-	it('BOTTOM: more items than one row reserve exactly two rows', () => {
+	it('BOTTOM: many items cap at two rows on a tall container', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two 28px rows + the 2px row gap + 12px bottom padding — no room for a
-		// clipped third row, and none left over.
-		expect(dims.legendHeight).toBe(70);
-		expect(dims.height).toBe(430);
+		// Two rows = 2 * 40 - 12 (no trailing padding) = 68, under the 80px cap.
+		expect(dims.legendHeight).toBe(68);
+		expect(dims.height).toBe(432);
 	});
 
-	it('BOTTOM: items one past a row still reserve two rows', () => {
-		// 1000px wide fits 5 of these per row, so 6 items need a second row.
+	it('BOTTOM: on a short container the legend never takes more than 30% of the height', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(6),
-		});
-		expect(dims.legendHeight).toBe(70);
-	});
-
-	it('BOTTOM: drops to a single row rather than take half a short panel', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 120,
+			containerHeight: 160,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// A whole row goes rather than a clipped one being reserved.
-		expect(dims.legendHeight).toBe(40);
-		expect(dims.height).toBe(80);
-	});
-});
-
-describe('calculateAverageLegendWidth', () => {
-	it('scales with the label length', () => {
-		// 16px of chrome + 30 chars at 8px.
-		expect(calculateAverageLegendWidth(labels(4, 30))).toBe(256);
-	});
-
-	it('never drops below what a row needs to contain its hover actions', () => {
-		// Short or unnamed series would otherwise size a column the actions
-		// escape, spilling over the item beside it.
-		expect(calculateAverageLegendWidth(['cpu'])).toBe(110);
-		expect(calculateAverageLegendWidth([''])).toBe(110);
-	});
-
-	it('keeps the default estimate when there are no labels to measure', () => {
-		expect(calculateAverageLegendWidth([])).toBe(120);
+		// Without the height-relative cap the legend would take 68px of a 160px
+		// panel and the chart (pie especially) collapses to a sliver.
+		expect(dims.legendHeight).toBe(48); // 30% of 160
+		expect(dims.height).toBe(112);
 	});
 });

frontend/src/lib/visualization/charts/utils.ts

@@ -1,10 +1,4 @@
-import {
-	LEGEND_MAX_BOTTOM_ROWS,
-	MIN_LEGEND_ITEM_WIDTH,
-	LEGEND_ROW_GAP,
-	LEGEND_ROW_HEIGHT,
-	MAX_LEGEND_WIDTH,
-} from 'lib/uPlotV2/components/Legend/constants';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 export interface ChartDimensions {
 	width: number;
@@ -19,31 +13,22 @@ const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
 const BASE_LEGEND_WIDTH = 16;
 const LEGEND_PADDING = 12;
-// Two rows are worth having, but not at the cost of half the panel.
-const MAX_SHORT_PANEL_LEGEND_RATIO = 0.5;
+const LEGEND_LINE_HEIGHT = 28;
 
 // RIGHT legend is a vertical column with its own width budget (cap protects the donut).
 const MAX_RIGHT_LEGEND_WIDTH = 320;
 const RIGHT_LEGEND_WIDTH_RATIO = 0.4;
 // Column padding + copy button, not covered by the text-length estimate.
 const RIGHT_LEGEND_RESERVED_WIDTH = 40;
-// Fits the toolbar's "Showing N of M series" readout plus the wrapper padding.
-const MIN_RIGHT_LEGEND_WIDTH = 190;
-// Past this the split inverts and the chart becomes the smaller half.
-const RIGHT_LEGEND_FLOOR_RATIO = 0.5;
 
 /**
  * Calculates the average width of the legend items based on the labels of the series.
- * Never returns less than a legend row needs to hold its own hover actions.
  * @param legends - The labels of the series.
  * @returns The average width of the legend items.
  */
 export function calculateAverageLegendWidth(legends: string[]): number {
 	if (legends.length === 0) {
-		return Math.max(
-			MIN_LEGEND_ITEM_WIDTH,
-			DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH,
-		);
+		return DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
 	}
 
 	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
@@ -51,10 +36,7 @@ export function calculateAverageLegendWidth(legends: string[]): number {
 	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
 	const percentileLength = lengths[Math.max(0, index)];
 
-	return Math.max(
-		MIN_LEGEND_ITEM_WIDTH,
-		BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH,
-	);
+	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
 }
 
 /**
@@ -70,9 +52,7 @@ export function calculateAverageLegendWidth(legends: string[]): number {
  *   - Chart width is `containerWidth - legendWidth`.
  * - BOTTOM legend:
  *   - Computes how many items fit per row, then uses at most 2 rows.
- *   - `legendHeight` is exactly those rows plus the wrapper's bottom padding, so
- *     the rectangle never clips a row or reserves space for half of one. Two
- *     rows that would take half a short panel fall back to one row.
+ *   - `legendHeight` is derived from row count, capped by both a fixed pixel max and a % of container height.
  *   - Chart height is `containerHeight - legendHeight`, never below 0.
  * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
  *
@@ -120,14 +100,9 @@ export function calculateChartDimensions({
 			MAX_RIGHT_LEGEND_WIDTH,
 			containerWidth * RIGHT_LEGEND_WIDTH_RATIO,
 		);
-		// The column's chrome outranks the 40% share on a narrow panel.
-		const floorWidth = Math.min(
-			MIN_RIGHT_LEGEND_WIDTH,
-			containerWidth * RIGHT_LEGEND_FLOOR_RATIO,
-		);
 		const rightLegendWidth = Math.min(
-			Math.max(MIN_RIGHT_LEGEND_WIDTH, desiredLegendWidth),
-			Math.max(floorWidth, maxRightLegendWidth),
+			Math.max(150, desiredLegendWidth),
+			maxRightLegendWidth,
 		);
 
 		return {
@@ -140,6 +115,8 @@ export function calculateChartDimensions({
 		};
 	}
 
+	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;
+
 	const legendItemWidth = Math.ceil(
 		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
 	);
@@ -148,30 +125,30 @@ export function calculateChartDimensions({
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
 	);
 
-	// The wrapper's bottom padding is inside this height (border-box).
-	const heightForRows = (rowCount: number): number =>
-		rowCount * LEGEND_ROW_HEIGHT +
-		(rowCount - 1) * LEGEND_ROW_GAP +
-		LEGEND_PADDING;
-
-	const neededRowCount = Math.max(
-		1,
-		Math.min(
-			LEGEND_MAX_BOTTOM_ROWS,
-			Math.ceil(legendItemCount / legendItemsPerRow),
-		),
+	const legendRowCount = Math.min(
+		2,
+		Math.ceil(legendItemCount / legendItemsPerRow),
 	);
 
-	// Without this, short grid panels hand most of their area to the legend and
-	// the chart — the pie donut especially — collapses to a sliver. Dropping a
-	// whole row beats clipping one.
-	const legendRowCount =
-		neededRowCount > 1 &&
-		heightForRows(neededRowCount) > containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO
-			? 1
-			: neededRowCount;
+	const idealBottomLegendHeight =
+		legendRowCount > 1
+			? legendRowCount * legendRowHeight - LEGEND_PADDING
+			: legendRowHeight;
 
-	const bottomLegendHeight = heightForRows(legendRowCount);
+	// Cap at two rows / 80px, and never more than 30% of the container height
+	// (the doc above always promised the %-cap; without it, short grid panels
+	// hand most of their area to the legend and the chart — the pie donut
+	// especially — collapses to a sliver). 30% mirrors the RIGHT-legend width cap.
+	const maxAllowedLegendHeight = Math.min(
+		2 * legendRowHeight,
+		80,
+		Math.floor(containerHeight * 0.3),
+	);
+
+	const bottomLegendHeight = Math.min(
+		idealBottomLegendHeight,
+		maxAllowedLegendHeight,
+	);
 
 	return {
 		width: containerWidth,

frontend/src/lib/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -137,6 +137,15 @@ describe('stackSeries', () => {
 			]);
 		});
 
+		it('tops out at exactly 100 for values that do not divide cleanly', () => {
+			// Accumulating each slice's share drifts past 100 and stretches the y axis.
+			const data: AlignedData = [[1], [63], [78], [44]];
+
+			const [, top] = stackSeries(data, includeAll, StackMode.Percent).data;
+
+			expect(top[0]).toBe(100);
+		});
+
 		it('yields 0 across a column whose signed total cancels to zero', () => {
 			const data: AlignedData = [[1], [10], [-10]];
 

frontend/src/lib/visualization/charts/utils/stackSeriesUtils.ts

@@ -42,45 +42,11 @@ interface BuildStackedSeriesParams {
 	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]);
-}
-
 /**
  * Accumulate from last series upward: last series = raw values, first = total.
  * Omitted series are copied as-is (no accumulation).
@@ -93,14 +59,7 @@ function buildStackedSeries({
 	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,
-	});
+	const columnTotals = Array(pointCount).fill(0) as number[];
 
 	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
 		const rawValues = data[seriesIndex] as (number | null)[];
@@ -110,14 +69,27 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += contributionOf(
-					numericValue,
-					pointIndex,
-				));
+				return (columnTotals[pointIndex] += numericValue);
 			});
 		}
 	}
 
+	if (mode !== StackMode.Percent) {
+		return stackedSeries;
+	}
+
+	// Scale the running totals once they are final rather than accumulating per-slice
+	// percentages: the topmost series then divides the total by itself and lands on
+	// exactly 100, where accumulated shares drift past it and stretch the y axis.
+	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		stackedSeries[seriesIndex - 1] = stackedSeries[seriesIndex - 1].map(
+			(value, pointIndex) => toPercent(value as number, columnTotals[pointIndex]),
+		);
+	}
+
 	return stackedSeries;
 }
 

frontend/src/lib/visualization/hooks/__tests__/usePieInteractions.test.tsx

@@ -1,9 +1,9 @@
 import { act, renderHook } from '@testing-library/react';
-import { LegendAction } from 'lib/uPlotV2/components/types';
 import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
 } from 'lib/visualization/panels/utils/legendVisibilityUtils';
+import type { MouseEvent } from 'react';
 
 import { PieSlice } from 'lib/visualization/charts/types';
 import { usePieInteractions } from 'lib/visualization/hooks/usePieInteractions';
@@ -24,6 +24,22 @@ const DATA: PieSlice[] = [
 	{ label: 'checkout', value: 40, color: '#c' },
 ];
 
+// Builds a fake legend click/move event: `e.target.closest('[data-legend-item-id]')`
+// resolves to the item at `index`, and `e.target.dataset.isLegendMarker` flags marker clicks.
+function legendEvent(
+	index: number | null,
+	isMarker = false,
+): MouseEvent<HTMLDivElement> {
+	const itemEl =
+		index == null ? null : { dataset: { legendItemId: String(index) } };
+	return {
+		target: {
+			closest: (): unknown => itemEl,
+			dataset: { isLegendMarker: isMarker ? 'true' : undefined },
+		},
+	} as unknown as MouseEvent<HTMLDivElement>;
+}
+
 describe('usePieInteractions', () => {
 	beforeEach(() => {
 		mockGetStored.mockReturnValue(null);
@@ -43,16 +59,11 @@ describe('usePieInteractions', () => {
 		expect(result.current.active).toBeNull();
 	});
 
-	describe('row toggle', () => {
+	describe('marker click (toggle one)', () => {
 		it('hides then unhides the clicked slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
 			expect(result.current.legendItems[1].show).toBe(false);
@@ -62,50 +73,18 @@ describe('usePieInteractions', () => {
 				{ label: 'checkout', show: true },
 			]);
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 			expect(result.current.legendItems[1].show).toBe(true);
 		});
 	});
 
-	describe('the last slice showing', () => {
-		it('cannot be hidden', () => {
+	describe('label click (isolate / reset)', () => {
+		it('isolates the clicked slice, then resets on a second click', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 0,
-				}),
-			);
-
-			// An empty donut is never a state worth reaching.
-			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
-		});
-	});
-
-	describe('Only', () => {
-		it('isolates the slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
 			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
@@ -113,39 +92,8 @@ describe('usePieInteractions', () => {
 				false,
 				false,
 			]);
-		});
 
-		it('switches the isolation to another slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 2,
-				}),
-			);
-
-			expect(result.current.visibleData).toStrictEqual([DATA[2]]);
-		});
-	});
-
-	describe('All', () => {
-		it('brings every hidden slice back', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
-			act(() => result.current.onLegendAction({ type: LegendAction.SHOW_ALL }));
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 		});
@@ -155,37 +103,11 @@ describe('usePieInteractions', () => {
 		it('focuses the hovered slice and clears on leave', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() =>
-				result.current.onLegendAction({ type: LegendAction.HOVER, seriesIndex: 2 }),
-			);
+			act(() => result.current.onLegendMouseMove(legendEvent(2)));
 			expect(result.current.active).toStrictEqual(DATA[2]);
 			expect(result.current.focusedSeriesIndex).toBe(2);
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.HOVER,
-					seriesIndex: null,
-				}),
-			);
-			expect(result.current.active).toBeNull();
-			expect(result.current.focusedSeriesIndex).toBeNull();
-		});
-
-		it('drops the focus when the focused slice is hidden', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({ type: LegendAction.HOVER, seriesIndex: 1 }),
-			);
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
-
-			// Otherwise every remaining arc stays dimmed and the donut reads as an
-			// isolation instead of one slice being excluded.
+			act(() => result.current.onLegendMouseLeave());
 			expect(result.current.active).toBeNull();
 			expect(result.current.focusedSeriesIndex).toBeNull();
 		});
@@ -193,15 +115,8 @@ describe('usePieInteractions', () => {
 		it('does not focus a hidden slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
-			act(() =>
-				result.current.onLegendAction({ type: LegendAction.HOVER, seriesIndex: 1 }),
-			);
+			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
+			act(() => result.current.onLegendMouseMove(legendEvent(1)));
 
 			expect(result.current.active).toBeNull();
 		});
@@ -210,12 +125,7 @@ describe('usePieInteractions', () => {
 	describe('persistence', () => {
 		it('does not write to storage when no id is provided', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 0,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(0, true)));
 			expect(mockUpdateStored).not.toHaveBeenCalled();
 		});
 

frontend/src/lib/visualization/hooks/usePieInteractions.ts

@@ -1,11 +1,6 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
-import {
-	LegendAction,
-	LegendActionPayload,
-	OnLegendAction,
-} from 'lib/uPlotV2/components/types';
-import type { Dispatch, SetStateAction } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
 	getStoredSeriesVisibility,
@@ -23,15 +18,27 @@ export interface UsePieInteractionsResult {
 	legendItems: LegendItem[];
 	/** Index of the active slice for the legend's focus highlight, or null. */
 	focusedSeriesIndex: number | null;
-	/** Every legend interaction, dispatched by type. */
-	onLegendAction: OnLegendAction;
+	onLegendClick: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+}
+
+// Reads the slice index off the nearest `[data-legend-item-id]` ancestor of the
+// event target (the shared Legend tags each item with its seriesIndex).
+function getLegendIndex(e: MouseEvent<HTMLDivElement>): number | null {
+	const el = (e.target as HTMLElement | null)?.closest<HTMLElement>(
+		'[data-legend-item-id]',
+	);
+	const id = el?.dataset.legendItemId;
+	return id != null ? Number(id) : null;
 }
 
 /**
- * Pie interaction + derived state: hover/focus, slice hide/show driven by the
- * shared legend's actions, and persistence of the hidden set to localStorage
- * (keyed by `id`, matched by label) so it survives reloads. Returns the visible
- * slices, legend items, focus index, and the legend action dispatch.
+ * Pie interaction + derived state: hover/focus, slice hide/unhide (mirroring the
+ * uPlot legend — marker toggles one, label isolates), and persistence of the
+ * hidden set to localStorage (keyed by `id`, matched by label) so it survives
+ * reloads. Returns the visible slices, legend items, focus index, and the
+ * legend container handlers.
  */
 export function usePieInteractions(
 	data: PieSlice[],
@@ -41,6 +48,7 @@ export function usePieInteractions(
 	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
 		() => new Set(),
 	);
+	const isolatedIndexRef = useRef<number | null>(null);
 
 	const legendItems = useMemo<LegendItem[]>(
 		() =>
@@ -96,88 +104,65 @@ export function usePieInteractions(
 		[id, data],
 	);
 
-	const hoverSeries = useCallback(
-		(sliceIndex: number | null): void => {
+	const onLegendMouseMove = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
 			// Don't focus/dim for hidden slices — they aren't on the donut.
-			setActive(
-				sliceIndex != null && !hiddenIndices.has(sliceIndex)
-					? data[sliceIndex]
-					: null,
-			);
+			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
 		},
 		[data, hiddenIndices],
 	);
 
-	const toggleSeries = useCallback(
-		(sliceIndex: number): void => {
-			const next = new Set(hiddenIndices);
-			if (next.has(sliceIndex)) {
-				next.delete(sliceIndex);
-			} else {
-				// An empty donut is never worth reaching.
-				if (data.length - next.size <= 1) {
-					return;
-				}
-				next.add(sliceIndex);
+	// Marker click toggles just that slice on/off; label click isolates it
+	// (clicking the isolated one again resets to all) — mirrors the uPlot legend.
+	const onLegendClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			if (index == null) {
+				return;
 			}
-			applyHidden(next);
-		},
-		[data.length, hiddenIndices, applyHidden],
-	);
+			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
 
-	const showOnlySeries = useCallback(
-		(sliceIndex: number): void => {
-			const next = new Set<number>();
-			data.forEach((_, index) => {
-				if (index !== sliceIndex) {
+			if (isMarker) {
+				const next = new Set(hiddenIndices);
+				if (next.has(index)) {
+					next.delete(index);
+				} else {
 					next.add(index);
 				}
+				applyHidden(next);
+				return;
+			}
+
+			const isReset = isolatedIndexRef.current === index;
+			isolatedIndexRef.current = isReset ? null : index;
+			if (isReset) {
+				applyHidden(new Set());
+				return;
+			}
+			const next = new Set<number>();
+			data.forEach((_, i) => {
+				if (i !== index) {
+					next.add(i);
+				}
 			});
 			applyHidden(next);
 		},
-		[data, applyHidden],
+		[data, hiddenIndices, applyHidden],
 	);
 
-	const showAllSeries = useCallback(
-		(): void => applyHidden(new Set()),
-		[applyHidden],
-	);
+	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
 
-	const onLegendAction = useCallback(
-		(payload: LegendActionPayload): void => {
-			switch (payload.type) {
-				case LegendAction.TOGGLE:
-					toggleSeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ONLY:
-					showOnlySeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ALL:
-					showAllSeries();
-					break;
-				case LegendAction.HOVER:
-					hoverSeries(payload.seriesIndex);
-					break;
-				default:
-					break;
-			}
-		},
-		[toggleSeries, showOnlySeries, showAllSeries, hoverSeries],
-	);
-
-	const activeIndex = active ? data.indexOf(active) : -1;
-	// Left active, a hidden slice keeps every other arc dimmed, which reads as an
-	// isolation rather than as one slice being excluded.
-	const effectiveActive =
-		activeIndex >= 0 && !hiddenIndices.has(activeIndex) ? active : null;
-	const focusedIndex = effectiveActive ? activeIndex : -1;
+	const focusedIndex = active ? data.indexOf(active) : -1;
 
 	return {
-		active: effectiveActive,
+		active,
 		setActive,
 		visibleData,
 		legendItems,
 		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
-		onLegendAction,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	};
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -29,6 +29,7 @@
 		box-sizing: border-box;
 		min-height: 0;
 		overflow: hidden;
-		padding: 0 12px 12px 12px;
+		padding-left: 12px;
+		padding-bottom: 12px;
 	}
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'lib/visualization/charts/utils';
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/constants';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSlider/ConfigSlider.module.scss

@@ -0,0 +1,23 @@
+.row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.slider {
+	flex: 1;
+	min-width: 0;
+	// The design-system slider insets its track by half a thumb on each side so the
+	// fill follows the thumb's centre. Pull that inset back off the row so the track
+	// lines up with the other controls; the thumb never paints past the track edge.
+	margin-inline: calc(var(--slider-thumb-width, 18px) / -2);
+}
+
+.value {
+	flex-shrink: 0;
+	min-width: 36px;
+	text-align: right;
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+	color: var(--l3-foreground);
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSlider/ConfigSlider.tsx

@@ -0,0 +1,47 @@
+import { Slider } from '@signozhq/ui/slider';
+
+import styles from './ConfigSlider.module.scss';
+
+interface ConfigSliderProps {
+	testId: string;
+	value: number;
+	min: number;
+	max: number;
+	step: number;
+	/** Renders the current value beside the track (e.g. as a percentage). */
+	formatValue?: (value: number) => string;
+	onChange: (value: number) => void;
+}
+
+/**
+ * Numeric slider for the config sections. The design-system Slider is multi-thumb
+ * capable, so its callback hands back `number | number[]`; this narrows to one thumb.
+ */
+function ConfigSlider({
+	testId,
+	value,
+	min,
+	max,
+	step,
+	formatValue,
+	onChange,
+}: ConfigSliderProps): JSX.Element {
+	return (
+		<div className={styles.row}>
+			<Slider
+				testId={testId}
+				className={styles.slider}
+				value={value}
+				min={min}
+				max={max}
+				step={step}
+				onChange={(next): void => onChange(Array.isArray(next) ? next[0] : next)}
+			/>
+			<span className={styles.value}>
+				{formatValue ? formatValue(value) : value}
+			</span>
+		</div>
+	);
+}
+
+export default ConfigSlider;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionRegistry.tsx

@@ -2,16 +2,16 @@ import type { ComponentType } from 'react';
 import type {
 	DashboardtypesLinkDTO,
 	DashboardtypesAxesDTO,
-	DashboardtypesBarChartVisualizationDTO,
 	DashboardtypesHistogramBucketsDTO,
 	DashboardtypesLegendDTO,
 	DashboardtypesPanelSpecDTO,
-	DashboardtypesTimeSeriesChartAppearanceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	SectionKind,
 	type AnyThreshold,
+	type PanelChartAppearanceSlice,
 	type PanelFormattingSlice,
+	type PanelVisualizationSlice,
 	type SectionEditorProps,
 	type SectionSpecMap,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
@@ -94,21 +94,15 @@ export const SECTION_REGISTRY: {
 	},
 	[SectionKind.ChartAppearance]: {
 		Component: ChartAppearanceSection,
-		get: (spec): DashboardtypesTimeSeriesChartAppearanceDTO | undefined =>
-			getPluginSlice<DashboardtypesTimeSeriesChartAppearanceDTO>(
-				spec,
-				'chartAppearance',
-			),
+		get: (spec): PanelChartAppearanceSlice | undefined =>
+			getPluginSlice<PanelChartAppearanceSlice>(spec, 'chartAppearance'),
 		update: (spec, chartAppearance): PanelSpec =>
 			updatePluginSlice(spec, 'chartAppearance', chartAppearance),
 	},
 	[SectionKind.Visualization]: {
 		Component: VisualizationSection,
-		get: (spec): DashboardtypesBarChartVisualizationDTO | undefined =>
-			getPluginSlice<DashboardtypesBarChartVisualizationDTO>(
-				spec,
-				'visualization',
-			),
+		get: (spec): PanelVisualizationSlice | undefined =>
+			getPluginSlice<PanelVisualizationSlice>(spec, 'visualization'),
 		update: (spec, visualization): PanelSpec =>
 			updatePluginSlice(spec, 'visualization', visualization),
 	},

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -9,8 +9,11 @@ import type {
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 
+import { resolveFillOpacity } from 'lib/uPlotV2/utils/fillOpacity';
+
 import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
+import ConfigSlider from '../../controls/ConfigSlider/ConfigSlider';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
 import { SegmentIcon } from '../../controls/segmentIcons';
 import type { SectionEditorContext } from '../../sectionContext';
@@ -72,10 +75,21 @@ const FILL_MODE_OPTIONS = [
 	},
 ];
 
+// An always-filled kind's wire enum (`AreaFillMode`) has no `none`.
+const FILLED_FILL_MODE_OPTIONS = FILL_MODE_OPTIONS.filter(
+	(option) => option.value !== DashboardtypesFillModeDTO.none,
+);
+
+const FILL_OPACITY_STEP = 0.01;
+
+function formatOpacity(opacity: number): string {
+	return `${Math.round(opacity * 100)}%`;
+}
+
 /**
  * Edits the `chartAppearance` slice of a TimeSeries panel spec: line style /
- * interpolation, fill mode, point markers, and the connect-null-gaps threshold. Each
- * control is gated by its `controls` flag.
+ * interpolation, fill mode, fill opacity, point markers, and the connect-null-gaps
+ * threshold. Each control is gated by its `controls` flag.
  */
 function ChartAppearanceSection({
 	value,
@@ -124,7 +138,9 @@ function ChartAppearanceSection({
 					<ConfigSegmented
 						testId="panel-editor-v2-fill-mode"
 						value={value?.fillMode}
-						items={FILL_MODE_OPTIONS}
+						items={
+							controls.fillOpacity ? FILLED_FILL_MODE_OPTIONS : FILL_MODE_OPTIONS
+						}
 						onChange={(next): void =>
 							onChange({ ...value, fillMode: next as DashboardtypesFillModeDTO })
 						}
@@ -132,6 +148,22 @@ function ChartAppearanceSection({
 				</div>
 			)}
 
+			{controls.fillOpacity && (
+				<div className={styles.field}>
+					<Typography.Text>Fill opacity</Typography.Text>
+					<ConfigSlider
+						testId="panel-editor-v2-fill-opacity"
+						// The chart's own default, so the thumb starts where an unset fill renders.
+						value={resolveFillOpacity(value?.fillOpacity)}
+						min={0}
+						max={1}
+						step={FILL_OPACITY_STEP}
+						formatValue={formatOpacity}
+						onChange={(fillOpacity): void => onChange({ ...value, fillOpacity })}
+					/>
+				</div>
+			)}
+
 			{controls.showPoints && (
 				<ConfigSwitch
 					testId="panel-editor-v2-show-points"

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/__tests__/ChartAppearanceSection.test.tsx

@@ -5,6 +5,7 @@ import {
 	DashboardtypesLineStyleDTO,
 	type DashboardtypesTimeSeriesChartAppearanceDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { DEFAULT_FILL_OPACITY } from 'lib/uPlotV2/utils/fillOpacity';
 
 import ChartAppearanceSection from '../ChartAppearanceSection';
 
@@ -104,6 +105,66 @@ describe('ChartAppearanceSection', () => {
 		});
 	});
 
+	it('shows the fill opacity at the chart default when the spec omits it', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ fillOpacity: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-fill-opacity'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(`${Math.round(DEFAULT_FILL_OPACITY * 100)}%`),
+		).toBeInTheDocument();
+	});
+
+	it('renders the stored fill opacity as a percentage', () => {
+		render(
+			<ChartAppearanceSection
+				value={{ fillOpacity: 0.25 }}
+				controls={{ fillOpacity: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('25%')).toBeInTheDocument();
+	});
+
+	it('offers no None fill mode to a kind that declares fill opacity', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ fillMode: true, fillOpacity: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('Solid')).toBeInTheDocument();
+		expect(screen.getByText('Gradient')).toBeInTheDocument();
+		expect(screen.queryByText('None')).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-fill-opacity'),
+		).toBeInTheDocument();
+	});
+
+	it('offers all three fill modes to a kind that can be unfilled', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ fillMode: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('None')).toBeInTheDocument();
+		expect(screen.getByText('Solid')).toBeInTheDocument();
+		expect(screen.getByText('Gradient')).toBeInTheDocument();
+	});
+
 	it('writes the chosen line interpolation through the dropdown', async () => {
 		const onChange = jest.fn();
 		render(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx

@@ -1,14 +1,17 @@
 import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesStackModeDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 import { EQueryType } from 'types/common/dashboard';
 
+import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
 import PanelTypeSwitcher from '../../PanelTypeSwitcher/PanelTypeSwitcher';
 import type { SectionEditorContext } from '../../sectionContext';
+import { STACK_MODE_OPTIONS } from './stackModeOptions';
 import { TIME_PREFERENCE_OPTIONS } from './timePreferenceOptions';
 
 import styles from './VisualizationSection.module.scss';
@@ -21,9 +24,10 @@ type VisualizationSectionProps = SectionEditorProps<SectionKind.Visualization> &
 
 /**
  * Edits the `visualization` slice: the panel-type switcher (`switchPanelKind`, every
- * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only), and
- * gap filling (`fillSpans`, TimeSeries only). Each control is gated by its `controls`
- * flag, so a kind only renders — and only writes — the fields its spec supports.
+ * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only),
+ * area stacking (`stack`, Area only) and gap filling (`fillSpans`). Each control is
+ * gated by its `controls` flag, so a kind only renders — and only writes — the fields
+ * its spec supports.
  */
 function VisualizationSection({
 	value,
@@ -77,6 +81,20 @@ function VisualizationSection({
 				/>
 			)}
 
+			{controls.stackMode && (
+				<div className={styles.field}>
+					<Typography.Text>Stack series</Typography.Text>
+					<ConfigSegmented
+						testId="panel-editor-v2-stack-mode"
+						value={value?.stack}
+						items={STACK_MODE_OPTIONS}
+						onChange={(next): void =>
+							onChange({ ...value, stack: next as DashboardtypesStackModeDTO })
+						}
+					/>
+				</div>
+			)}
+
 			{controls.fillSpans && (
 				<ConfigSwitch
 					testId="panel-editor-v2-fill-spans"

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/__tests__/VisualizationSection.test.tsx

@@ -1,6 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesStackModeDTO,
+	DashboardtypesTimePreferenceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import VisualizationSection from '../VisualizationSection';
 
@@ -115,6 +118,43 @@ describe('VisualizationSection', () => {
 		});
 	});
 
+	it('writes the chosen stack mode through the segmented control', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<VisualizationSection
+				value={{ fillSpans: true }}
+				controls={{ switchPanelKind: true, stackMode: true }}
+				onChange={onChange}
+			/>,
+		);
+
+		expect(screen.getByTestId('panel-editor-v2-stack-mode')).toBeInTheDocument();
+		await user.click(screen.getByText('Percent'));
+
+		expect(onChange).toHaveBeenCalledWith({
+			fillSpans: true,
+			stack: DashboardtypesStackModeDTO.percent,
+		});
+	});
+
+	it('renders no stack-mode control for a kind that declares bar stacking', () => {
+		render(
+			<VisualizationSection
+				value={undefined}
+				controls={{ switchPanelKind: true, stacking: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-stacked-bar-chart'),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('panel-editor-v2-stack-mode'),
+		).not.toBeInTheDocument();
+	});
+
 	it('toggles fill spans through onChange', () => {
 		const onChange = jest.fn();
 		render(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/stackModeOptions.ts

@@ -0,0 +1,10 @@
+import { DashboardtypesStackModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { ConfigSegmentedItem } from '../../controls/ConfigSegmented/ConfigSegmented';
+
+// `percent` rescales each x-slice to its column total; the y axis follows.
+export const STACK_MODE_OPTIONS: ConfigSegmentedItem[] = [
+	{ value: DashboardtypesStackModeDTO.none, label: 'None' },
+	{ value: DashboardtypesStackModeDTO.normal, label: 'Normal' },
+	{ value: DashboardtypesStackModeDTO.percent, label: 'Percent' },
+];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/__tests__/capabilities.test.ts

@@ -29,6 +29,7 @@ const { time_series, scalar, raw } = Querybuildertypesv5RequestTypeDTO;
 const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 	'signoz/TimeSeriesPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/BarChartPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
+	'signoz/AreaChartPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/NumberPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/HistogramPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/PieChartPanel': [QUERY_BUILDER, CLICKHOUSE],
@@ -41,6 +42,7 @@ const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 const EXPECTED_SIGNALS: Record<PanelKind, TelemetrytypesSignalDTO[]> = {
 	'signoz/TimeSeriesPanel': [metrics, logs, traces],
 	'signoz/BarChartPanel': [metrics, logs, traces],
+	'signoz/AreaChartPanel': [metrics, logs, traces],
 	'signoz/NumberPanel': [metrics, logs, traces],
 	'signoz/HistogramPanel': [metrics, logs, traces],
 	'signoz/PieChartPanel': [metrics, logs, traces],
@@ -72,6 +74,13 @@ const EXPECTED_QUERY_CAPABILITIES: Partial<
 		orderTiebreaker: false,
 		serverPaginated: false,
 	},
+	'signoz/AreaChartPanel': {
+		requestType: time_series,
+		formatTableResultForUI: false,
+		bucketedStepInterval: false,
+		orderTiebreaker: false,
+		serverPaginated: false,
+	},
 	'signoz/HistogramPanel': {
 		requestType: time_series,
 		formatTableResultForUI: false,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/Renderer.tsx

@@ -0,0 +1,233 @@
+import { useCallback, useMemo, useRef } from 'react';
+import type { DashboardtypesAreaChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import TimeSeries from 'lib/visualization/charts/TimeSeries/TimeSeries';
+import ChartManager from 'lib/visualization/components/ChartManager/ChartManager';
+import TooltipFooter from 'lib/visualization/panels/components/TooltipFooter';
+import { PanelMode } from 'lib/visualization/panels/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
+import {
+	flattenTimeSeries,
+	getExecStats,
+	getTimeSeriesResults,
+} from 'pages/DashboardPage/DashboardContainer/queryV5/v5ResponseData';
+import { prepareAlignedData } from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
+import { useTimezone } from 'providers/Timezone';
+
+import NoData from '../../components/NoData/NoData';
+import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import {
+	resolveDecimalPrecision,
+	resolveLegendPosition,
+	resolveStackMode,
+} from '../../utils/chartAppearance/resolvers';
+import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
+import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
+import { sortSeriesByMeanDesc } from '../../utils/sortSeriesByMean';
+
+import { buildAreaChartConfig } from './utils/buildConfig';
+import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+function AreaChartPanelRenderer({
+	panelId,
+	panel,
+	data,
+	isFetching,
+	refetch,
+	onClick,
+	onDragSelect,
+	dashboardPreference,
+	panelMode,
+	onCloseStandaloneView,
+	enableDrillDown,
+}: PanelRendererProps<'signoz/AreaChartPanel'>): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	const spec = useMemo<DashboardtypesAreaChartPanelSpecDTO>(
+		() => panel.spec.plugin.spec,
+		[panel.spec.plugin.spec],
+	);
+
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries),
+		[panel.spec.queries],
+	);
+
+	// X-scale clamps come from the request that produced the data, so each panel
+	// pins to the window it fetched — matters during drag-zoom transitions before
+	// new data arrives.
+	const { minTimeScale, maxTimeScale } = useMemo(() => {
+		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
+		return { minTimeScale: startTime, maxTimeScale: endTime };
+	}, [data.requestPayload]);
+
+	const groupByPerQuery = useGroupByPerQuery(builderQueries);
+
+	const flatSeries = useMemo(
+		() =>
+			sortSeriesByMeanDesc(
+				flattenTimeSeries(
+					getTimeSeriesResults(data.response),
+					data.legendMap ?? {},
+				),
+			),
+		[data.response, data.legendMap],
+	);
+
+	const config = useMemo(
+		() =>
+			buildAreaChartConfig({
+				panelId,
+				spec,
+				builderQueries,
+				series: flatSeries,
+				stepIntervals: getExecStats(data.response)?.stepIntervals,
+				isDarkMode,
+				timezone,
+				panelMode,
+				minTimeScale,
+				maxTimeScale,
+				onDragSelect,
+			}),
+		[
+			panelId,
+			spec,
+			builderQueries,
+			flatSeries,
+			data.response,
+			isDarkMode,
+			timezone,
+			panelMode,
+			minTimeScale,
+			maxTimeScale,
+			onDragSelect,
+			// TooltipPlugin mutates `config` for cursor sync; rebuild on syncMode change
+			// so a fresh instance doesn't inherit stale sync settings (e.g. "No Sync").
+			dashboardPreference?.syncMode,
+		],
+	);
+
+	const chartData = useMemo(() => prepareAlignedData(flatSeries), [flatSeries]);
+
+	const decimalPrecision = useMemo(
+		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
+		[spec.formatting?.decimalPrecision],
+	);
+
+	const legendPosition = useMemo(() => {
+		return resolveLegendPosition(spec.legend?.position);
+	}, [spec.legend?.position]);
+
+	// The standalone View modal shows V1's graph-manager legend below the chart:
+	// Filter Series + per-series show/hide + Save. Series visibility auto-persists to
+	// localStorage (STANDALONE_VIEW selection prefs), keyed by panelId.
+	const layoutChildren = useMemo(
+		() =>
+			panelMode === PanelMode.STANDALONE_VIEW ? (
+				<div className={PanelStyles.chartManagerContainer}>
+					<ChartManager
+						config={config}
+						alignedData={chartData}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						onCancel={onCloseStandaloneView}
+					/>
+				</div>
+			) : null,
+		[
+			panelMode,
+			config,
+			chartData,
+			spec.formatting?.unit,
+			decimalPrecision,
+			onCloseStandaloneView,
+		],
+	);
+
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
+			<TooltipFooter
+				id={panelId}
+				isPinned={isPinned}
+				canDrilldown={!!enableDrillDown}
+				dismiss={dismiss}
+			/>
+		),
+		[panelId, enableDrillDown],
+	);
+
+	// Keying on sync prefs forces a full chart teardown/re-mount so stale sync
+	// settings aren't inherited — the only way to fully reset the uPlot instance.
+	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
+
+	const handleChartClick = useCallback(
+		(args: ChartClickData): void => {
+			if (!onClick) {
+				return;
+			}
+			const payload = enrichChartClick({
+				clickData: args,
+				series: flatSeries,
+				builderQueries,
+			});
+			if (!payload) {
+				return;
+			}
+			const timeRange = stepClickTimeRange({
+				clickedDataTimestamp: args.clickedDataTimestamp,
+				queryName: payload.context.queryName,
+				builderQueries,
+				stepInterval: getExecStats(data.response)?.stepIntervals?.[
+					payload.context.queryName
+				],
+			});
+			onClick({ ...payload, context: { ...payload.context, timeRange } });
+		},
+		[onClick, flatSeries, builderQueries, data.response],
+	);
+
+	return (
+		<div
+			ref={graphRef}
+			data-testid="area-chart-renderer"
+			className={PanelStyles.panelContainer}
+		>
+			{flatSeries.length === 0 && (
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
+			)}
+			{flatSeries.length > 0 &&
+				containerDimensions.width > 0 &&
+				containerDimensions.height > 0 && (
+					<TimeSeries
+						key={key}
+						config={config}
+						data={chartData}
+						legendConfig={{ position: legendPosition }}
+						layoutChildren={layoutChildren}
+						groupByPerQuery={groupByPerQuery}
+						canPinTooltip
+						timezone={timezone}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						width={containerDimensions.width}
+						height={containerDimensions.height}
+						syncMode={dashboardPreference?.syncMode}
+						syncFilterMode={dashboardPreference?.syncFilterMode}
+						stack={resolveStackMode(spec.visualization?.stack)}
+						renderTooltipFooter={renderTooltipFooter}
+						onClick={enableDrillDown ? handleChartClick : undefined}
+					/>
+				)}
+		</div>
+	);
+}
+
+export default AreaChartPanelRenderer;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/definition.ts

@@ -0,0 +1,48 @@
+import { ChartArea } from '@signozhq/icons';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
+import Renderer from './Renderer';
+import { sections } from './sections';
+import {
+	Querybuildertypesv5RequestTypeDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+export const definition: PanelDefinition<'signoz/AreaChartPanel'> = {
+	kind: 'signoz/AreaChartPanel',
+	displayName: 'Area Chart',
+	mode: 'query',
+	icon: ChartArea,
+	Renderer,
+	EditorPane: QueryBuilderEditorPane,
+	sections,
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
+	supportedQueryTypes: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	queryBuilderFields: {},
+	queryCapabilities: {
+		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
+		formatTableResultForUI: false,
+		bucketedStepInterval: false,
+		orderTiebreaker: false,
+		serverPaginated: false,
+	},
+	actions: {
+		view: true,
+		edit: true,
+		clone: true,
+		download: { csv: false, png: true, svg: true },
+		createAlert: true,
+		search: false,
+		drilldown: true,
+	},
+};

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/sections.ts

@@ -0,0 +1,42 @@
+import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
+import {
+	SectionKind,
+	ThresholdVariant,
+	type SectionConfig,
+} from '../../types/sections';
+
+// Declaring `fillOpacity` also makes the kind always-filled: `fillMode` drops `none`
+// and defaults to solid.
+export const sections: SectionConfig[] = [
+	{
+		kind: SectionKind.Visualization,
+		controls: {
+			switchPanelKind: true,
+			timePreference: true,
+			stackMode: true,
+			fillSpans: true,
+		},
+	},
+	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
+	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
+	{
+		kind: SectionKind.Legend,
+		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
+	},
+	{
+		kind: SectionKind.ChartAppearance,
+		controls: {
+			lineStyle: true,
+			lineInterpolation: true,
+			fillMode: true,
+			fillOpacity: true,
+			showPoints: true,
+			spanGaps: true,
+		},
+	},
+	{
+		kind: SectionKind.Thresholds,
+		controls: { variant: ThresholdVariant.LABEL },
+	},
+	{ kind: SectionKind.ContextLinks },
+];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/utils/buildConfig.ts

@@ -0,0 +1,160 @@
+import type { DashboardtypesAreaChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	buildBaseConfig,
+	minStepInterval,
+	type TimeAxisChromeArgs,
+} from 'pages/DashboardPage/DashboardContainer/Panels/utils/baseConfigBuilder';
+import {
+	LINE_INTERPOLATION_MAP,
+	LINE_STYLE_MAP,
+} from 'pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/enumMaps';
+import {
+	resolveAreaFillMode,
+	resolveSpanGaps,
+} from 'pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/resolvers';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
+import type { PanelSeries } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
+import {
+	hasSingleVisiblePoint,
+	toClickPluginPayload,
+} from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
+import getLabelName from 'lib/getLabelName';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+const DEFAULT_POINT_SIZE = 5;
+
+export interface BuildAreaChartConfigArgs extends TimeAxisChromeArgs {
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+	/** Flat list of builder queries (see `getBuilderQueries`); powers per-query legend resolution. */
+	builderQueries: BuilderQuery[];
+	/** Flattened V5 series (see `flattenTimeSeries`). */
+	series: PanelSeries[];
+}
+
+/**
+ * Builds a `UPlotConfigBuilder` for an Area panel: shared scaffolding plus one filled
+ * series per result. Stacking is declared on the chart component instead, which hands
+ * it to the builder.
+ */
+export function buildAreaChartConfig({
+	panelId,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+	timezone,
+	panelMode,
+	onDragSelect,
+	onClick,
+	minTimeScale,
+	maxTimeScale,
+}: BuildAreaChartConfigArgs): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		panelId,
+		isTimeAxis: true,
+		isDarkMode,
+		timezone,
+		panelMode,
+		isLogScale: spec.axes?.isLogScale,
+		softMin: spec.axes?.softMin ?? undefined,
+		softMax: spec.axes?.softMax ?? undefined,
+		formatting: spec.formatting,
+		thresholds: spec.thresholds,
+		stepIntervals,
+		clickPayload: toClickPluginPayload(series),
+		minTimeScale,
+		maxTimeScale,
+		onDragSelect,
+		onClick,
+	});
+
+	addSeries({
+		builder,
+		spec,
+		builderQueries,
+		series,
+		stepIntervals,
+		isDarkMode,
+	});
+
+	return builder;
+}
+
+interface AddSeriesArgs {
+	builder: UPlotConfigBuilder;
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+	builderQueries: BuilderQuery[];
+	series: PanelSeries[];
+	/** Per-query step intervals (seconds); floor for a numeric spanGaps threshold. */
+	stepIntervals?: Record<string, number>;
+	isDarkMode: boolean;
+}
+
+/**
+ * Adds one filled uPlot series per flattened V5 series; mutates the builder in place.
+ * Order must match `prepareAlignedData` — both iterate the same flat list.
+ */
+function addSeries({
+	builder,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+}: AddSeriesArgs): void {
+	const chartAppearance = spec.chartAppearance;
+	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
+	// a defined record (it dereferences keys without a guard).
+	const colorMapping = spec.legend?.customColors ?? {};
+	const resolvedSpanGaps = chartAppearance?.spanGaps
+		? resolveSpanGaps(chartAppearance.spanGaps)
+		: true;
+	// A numeric spanGaps is a max-gap threshold (seconds); floor it at the step interval so a
+	// sub-step value doesn't break the line at every normal point. Boolean `true` passes through.
+	const minStep = stepIntervals ? minStepInterval(stepIntervals) : undefined;
+	const spanGaps =
+		typeof resolvedSpanGaps === 'number' && minStep !== undefined
+			? Math.max(minStep, resolvedSpanGaps)
+			: resolvedSpanGaps;
+
+	const lineStyle = chartAppearance?.lineStyle
+		? LINE_STYLE_MAP[chartAppearance.lineStyle]
+		: LineStyle.Solid;
+	const lineInterpolation = chartAppearance?.lineInterpolation
+		? LINE_INTERPOLATION_MAP[chartAppearance.lineInterpolation]
+		: LineInterpolation.Spline;
+	const fillMode = resolveAreaFillMode(chartAppearance?.fillMode);
+	// Null and undefined both mean "kind default", which the chart layer resolves.
+	const fillOpacity = chartAppearance?.fillOpacity ?? undefined;
+
+	series.forEach((s) => {
+		const hasSingleValidPoint = hasSingleVisiblePoint(s.values);
+		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
+		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			// A single visible point can't be drawn as a line — degrade to points
+			// so the user still sees the datum (matches V1 behavior).
+			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			label,
+			colorMapping,
+			spanGaps,
+			lineStyle,
+			lineInterpolation,
+			showPoints: chartAppearance?.showPoints || hasSingleValidPoint,
+			pointSize: DEFAULT_POINT_SIZE,
+			fillMode,
+			fillOpacity,
+			isDarkMode,
+			metric: s.labels,
+		});
+	});
+}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/registry.ts

@@ -1,3 +1,4 @@
+import { definition as AreaChart } from './kinds/AreaChartPanel/definition';
 import { definition as BarChart } from './kinds/BarChartPanel/definition';
 import { definition as Histogram } from './kinds/HistogramPanel/definition';
 import { definition as NumberValue } from './kinds/NumberPanel/definition';
@@ -21,6 +22,7 @@ export const PANELS: PanelRegistry = {
 	[NumberValue.kind]: NumberValue,
 	[Table.kind]: Table,
 	[BarChart.kind]: BarChart,
+	[AreaChart.kind]: AreaChart,
 	[PieChart.kind]: PieChart,
 	[Histogram.kind]: Histogram,
 	[List.kind]: List,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/interactions.ts

@@ -28,6 +28,11 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
 		onDragSelect?: DragSelect;
 		onCloseStandaloneView?: CloseStandaloneView;
 	};
+	'signoz/AreaChartPanel': {
+		onClick?: (event: DrilldownClickPayload) => void;
+		onDragSelect?: DragSelect;
+		onCloseStandaloneView?: CloseStandaloneView;
+	};
 	'signoz/TablePanel': { onClick?: (event: DrilldownClickPayload) => void };
 	'signoz/PieChartPanel': { onClick?: (event: DrilldownClickPayload) => void };
 	'signoz/NumberPanel': { onClick?: (event: DrilldownClickPayload) => void };

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/panelKind.ts

@@ -18,6 +18,7 @@ export type PanelKind = `${DashboardtypesPanelPluginKindDTO}`;
 export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
 	'signoz/TimeSeriesPanel': PANEL_TYPES.TIME_SERIES,
 	'signoz/BarChartPanel': PANEL_TYPES.BAR,
+	'signoz/AreaChartPanel': PANEL_TYPES.AREA,
 	'signoz/NumberPanel': PANEL_TYPES.VALUE,
 	'signoz/PieChartPanel': PANEL_TYPES.PIE,
 	'signoz/TablePanel': PANEL_TYPES.TABLE,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/sections.ts

@@ -1,5 +1,7 @@
 import type {
 	DashboardtypesLinkDTO,
+	DashboardtypesAreaChartAppearanceDTO,
+	DashboardtypesAreaChartVisualizationDTO,
 	DashboardtypesAxesDTO,
 	DashboardtypesBarChartVisualizationDTO,
 	DashboardtypesComparisonThresholdDTO,
@@ -87,15 +89,27 @@ export type AnyThreshold =
 export type PanelFormattingSlice = DashboardtypesPanelFormattingDTO &
 	Pick<DashboardtypesTableFormattingDTO, 'columnUnits'>;
 
+// Superset spanning every kind's chart-appearance DTO. Area's `fillMode` is a
+// nominally distinct enum with the same members as TimeSeries', so the TimeSeries one
+// types the shared control.
+export type PanelChartAppearanceSlice =
+	DashboardtypesTimeSeriesChartAppearanceDTO &
+		Pick<DashboardtypesAreaChartAppearanceDTO, 'fillOpacity'>;
+
+// Superset spanning every kind's visualization DTO. Bar and Area express stacking
+// differently (`stackedBarChart` bool vs `stack` enum); a kind declares exactly one.
+export type PanelVisualizationSlice = DashboardtypesBarChartVisualizationDTO &
+	Pick<DashboardtypesAreaChartVisualizationDTO, 'stack'>;
+
 export interface SectionSpecMap {
 	[SectionKind.Formatting]: PanelFormattingSlice; // spec.plugin.spec.formatting
 	[SectionKind.Axes]: DashboardtypesAxesDTO; // spec.plugin.spec.axes
 	[SectionKind.Legend]: DashboardtypesLegendDTO; // spec.plugin.spec.legend
-	[SectionKind.ChartAppearance]: DashboardtypesTimeSeriesChartAppearanceDTO; // spec.plugin.spec.chartAppearance
+	[SectionKind.ChartAppearance]: PanelChartAppearanceSlice; // spec.plugin.spec.chartAppearance
 	[SectionKind.Buckets]: DashboardtypesHistogramBucketsDTO; // spec.plugin.spec.histogramBuckets
-	// spec.plugin.spec.visualization — typed as the Bar shape (widest superset);
+	// spec.plugin.spec.visualization — typed as the superset of every kind's shape;
 	// the `controls` bag gates which fields each kind writes.
-	[SectionKind.Visualization]: DashboardtypesBarChartVisualizationDTO;
+	[SectionKind.Visualization]: PanelVisualizationSlice;
 	[SectionKind.Thresholds]: AnyThreshold[]; // spec.plugin.spec.thresholds (variant picks the editor)
 	[SectionKind.ContextLinks]: DashboardtypesLinkDTO[]; // spec.links (PANEL-level)
 	[SectionKind.Columns]: TelemetrytypesTelemetryFieldKeyDTO[]; // spec.plugin.spec.selectFields (List)
@@ -124,6 +138,11 @@ export interface SectionControls {
 		lineStyle?: boolean;
 		lineInterpolation?: boolean;
 		fillMode?: boolean;
+		/**
+		 * Declaring it also marks the kind always-filled: `fillMode` drops `none` to match
+		 * the narrower `AreaFillMode` wire enum the save API validates against.
+		 */
+		fillOpacity?: boolean;
 		showPoints?: boolean;
 		spanGaps?: boolean;
 	};
@@ -133,12 +152,13 @@ export interface SectionControls {
 		mergeQueries?: boolean;
 	};
 	// switchPanelKind → the visualization-type switcher (every kind, so you can switch
-	// away from any panel); stacking → stackedBarChart (Bar); fillSpans → fill gaps with
-	// 0 (TimeSeries).
+	// away from any panel); stacking → stackedBarChart (Bar); stackMode → stack
+	// (Area); fillSpans → fill gaps with 0 (TimeSeries / Area).
 	[SectionKind.Visualization]: {
 		switchPanelKind: boolean;
 		timePreference?: boolean;
 		stacking?: boolean;
+		stackMode?: boolean;
 		fillSpans?: boolean;
 	};
 	// Editor discriminator (not a spec field): which threshold variant a kind edits.

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/__tests__/buildPluginSpec.test.ts

@@ -5,12 +5,14 @@ import {
 	DashboardtypesLineInterpolationDTO,
 	DashboardtypesLineStyleDTO,
 	type DashboardtypesPanelSpecDTO,
+	DashboardtypesStackModeDTO,
 	DashboardtypesThresholdFormatDTO,
 	DashboardtypesTimePreferenceDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 import { defaultColumnsForSignal } from '../../../PanelEditor/ListColumnsEditor/selectFields';
+import { sections as areaSections } from '../../kinds/AreaChartPanel/sections';
 import { sections as listSections } from '../../kinds/ListPanel/sections';
 import { sections as timeSeriesSections } from '../../kinds/TimeSeriesPanel/sections';
 import {
@@ -178,6 +180,89 @@ describe('buildPluginSpec', () => {
 			});
 		});
 
+		it('translates Bar stacking into an Area stack mode', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Visualization,
+					controls: { switchPanelKind: true, stackMode: true },
+				},
+			];
+			const oldSpec = oldSpecWith({ visualization: { stackedBarChart: true } });
+
+			expect(buildPluginSpec(sections, { oldSpec }).visualization).toStrictEqual({
+				stack: DashboardtypesStackModeDTO.normal,
+			});
+		});
+
+		it('translates an Area stack mode into Bar stacking, collapsing percent', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Visualization,
+					controls: { switchPanelKind: true, stacking: true },
+				},
+			];
+
+			const fromPercent = oldSpecWith({
+				visualization: { stack: DashboardtypesStackModeDTO.percent },
+			});
+			expect(
+				buildPluginSpec(sections, { oldSpec: fromPercent }).visualization,
+			).toStrictEqual({ stackedBarChart: true });
+
+			const fromNone = oldSpecWith({
+				visualization: { stack: DashboardtypesStackModeDTO.none },
+			});
+			expect(
+				buildPluginSpec(sections, { oldSpec: fromNone }).visualization,
+			).toStrictEqual({ stackedBarChart: false });
+		});
+
+		it('defaults a stack-mode kind to normal when there is nothing to carry', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Visualization,
+					controls: { switchPanelKind: true, stackMode: true },
+				},
+			];
+
+			expect(buildPluginSpec(sections).visualization).toStrictEqual({
+				stack: DashboardtypesStackModeDTO.normal,
+			});
+			expect(
+				buildPluginSpec(sections, { oldSpec: oldSpecWith({}) }).visualization,
+			).toStrictEqual({ stack: DashboardtypesStackModeDTO.normal });
+		});
+
+		it('carries an Area stack mode unchanged between Area panels', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.Visualization,
+					controls: { switchPanelKind: true, stackMode: true },
+				},
+			];
+			const oldSpec = oldSpecWith({
+				visualization: { stack: DashboardtypesStackModeDTO.percent },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).visualization).toStrictEqual({
+				stack: DashboardtypesStackModeDTO.percent,
+			});
+		});
+
+		it('seeds no stacking field when the target declares neither control', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.Visualization, controls: { switchPanelKind: true } },
+			];
+			const oldSpec = oldSpecWith({
+				visualization: {
+					stackedBarChart: true,
+					stack: DashboardtypesStackModeDTO.percent,
+				},
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec })).toStrictEqual({});
+		});
+
 		it('carries old legend position but never customColors', () => {
 			const sections: SectionConfig[] = [
 				{
@@ -264,6 +349,99 @@ describe('buildPluginSpec', () => {
 			expect(buildPluginSpec(sections)).toStrictEqual({});
 		});
 
+		it('defaults fillMode to solid for a kind that offers fill opacity', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.ChartAppearance,
+					controls: { fillMode: true, fillOpacity: true },
+				},
+			];
+			expect(buildPluginSpec(sections).chartAppearance).toStrictEqual({
+				fillMode: DashboardtypesFillModeDTO.solid,
+			});
+		});
+
+		// `none` is absent from the AreaFillMode wire enum, so carrying it would fail the save.
+		it('coerces an unfilled source fillMode to solid for a filled kind', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.ChartAppearance,
+					controls: { fillMode: true, fillOpacity: true },
+				},
+			];
+			const oldSpec = oldSpecWith({
+				chartAppearance: { fillMode: DashboardtypesFillModeDTO.none },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).chartAppearance).toStrictEqual(
+				{
+					fillMode: DashboardtypesFillModeDTO.solid,
+				},
+			);
+		});
+
+		it('carries a filled source fillMode unchanged', () => {
+			const sections: SectionConfig[] = [
+				{
+					kind: SectionKind.ChartAppearance,
+					controls: { fillMode: true, fillOpacity: true },
+				},
+			];
+			const oldSpec = oldSpecWith({
+				chartAppearance: { fillMode: DashboardtypesFillModeDTO.gradient },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).chartAppearance).toStrictEqual(
+				{
+					fillMode: DashboardtypesFillModeDTO.gradient,
+				},
+			);
+		});
+
+		// TimeSeries keeps all three modes, so an Area -> TimeSeries switch needs no coercion.
+		it('leaves fillMode alone for a kind that can be unfilled', () => {
+			const sections: SectionConfig[] = [
+				{ kind: SectionKind.ChartAppearance, controls: { fillMode: true } },
+			];
+			const oldSpec = oldSpecWith({
+				chartAppearance: { fillMode: DashboardtypesFillModeDTO.none },
+			});
+
+			expect(buildPluginSpec(sections, { oldSpec }).chartAppearance).toStrictEqual(
+				{
+					fillMode: DashboardtypesFillModeDTO.none,
+				},
+			);
+		});
+
+		it('carries fillOpacity only when the target declares it, including 0', () => {
+			const withOpacity: SectionConfig[] = [
+				{
+					kind: SectionKind.ChartAppearance,
+					controls: { fillMode: true, fillOpacity: true },
+				},
+			];
+			const withoutOpacity: SectionConfig[] = [
+				{ kind: SectionKind.ChartAppearance, controls: { fillMode: true } },
+			];
+			const oldSpec = oldSpecWith({
+				chartAppearance: {
+					fillMode: DashboardtypesFillModeDTO.gradient,
+					fillOpacity: 0,
+				},
+			});
+
+			expect(
+				buildPluginSpec(withOpacity, { oldSpec }).chartAppearance,
+			).toStrictEqual({
+				fillMode: DashboardtypesFillModeDTO.gradient,
+				fillOpacity: 0,
+			});
+			expect(
+				buildPluginSpec(withoutOpacity, { oldSpec }).chartAppearance,
+			).toStrictEqual({ fillMode: DashboardtypesFillModeDTO.gradient });
+		});
+
 		it('carries old values over the defaults, gated by the declared controls', () => {
 			const sections: SectionConfig[] = [
 				{
@@ -551,6 +729,21 @@ describe('buildPluginSpec', () => {
 			});
 		});
 
+		it('seeds the full Area default set, filled solid and stacked', () => {
+			expect(buildPluginSpec(areaSections)).toStrictEqual({
+				visualization: {
+					timePreference: DashboardtypesTimePreferenceDTO.global_time,
+					stack: DashboardtypesStackModeDTO.normal,
+				},
+				legend: { position: DashboardtypesLegendPositionDTO.bottom },
+				chartAppearance: {
+					lineStyle: DashboardtypesLineStyleDTO.solid,
+					lineInterpolation: DashboardtypesLineInterpolationDTO.spline,
+					fillMode: DashboardtypesFillModeDTO.solid,
+				},
+			});
+		});
+
 		it('returns an empty spec for List (only switchPanelKind, nothing to seed)', () => {
 			expect(buildPluginSpec(listSections)).toStrictEqual({});
 		});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/buildPluginSpec.ts

@@ -5,6 +5,7 @@ import {
 	DashboardtypesLineInterpolationDTO,
 	DashboardtypesLineStyleDTO,
 	type DashboardtypesPanelSpecDTO,
+	DashboardtypesStackModeDTO,
 	DashboardtypesThresholdFormatDTO,
 	DashboardtypesTextAlignDTO,
 	DashboardtypesTimePreferenceDTO,
@@ -119,6 +120,43 @@ function isEmptySlice(value: object): boolean {
 		: Object.keys(value).length === 0;
 }
 
+/**
+ * Translates stacking across a Bar↔Area switch rather than dropping it. Area's
+ * `percent` has no bar equivalent, so it collapses to stacked-on; a stack-mode kind
+ * with nothing to carry starts on `normal`.
+ */
+function seedStacking(
+	controls: SectionControls[SectionKind.Visualization],
+	old: SectionSpecMap[SectionKind.Visualization] | undefined,
+): Pick<
+	SectionSpecMap[SectionKind.Visualization],
+	'stack' | 'stackedBarChart'
+> {
+	if (controls.stacking) {
+		if (old?.stackedBarChart !== undefined) {
+			return { stackedBarChart: old.stackedBarChart };
+		}
+		if (old?.stack !== undefined) {
+			return { stackedBarChart: old.stack !== DashboardtypesStackModeDTO.none };
+		}
+		return {};
+	}
+	if (controls.stackMode) {
+		if (old?.stack !== undefined) {
+			return { stack: old.stack };
+		}
+		if (old?.stackedBarChart !== undefined) {
+			return {
+				stack: old.stackedBarChart
+					? DashboardtypesStackModeDTO.normal
+					: DashboardtypesStackModeDTO.none,
+			};
+		}
+		return { stack: DashboardtypesStackModeDTO.normal };
+	}
+	return {};
+}
+
 const SECTION_SEEDS: SectionSeeds = {
 	[SectionKind.TextLayout]: {
 		specKey: 'presentation',
@@ -158,10 +196,7 @@ const SECTION_SEEDS: SectionSeeds = {
 					timePreference:
 						old?.timePreference ?? DashboardtypesTimePreferenceDTO.global_time,
 				}),
-				...(controls.stacking &&
-					old?.stackedBarChart !== undefined && {
-						stackedBarChart: old.stackedBarChart,
-					}),
+				...seedStacking(controls, old),
 				...(controls.fillSpans &&
 					old?.fillSpans !== undefined && { fillSpans: old.fillSpans }),
 			};
@@ -204,7 +239,8 @@ const SECTION_SEEDS: SectionSeeds = {
 			const {
 				lineStyle = DashboardtypesLineStyleDTO.solid,
 				lineInterpolation = DashboardtypesLineInterpolationDTO.spline,
-				fillMode = DashboardtypesFillModeDTO.none,
+				fillMode,
+				fillOpacity,
 				showPoints,
 				spanGaps,
 			} = oldPluginSpec?.chartAppearance ?? {};
@@ -216,7 +252,16 @@ const SECTION_SEEDS: SectionSeeds = {
 				appearance.lineInterpolation = lineInterpolation;
 			}
 			if (controls.fillMode) {
-				appearance.fillMode = fillMode;
+				const carried = fillMode ?? DashboardtypesFillModeDTO.none;
+				// An always-filled kind's wire enum has no `none`, so the save API would
+				// reject it. Keyed off the capability, not the kind.
+				appearance.fillMode =
+					controls.fillOpacity && carried === DashboardtypesFillModeDTO.none
+						? DashboardtypesFillModeDTO.solid
+						: carried;
+			}
+			if (controls.fillOpacity && typeof fillOpacity === 'number') {
+				appearance.fillOpacity = fillOpacity;
 			}
 			if (controls.showPoints && showPoints !== undefined) {
 				appearance.showPoints = showPoints;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/__tests__/resolvers.test.ts

@@ -1,4 +1,14 @@
-import { resolveSpanGaps } from '../resolvers';
+import {
+	DashboardtypesAreaFillModeDTO,
+	DashboardtypesStackModeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { FillMode, StackMode } from 'lib/uPlotV2/config/types';
+
+import {
+	resolveAreaFillMode,
+	resolveSpanGaps,
+	resolveStackMode,
+} from '../resolvers';
 
 describe('resolveSpanGaps', () => {
 	it('parses a duration string into seconds when thresholding', () => {
@@ -33,3 +43,43 @@ describe('resolveSpanGaps', () => {
 		expect(resolveSpanGaps({ fillLessThan: '5m' })).toBe(300);
 	});
 });
+
+describe('resolveAreaFillMode', () => {
+	it('maps each wire value to its chart fill mode', () => {
+		expect(resolveAreaFillMode(DashboardtypesAreaFillModeDTO.solid)).toBe(
+			FillMode.Solid,
+		);
+		expect(resolveAreaFillMode(DashboardtypesAreaFillModeDTO.gradient)).toBe(
+			FillMode.Gradient,
+		);
+	});
+
+	// Includes a stale `none`, which the area wire enum no longer carries.
+	it('falls back to solid for a missing or unknown value', () => {
+		expect(resolveAreaFillMode(undefined)).toBe(FillMode.Solid);
+		expect(resolveAreaFillMode('none' as DashboardtypesAreaFillModeDTO)).toBe(
+			FillMode.Solid,
+		);
+	});
+});
+
+describe('resolveStackMode', () => {
+	it('maps each wire value to its chart stack mode', () => {
+		expect(resolveStackMode(DashboardtypesStackModeDTO.none)).toBe(
+			StackMode.None,
+		);
+		expect(resolveStackMode(DashboardtypesStackModeDTO.normal)).toBe(
+			StackMode.Normal,
+		);
+		expect(resolveStackMode(DashboardtypesStackModeDTO.percent)).toBe(
+			StackMode.Percent,
+		);
+	});
+
+	it('falls back to none for a missing or unknown value', () => {
+		expect(resolveStackMode(undefined)).toBe(StackMode.None);
+		expect(resolveStackMode('stretch' as DashboardtypesStackModeDTO)).toBe(
+			StackMode.None,
+		);
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/enumMaps.ts

@@ -1,14 +1,17 @@
 import {
+	DashboardtypesAreaFillModeDTO,
 	DashboardtypesFillModeDTO,
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesLineInterpolationDTO,
 	DashboardtypesLineStyleDTO,
+	DashboardtypesStackModeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import {
 	FillMode,
 	LineInterpolation,
 	LineStyle,
+	StackMode,
 } from 'lib/uPlotV2/config/types';
 
 /**
@@ -38,6 +41,21 @@ export const FILL_MODE_MAP: Record<DashboardtypesFillModeDTO, FillMode> = {
 	[DashboardtypesFillModeDTO.none]: FillMode.None,
 };
 
+/** Narrower than TimeSeries' — an area panel is always filled, so there is no `none`. */
+export const AREA_FILL_MODE_MAP: Record<
+	DashboardtypesAreaFillModeDTO,
+	FillMode
+> = {
+	[DashboardtypesAreaFillModeDTO.solid]: FillMode.Solid,
+	[DashboardtypesAreaFillModeDTO.gradient]: FillMode.Gradient,
+};
+
+export const STACK_MODE_MAP: Record<DashboardtypesStackModeDTO, StackMode> = {
+	[DashboardtypesStackModeDTO.none]: StackMode.None,
+	[DashboardtypesStackModeDTO.normal]: StackMode.Normal,
+	[DashboardtypesStackModeDTO.percent]: StackMode.Percent,
+};
+
 export const LEGEND_POSITION_MAP: Record<
 	DashboardtypesLegendPositionDTO,
 	LegendPosition

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/resolvers.ts

@@ -1,13 +1,20 @@
 import { rangeUtil } from '@grafana/data';
 import {
+	type DashboardtypesAreaFillModeDTO,
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesPrecisionOptionDTO,
 	type DashboardtypesSpanGapsDTO,
+	type DashboardtypesStackModeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { FillMode, StackMode } from 'lib/uPlotV2/config/types';
 
-import { LEGEND_POSITION_MAP } from './enumMaps';
+import {
+	AREA_FILL_MODE_MAP,
+	LEGEND_POSITION_MAP,
+	STACK_MODE_MAP,
+} from './enumMaps';
 
 // Resolvers turning raw `spec` chart-appearance fields into runtime chart
 // values, falling back to chart defaults for missing/unknown input.
@@ -65,3 +72,23 @@ export function resolveLegendPosition(
 	}
 	return LegendPosition.BOTTOM;
 }
+
+/** Missing/unknown falls back to `Solid`; an area panel is never a bare line. */
+export function resolveAreaFillMode(
+	fillMode: DashboardtypesAreaFillModeDTO | undefined,
+): FillMode {
+	if (fillMode && fillMode in AREA_FILL_MODE_MAP) {
+		return AREA_FILL_MODE_MAP[fillMode];
+	}
+	return FillMode.Solid;
+}
+
+/** Missing/unknown falls back to `None` — series drawn independently. */
+export function resolveStackMode(
+	stack: DashboardtypesStackModeDTO | undefined,
+): StackMode {
+	if (stack && stack in STACK_MODE_MAP) {
+		return STACK_MODE_MAP[stack];
+	}
+	return StackMode.None;
+}

frontend/src/pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters.ts

@@ -100,6 +100,7 @@ export function panelTypeToRequestType(
 	switch (panelType) {
 		case PANEL_TYPES.TIME_SERIES:
 		case PANEL_TYPES.BAR:
+		case PANEL_TYPES.AREA:
 		case PANEL_TYPES.HISTOGRAM:
 			return Querybuildertypesv5RequestTypeDTO.time_series;
 		case PANEL_TYPES.TABLE:

frontend/src/utils/explorerUtils.ts

@@ -12,6 +12,7 @@ export const panelTypeToExplorerView: Record<PANEL_TYPES, ExplorerViews> = {
 	[PANEL_TYPES.TABLE]: ExplorerViews.TABLE,
 	[PANEL_TYPES.VALUE]: ExplorerViews.TIMESERIES,
 	[PANEL_TYPES.BAR]: ExplorerViews.TIMESERIES,
+	[PANEL_TYPES.AREA]: ExplorerViews.TIMESERIES,
 	[PANEL_TYPES.PIE]: ExplorerViews.TIMESERIES,
 	[PANEL_TYPES.HISTOGRAM]: ExplorerViews.TIMESERIES,
 	// Dashboard-only visualisation; explorers never offer it.

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1467,6 +1467,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"),
@@ -61,6 +62,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)},
@@ -225,6 +227,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) },
@@ -248,6 +251,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

@@ -188,7 +188,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:
@@ -199,6 +200,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"
@@ -177,7 +178,7 @@ const (
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText}
 }
 
 func (k PanelPluginKind) rendersWithoutQuery() bool {
@@ -209,6 +210,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"`
@@ -287,6 +312,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"`
@@ -647,6 +678,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)