ChartComparisonBar

stable

Overlay control strip for comparing two periods, entities, or scenarios with A/B labeling and delta display

datavizInteractive/Storybook ↗

import { ChartComparisonBar } from "@nodus/design-system/patterns"

Loading demo…

Props

Prop	Type	Default	Description
`seriesA`req	`ComparisonSeries`	—	First series for comparison (A)
`seriesB`req	`ComparisonSeries`	—	Second series for comparison (B)
`active`	`boolean`	false	Whether comparison mode is currently active
`onToggle`	`(active: boolean) => void`	—	Toggle comparison mode on/off
`delta`	`number`	—	Pre-computed delta value to display

seriesArequired

Type ComparisonSeriesDefault —

First series for comparison (A)

seriesBrequired

Type ComparisonSeriesDefault —

Second series for comparison (B)

active

Type booleanDefault false

Whether comparison mode is currently active

onToggle

Type (active: boolean) => voidDefault —

Toggle comparison mode on/off

delta

Type numberDefault —

Pre-computed delta value to display

Metadatasemantic type border motion viz

Design Rationale

This component was designed to express:

View all principles →

Explore Related

ChartTooltip→

Recharts-compatible tooltip that distinguishes user-selected vs. agent-highlighted data points with semantic color treatment

ChartAnnotation→

Persistent inline chart marker for agent-noted anomalies, threshold crossings, or notable observations with semantic color coding

Was this helpful?