MetricTrend
A sparkline-style mini chart for displaying data trends. Perfect for showing quick trend visualizations in compact spaces.
Features
- Sparkline-style visualization
- Smooth curve rendering
- Optional area fill
- Customizable colors
- Customizable height
- Click events for interaction
- Responsive sizing
Examples
Basic MetricTrend
Sales Trend
<script>
import { MetricTrend } from '$lib';
</script>
<MetricTrend
label="Sales Trend"
data={[10, 15, 12, 18, 22, 20, 25]}
color="#10b981"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Required | Trend label |
data | number[] | Required | Array of data points |
color | string | '#3b82f6' | Trend line color |
height | number | 40 | Chart height in pixels |
Events
| Event | Detail | Description |
|---|---|---|
onclick | void | Fired when trend is clicked |
Best Practices
- Use for quick trend visualization
- Keep data series short (5-10 points)
- Use consistent colors across related trends
- Include labels for context