Search for a command to run...
Horizontal bars that grow both directions from a center baseline — two opposing categories per row, each side its own color, growing on scroll. For "which way did it lean" comparisons.
Each row has a left and right magnitude that grow outward from the center divider.
Name the two directions with leftName / rightName to render a legend. The scale is
shared across rows — set max to pin it, or let it default to the largest side value.
ChartDivergingBar| Prop | Type | Default | Description |
|---|---|---|---|
rows | DivergingRow[] | — | Each row's left / right grow from the center baseline. |
max | number? | largest side value | Magnitude that fills a full half-width. |
leftColor | string | var(--destructive) | Left-segment color. |
rightColor | string | var(--warning) | Right-segment color. |
leftName | string? | — | Legend name for the left direction (renders with rightName). |
rightName | string? | — | Legend name for the right direction. |
animate | boolean | true | Grow each side in from the center on scroll. |
Use it when both directions are meaningful — gains vs. losses, stricter vs. looser, added vs. removed.
max across sibling charts so their bar lengths are comparable.Keep the two colors distinct and opposed — the default destructive / warning pair reads as two camps.
Use it for a single quantity. One value per row → a horizontal Chart (bar) is clearer.