Charts
Recharts design system for Operations dashboard data visualizations, including hover interactions, tooltips, and axis styling.
Hover cursor styles
Standard cursor treatments for chart interactions.
| Style name | Cursor prop | Effect | Live pages |
|---|---|---|---|
Bar charts | cursor={{ fill: "rgba(255,255,255,0.03)" }} | Subtle white fill highlight on hovered bar region | |
Line / Area charts | cursor={{ stroke: "rgba(255,255,255,0.1)" }} | Vertical line indicator at hover position |
Tooltip content
Custom tooltip styling using the ChartTooltip component.
| Property | Value | Description |
|---|---|---|
backgroundColor | hsl(var(--card)) | Matches card background color |
border | 1px solid hsl(var(--border)) | Matches border token |
borderRadius | 8px | Standard border radius |
Axis labels
Standard styling for X and Y axis tick labels.
| Property | Value | Description |
|---|---|---|
fontSize | 11 | Small, readable tick labels |
fill | var(--muted-foreground) | Muted text color for labels |
stroke | hsl(var(--muted-foreground)) | Axis line color (when visible) |
Chart colors
Standard color palette for chart data series.
| Color | Hex | Use cases |
|---|---|---|
Green | #22c55e | Success metrics, positive trends, calibration data |
Blue | #3b82f6 | Information metrics, 4D labeling, secondary series |
Orange | #f97316 | Warning states, 2D labeling, box editing metrics |
Purple | #8b5cf6 | Review states, projected values, final review |
Gray | #6b7280 | Neutral, inactive, backlog pipeline stages |