DivergingBarChart

stable

Bidirectional bar chart from zero — FX net positions, budget variance, tornado sensitivity analysis

import { DivergingBarChart } from "@nodus/design-system/finance"

FX Net Exposure — Mar 2026

14 Mar 2026

Loading demo…

Props

Prop	Type	Default	Description
`data`req	`{ label: string; value: number; sublabel?: string }[]`	—	Bars to render
`unit`	`string`	—	Unit suffix (e.g. % or M)
`severityColored`	`boolean`	—	Color bars by positive/negative outcome

datarequired

Type { label: string; value: number; sublabel?: string }[]Default —

Bars to render

unit

Type stringDefault —

Unit suffix (e.g. % or M)

severityColored

Type booleanDefault —

Color bars by positive/negative outcome

MobileStacks / Scroll

Chart requires min 320px for legible labels. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Side-by-side grouped bar chart for categorical comparison — budget vs. actual, entity-by-entity cash

Cash flow waterfall with opening balance, incremental flows, and closing balance

Was this helpful?