Premium Docs
Design System Showroom Density normal Platform Flagship
Landing
Playground
Navigator Library map
8 sections 212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting. Runtime fingerprint Token readout from the active provider chain.
Live DS Runtime
Rottay / Modern Platform Flagship
Primary
#FFFFFF Secondary #A0A0A5
Compact runtime evidence across 3+ token signals.
Statistical 3 variants Runtime-driven docs
Live preview
Validate the chart in the active showroom runtime Sidebar engine and tenant drive this Statistical
This preview should stand on the chart itself: legibility, token use, spacing, and interaction rhythm all need to hold without extra local storytelling chrome. Loading chart preview... The interactive chart canvas mounts client-side so the docs page stays stable while the preview runtime boots.
Import Published package entrypoint, ready to copy.
Consumption
Runtime-aware snippet
Copy import { Histogram } from '@rottay/design-system';
Usage Paste-ready example that shows the base contract first.
Consumption
Runtime-aware snippet
Copy <Histogram
values={[12, 15, 22, 28, 31, 35, 42, 55, 60]}
bins={8}
xLabel="Response Time (ms)"
showLabels
cumulativeLine
height={300}
animate
/>Histogram props Prop contracts stay readable across dark-first and light-first tenants.
27 props 1 required 26 optional
Fast read Start with required props, then scan defaults before dropping to per-row details.
Contract posture This reference stays intentionally concise so the primitive contract remains scannable.
Related charts
Continue within Statistical Browse all Primitives 93 documented routes
Structures 24 documented routes
Surfaces 36 documented routes
Verticals 3 documented routes
Playground 1 documented routes
Developers 2 documented routes
rounded top bar · solid dividers
Patterns Visualization Charts Histogram
Histogram Active profile Platform Flagship
Runtime posture Rottay / modern
D3-backed chart recipes with token-aware styling. Tier Chart A specialized visualization pattern.
Family Statistical Start with baseline meaning.
Best for explaining distributions Compare against basic charts.
showing multivariate shape
Review checklist 3 items
baseline meaning
range legibility
target context
Compare against 2 items
basic charts
KPI charts
number[]
none
Raw values to distribute into bins.
number
none
Bin count; Sturges formula is used when omitted.
number[]
none
string
none
string
"Frequency"
string
none
boolean
false
Displays frequency labels.
boolean
false
Displays a cumulative-frequency line.
string
none
(value: number) => string
none
boolean
false
Normalizes frequencies to 0–1.
boolean
none
Displays the family legend.
ChartMargin
none
Insets around the SVG drawing area.
ChartCartesianCompactConfig
none
Configures compact rendering but does not activate it.
boolean
false
Activates compact rendering explicitly.
boolean
false
Activates compact rendering below compactBreakpoint.
number
640
Container-width threshold for autoCompact.
number | string
none
Chart container width; falls back to the family default.
number
none
Chart height; falls back to the family default.
string
none
Additional class name applied to the chart wrapper.
CSSProperties
none
Inline styles applied to the chart wrapper.
boolean
false
Displays the governed loading state.
string
none
Accessible chart title displayed above the plot.
string
none
Supporting text displayed below the title.
boolean
none
Overrides the active tenant animation personality.
boolean
true
Measures and follows the container width.
boolean
none
Enables the family tooltip behavior.
values Required
number[]none
Raw values to distribute into bins. bins Optional
numbernone
Bin count; Sturges formula is used when omitted. thresholds Optional
number[]none
Explicit bin thresholds. xLabel Optional
stringnone
Horizontal-axis label. yLabel Optional
string"Frequency"
Vertical-axis label. color Optional
stringnone
Bar color. showLabels Optional
booleanfalse
Displays frequency labels. cumulativeLine Optional
booleanfalse
Displays a cumulative-frequency line. cumulativeColor Optional
stringnone
Cumulative-line color. formatValue Optional
(value: number) => stringnone
Formats x-axis values. density Optional
booleanfalse
Normalizes frequencies to 0–1. legend Optional
booleannone
Displays the family legend. margin Optional
ChartMarginnone
Insets around the SVG drawing area. compact Optional
ChartCartesianCompactConfignone
Configures compact rendering but does not activate it. compactMode Optional
booleanfalse
Activates compact rendering explicitly. autoCompact Optional
booleanfalse
Activates compact rendering below compactBreakpoint. compactBreakpoint Optional
number640
Container-width threshold for autoCompact. width Optional
number | stringnone
Chart container width; falls back to the family default. height Optional
numbernone
Chart height; falls back to the family default. className Optional
stringnone
Additional class name applied to the chart wrapper. style Optional
CSSPropertiesnone
Inline styles applied to the chart wrapper. loading Optional
booleanfalse
Displays the governed loading state. title Optional
stringnone
Accessible chart title displayed above the plot. subtitle Optional
stringnone
Supporting text displayed below the title. animate Optional
booleannone
Overrides the active tenant animation personality. responsive Optional
booleantrue
Measures and follows the container width. tooltip Optional
booleannone
Enables the family tooltip behavior.