Time Series Line Chart
Multi-group trends with presidential context, confidence interval toggles, and interactive legend. Ideal for tracking indicators over time with demographic breakdowns.
Preview placeholder
timeseries-line-v1
Installation
npx @ontopic/viz add recharts/generic/timeseries-line-v1Props
| Prop | Type | Description |
|---|---|---|
data | DataPoint[] | Array of data points with year, value, and optional CI bounds |
metadata | TimeSeriesMetadata | Chart title, subtitle, source, and configuration |
showCI | boolean | Toggle confidence interval display |
height | number | Chart height in pixels |
See full TypeScript interface on GitHub for all props.
Usage Example
import { TimeSeriesChart } from '@/viz/components/recharts/generic/timeseries-line-v1';
<TimeSeriesChart
data={timeSeriesData}
metadata={{ title: 'Trend Over Time', source: { name: 'BRFSS' } }}
/>Metadata
- Last Updated2025-01-12
- FrameworkRecharts
- CategoryTime Series
- Subcategorygeneric
Dependencies
Quick Install
npx @ontopic/viz add recharts/generic/timeseries-line-v1Related Components
Basic Time Series
Simple line chart with error bars for straightforward time series visualization without complex features.
Dual Axis Time Series
Dual y-axis chart with recession indicators and time range selection. Perfect for comparing two metrics with different scales.
Indexed Time Series
Indexed comparison normalized to a base period with recession bands. Useful for comparing growth rates across different metrics.
Economic Time Series
Economic data visualization with recession shading and brush selector for time range filtering.