Charts

Filled area chart with gradient — ideal for visualising trends over time.

• ✓Gradient fill
• ✓Multi-series
• ✓Responsive container

Circular donut chart with center label — great for proportional breakdowns.

• ✓Center label & value
• ✓Auto colour palette
• ✓Configurable ring size

Spider/polygon chart — perfect for comparing multiple metrics or profiles side by side.

• ✓Multi-series
• ✓Fill opacity
• ✓Polar grid

Bar + line overlay on a shared axis — compare volume with trend/rate simultaneously.

• ✓Bar + Line overlay
• ✓Shared x-axis
• ✓Dual colours

Horizontal ranked bars with labels and values — ideal for top-N breakdowns.

• ✓Proportional bars
• ✓Custom colours per row
• ✓Value formatter

Uptime / status grid — each block represents a time unit coloured by status.

• ✓4 status states
• ✓Tooltip per block
• ✓Uptime % calculation

SVG circular progress ring — shows percentage, quota, or score at a glance.

• ✓SVG arc animation
• ✓Custom size & stroke
• ✓Value formatter

Tiny inline chart — embeds in metric cards, table cells, and dashboard grids.

• ✓Area / Line / Bar variants
• ✓Zero-config usage
• ✓Custom colour

Speedometer-style semicircle gauge — displays a single value within a range with colour feedback.

• ✓Animated needle
• ✓Semantic threshold palette
• ✓Custom track styling

Circular stacked bars — compare multiple metrics in a compact radial layout.

• ✓Stacked concentric rings
• ✓Custom fills
• ✓Corner radius