Stream Chart ^0.1.15
Flowing stacked area — great for visualizing composition shifts over time. Choose between center baseline, bottom baseline (conventional stacked area), or smooth wiggle baseline.
Center baseline (default)
Search
Direct
Social
Referral
Email
vue
<VxStreamChart :data="series" :labels="labels" legend />Bottom baseline ^0.1.15
Traditional stacked area look (baseline at zero).
Search
Direct
Social
Referral
Email
vue
<VxStreamChart :data="series" :labels="labels" baseline="bottom" legend />Wiggle baseline ^0.1.15
Minimized-wiggle baseline (Byron-Wattenberg). Easiest to read individual series trends when each layer changes a lot.
Pop
Rock
Hip-Hop
Jazz
Classical
Electronic
vue
<VxStreamChart :data="series" :labels="labels" baseline="wiggle" legend />Straight edges
Search
Direct
Social
Referral
Email
vue
<VxStreamChart :data="series" :labels="labels" :smooth="false" />Highlight on hover ^0.1.15
Hover a layer to dim the others. Enabled by default — pass :highlight-on-hover="false" to disable.
Pop
Rock
Hip-Hop
Jazz
Classical
Electronic
vue
<VxStreamChart :data="series" :labels="labels" :highlight-on-hover="true" />Custom palette
Search
Direct
Social
Referral
Email
vue
<VxStreamChart
:data="series"
:colors="['#6366f1', '#22c55e', '#f59e0b', '#ec4899', '#06b6d4']"
/>Opacity tuning
opacity 0.5
Search
Direct
Social
Referral
Email
opacity 1.0
Search
Direct
Social
Referral
Email
Analytics dashboard
Traffic by source
2.1M visits
▲ 18% vs last year
Search
Direct
Social
Referral
Email
API
Data shape
ts
interface StreamChartSeries {
name: string
data: number[]
color?: string
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | StreamChartSeries[] | [] | Multiple named series |
labels | (string|number)[] | [] | X-axis labels |
height | number | 280 | Chart height |
baseline | 'center' | 'bottom' | 'wiggle' | 'center' | Layout baseline |
smooth | boolean | true | Smooth cubic bezier curves |
highlightOnHover | boolean | true | Dim non-hovered layers |
colors | string[] | built-in palette | Color palette |
opacity | number | 0.85 | Layer opacity |
axis | boolean | true | X-axis labels |
tooltip | boolean | true | Hover tooltip |
legend | boolean | true | Legend below chart |
animate | boolean | true | Animate on mount and data change |
animationDuration | number | 900 | Tween duration in ms |
formatValue | (v) => string | abbreviates 1.2k | Value formatter |
Events
| Event | Payload |
|---|---|
hover | { seriesIndex, pointIndex, value } |
click | { seriesIndex, pointIndex, value } |