BoxViolinPlot
D3-powered box/violin plot for risk distribution visualization — VaR distributions, return spreads, yield curve analysis, stress-test scenarios
import { BoxViolinPlot } from "@nodus/design-system/finance"Demo coming soon
Props
| Prop | Type | Default | Description |
|---|---|---|---|
seriesreq | BoxViolinSeries[] | — | Array of series with label and numeric values array |
showViolin | boolean | — | Show KDE violin density overlay (default true) |
showOutliers | boolean | — | Show outlier dots beyond Tukey fences (default true) |
width | number | — | SVG width in px (default 560) |
height | number | — | SVG height in px (default 360) |
valueLabel | string | — | Axis label for the value dimension |
title | string | — | Accessible chart title |
seriesrequiredType
BoxViolinSeries[]Default —Array of series with label and numeric values array
showViolinType
booleanDefault —Show KDE violin density overlay (default true)
showOutliersType
booleanDefault —Show outlier dots beyond Tukey fences (default true)
widthType
numberDefault —SVG width in px (default 560)
heightType
numberDefault —SVG height in px (default 360)
valueLabelType
stringDefault —Axis label for the value dimension
titleType
stringDefault —Accessible chart title
MobileStacks / Scroll
Box/violin plot requires min 320px for legible box widths. Groups collapse gracefully at narrow widths.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?