Charts & Data Visualization
Enterprise-grade chart components built with Recharts and styled to match Retailys UI Design Framework tokens. Every chart uses semantic CSS variables for full dark mode support.
Metric Cards
KPI cards with sparkline area charts, trend indicators, and FeaturedIcons. Perfect for dashboard headers.
$48.2K
Total Revenue
2,420
Active Users
3.6%
Conversion Rate
4m 32s
Avg. Session
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | - | Metric label. |
value* | string | - | Display value (formatted). |
change* | string | - | Percentage change text (e.g. '+12.5%'). |
trend* | "up" | "down" | - | Determines color and arrow direction. |
icon* | React.FC | - | FeaturedIcon icon component. |
sparkline | number[] | - | Mini area chart data points for the sparkline. |
Area Chart
Gradient-filled area charts for time-series data. Uses SVG linear gradients with opacity fade for a polished look.
Revenue Overview
Monthly revenue, cost, and profit
Line Chart
Clean multi-series line charts with custom tooltips and interactive dots. Ideal for comparing trends over time.
Website Traffic
Daily visitors, page views, and sessions
Bar Charts
Vertical and horizontal bar charts for categorical comparisons. Grouped bars for year-over-year analysis.
Quarterly Revenue
This year vs last year
Revenue by Country
Top 6 markets
Stacked Area Chart
Layered area charts showing composition and total over time. Device breakdown with gradient fills.
Traffic by Device
Monthly breakdown: Desktop, Mobile, Tablet
Pie & Donut Charts
Circular charts for proportion visualization. Donut variant with center label and interactive hover states.
Traffic Sources
Conversion breakdown by channel
Traffic Distribution
Full pie chart variant
Radar Chart
Multi-axis radar chart for performance scoring and capability comparison across multiple dimensions.
Performance Audit
Current vs previous period
Activity Rings
Daily activity gauge
Composed Chart
Mixed chart combining bars, lines, and areas in a single view. Useful for correlating different metrics on the same timeline.
Sales & Orders
Revenue (bars), orders (line), and conversion rate (area)
API Reference
Props documentation for the chart wrapper components used throughout this page.
ChartCard
Card container for wrapping any Recharts chart with a consistent header and styling.
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | - | Card heading displayed at the top. |
subtitle | string | - | Supporting text below the title. |
children* | ReactNode | - | Chart content — typically a ResponsiveContainer. |
legend | { label: string; color: string }[] | - | Inline legend items rendered in the header. |
actions | ReactNode | - | Optional right-aligned header actions (filters, toggles, etc.). |
CustomTooltip
Styled tooltip matching Retailys UI Design Framework design tokens.
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | - | Whether the tooltip is currently visible. |
payload | Array<{ name, value, color }> | - | Data entries for the hovered point. |
label | string | - | X-axis label for the hovered point. |
Design Tokens
CSS variables used for chart colors. These automatically adapt in dark mode.
| Token | CSS Variable | Usage |
|---|---|---|
Brand | --color-brand-500 | Primary data series |
Indigo | --color-indigo-500 | Secondary series |
Purple | --color-purple-500 | Tertiary series |
Blue | --color-blue-500 | Information series |
Success | --color-success-500 | Positive metrics |
Warning | --color-warning-500 | Caution indicators |
Error | --color-error-500 | Negative metrics |
Pink | --color-pink-500 | Additional series |
Orange | --color-orange-500 | Additional series |
Gray | --color-gray-400 | Comparison / baseline |
Grid Line | --color-border-secondary | Chart grid lines |
Axis Text | --color-text-tertiary | Axis labels and ticks |