shadcn.io is an independent project built on shadcn/ui

Free

Stream chart

How a mix shifts over time, as layers around a moving baseline or as shares of 100%. Labels sit inside each layer where it's thickest.

TanStack Charts

PreviewCode

Installation

The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

One row per date, with a number for each layer. xDataKey names the date column, which can also hold plain numbers.

<script setup lang="ts">
import {
  ChartTooltip,
  Grid,
  Stream,
  StreamChart,
  StreamLabels,
  XAxis,
} from "@/components/ui/charts";

// Thousands of listening hours a month.
const data = [
  { date: new Date(2026, 0, 1), jazz: 126, pop: 423, rock: 186 },
  { date: new Date(2026, 1, 1), jazz: 102, pop: 416, rock: 187 },
  { date: new Date(2026, 2, 1), jazz: 105, pop: 416, rock: 190 },
  { date: new Date(2026, 3, 1), jazz: 105, pop: 422, rock: 195 },
  { date: new Date(2026, 4, 1), jazz: 102, pop: 435, rock: 201 },
  { date: new Date(2026, 5, 1), jazz: 97, pop: 453, rock: 208 },
];
</script>

<template>
  <StreamChart
    ariaLabel="Listening hours by genre"
    :data="data"
    x-data-key="date"
  >
    <Grid vertical />
    <Stream data-key="pop" label="Pop" />
    <Stream data-key="rock" label="Rock" />
    <Stream data-key="jazz" label="Jazz" />
    <StreamLabels />
    <XAxis />
    <ChartTooltip />
  </StreamChart>
</template>

Anatomy

The guides are the same Grid, XAxis and YAxis the line chart uses. Layers stack by order, not by the order you write them, unless you pass order="none".

<StreamChart :data="data" x-data-key="date">
  <Grid vertical />
  <Stream data-key="pop" fill="var(--chart-1)" label="Pop" />
  <Stream data-key="hipHop" fill="var(--chart-2)" label="Hip-hop" />
  <Stream data-key="rock" fill="var(--chart-3)" label="Rock" />
  <StreamLabels />
  <XAxis />
  <ChartTooltip />
</StreamChart>

StreamChart: Stacks the layers by offset and order and handles hover.
Grid: With vertical, lines at the date ticks. Value lines only on an expand or none offset.
Stream: One layer, read from dataKey.
StreamLabels: Each layer's name at its thickest point, hidden under 18 px.
XAxis: Dates along the bottom.
YAxis: Values or percentages, on an expand or none offset only.
ChartTooltip: Every layer's value at the hovered date, the hovered layer marked.

Baseline and shares

offset decides where the stack sits. "wiggle", the default, moves the baseline to keep the layers calm, "silhouette" centers them on zero, "expand" fills every date to 100% and "none" is a plain stacked area.

Values only line up with an axis on the last two, so YAxis and the horizontal grid lines are drawn for expand and none and skipped otherwise.

PreviewCode

Order and curve

order="inside-out" (the default) puts the largest layers in the middle, which keeps a streamgraph readable. Use "none" to keep the order you wrote them in, which is steadier on an expand chart.

curve is "basis" by default, which smooths past the data points. Pick "monotone" when the layers should pass through each value.

With a legend

onHoverChange reports the hovered layer's index, or null when the pointer leaves. Pass it to a ChartLegend, wrap both in ChartLegendHoverProvider, and a legend row lights its layer as well.

Customization

The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.

class goes on the chart's container, so size and spacing are utility classes.

On a stream chart, ChartTooltip reads content and class. The point it passes has the hovered layer's series, value, color and share of the date's total, plus the whole row.

point is typed as a plain record, so convert its fields with String() and Number() as below. For number and date formats alone, formatValue and formatX change the default tooltip and the axes without a custom body.

<ChartTooltip>
  <template #content="{ point }">
    <TooltipContent
      :rows="[
        {
          color: String(point.color),
          label: 'Share of the month',
          value: `${Math.round(Number(point.share) * 100)}%`,
        },
      ]"
      :title="String(point.series)"
    />
  </template>
</ChartTooltip>

Where a part renders content of its own, you pass it in. In Vue:

ChartTooltip: <template #content="{ point, index }">

Loading state

With status="loading", muted wavy bands take the place of the layers, stacked on the chart's own offset. The grid stays, the axis labels become placeholders, and the pointer is ignored until "ready".

<StreamChartLoading /> stands in for a chart with no data yet. It takes aspectRatio or height.

PreviewCode

Animation

The layers sweep in from the left over 1.1 seconds, each 60 ms after the one before. There's no duration prop. Pass :animate="false" to skip the entrance.

New data redraws the layers in place, without a transition. With reduced motion turned on, the chart appears at once.

Theming

Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.

Each Stream takes a fill, or --chart-1 to --chart-5 by position. The layer is painted with 78% of that color over --chart-background, and a 1 px line in --chart-background parts it from its neighbors.

Token	Default	Paints
`--chart-1`	your theme's	the first series
`--chart-2`	your theme's	the second series
`--chart-3`	your theme's	the third series
`--chart-4`	your theme's	the fourth series
`--chart-5`	your theme's	the fifth series
`--chart-background`	`--card`	dot halos, the gaps between stacked marks
`--chart-crosshair`	`--muted-foreground` at 75%	the hover line
`--chart-grid`	`--border`	grid lines
`--chart-label`	`--muted-foreground`	tick labels

globals.css

:root {
  --chart-background: var(--background);
  --chart-crosshair: var(--primary);
}

Accessibility

The chart is an image named by ariaLabel ("Stream chart" by default). The keyboard visits every layer at every date, so a long series has many stops. Put the trend you want readers to take away in ariaDescription.

Tab: Moves focus to the chart and the first layer at the first date.
Arrow Right: Moves to the next layer, then on to the next date. ArrowDown does the same.
Arrow Left: Moves back one layer or date. ArrowUp does the same.
Home: Jumps to the first layer at the first date.
End: Jumps to the last layer at the last date.

API reference

Vue takes the same props as React, in camelCase or kebab-case, with class for className. Render props are scoped slots (#content), and callbacks such as onHoverChange can be written as listeners (@hover-change).

StreamChart

PropType

datareadonly Record<string, unknown>[]

One row per x position: xDataKey holds a Date or a number, each Stream's dataKey a value.

Type: readonly Record<string, unknown>[]

xDataKeystring

The key of each row's x value.

offset?"wiggle" | "silhouette" | "expand" | "none"

Where the stack sits: "wiggle" (a streamgraph: the baseline moves to calm the layers), "silhouette" (centred on zero), "expand" (every x normalised to 100%) or "none" (a stacked area from zero).

Type: "wiggle" | "silhouette" | "expand" | "none"
Default: "wiggle"

order?"inside-out" | "ascending" | "descending" | "none"

Layer order: "inside-out" (the largest in the middle, as a streamgraph wants), "ascending", "descending" or "none" (the Stream order).

Type: "inside-out" | "ascending" | "descending" | "none"
Default: "inside-out"

curve?"basis" | "natural" | "monotone" | "linear"

The layers' curve.

Type: "basis" | "natural" | "monotone" | "linear"
Default: "basis"

formatValue?(value: number) => string

Formats a value in the tooltip and the y axis.

Type: (value: number) => string

formatX?(value: unknown) => string

Formats an x value in the tooltip and the x axis (defaults: a date as "Jan 5", a number as is).

Type: (value: unknown) => string

onHoverChange?(index: number | null) => void

Called with the hovered layer's index (its Stream's position), and null when the pointer leaves.

Type: (index: number | null) => void

aspectRatio?string | number

Width over height: a number or a string such as "2 / 1".

Type: string | number
Default: "2 / 1"

height?number

A fixed height in px instead of an aspect ratio.

animate?boolean

Play the entrance: the layers sweep in from the left.

Default: true

status?ChartStatus

"loading" draws a shimmering skeleton (muted wavy bands) in place of the chart and ignores the pointer; switching to "ready" plays the entrance. Switching back to "loading" fades the chart out first.

Default: "ready"

loadingLabel?string

Text shown centered over the plot, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.

ariaLabel?string

ariaDescription?string

class?string

Extra class name for the chart's root element.

style?CSSProperties

Inline style for the chart's root element.

children?ReactNode

Carriers: ChartTooltip and the family's own.

Stream

PropType

dataKeystring

The key of its value in each row.

label?string

Its name in the tooltip, its label and the legend. Defaults to the dataKey.

fill?string

Its colour. Defaults to the palette's, by position.

StreamLabels

PropType

minThickness?number

Hide a label where its layer is thinner than this, in px.

Default: 18

Grid

PropType

horizontal?boolean

Show horizontal grid lines.

Default: true

vertical?boolean

Show vertical grid lines.

Default: false

numTicksRows?number

Number of horizontal grid lines. Ignored when rowTickValues is set.

Default: 5

numTicksColumns?number

Number of vertical grid lines.

Default: 10

rowTickValues?number[]

Explicit y values for the horizontal grid lines. Overrides numTicksRows.

stroke?string

Color of the grid lines.

Default: "var(--chart-grid)"

loadingStroke?string

Grid color while the chart is loading. Falls back to stroke.

strokeOpacity?number

Opacity of the grid lines.

Default: 1

strokeWidth?number

Width of the grid lines in px.

Default: 1

strokeDasharray?string

Dash pattern of the grid lines.

Default: "4,4"

highlightRowValues?number[]

Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.

highlightRowStroke?string

Color of the highlighted rows.

Default: "var(--chart-foreground-muted)"

highlightRowStrokeOpacity?number

Opacity of the highlighted rows.

Default: 1

highlightRowStrokeWidth?number

Width of the highlighted rows in px.

Default: 1

highlightRowStrokeDasharray?string

Dash pattern of the highlighted rows.

Default: "0"

fadeHorizontal?boolean

Fade the horizontal lines toward transparent at the left and right edges.

Default: true

fadeVertical?boolean

Fade the vertical lines toward transparent at the top and bottom edges.

Default: false

hideHorizontalEdgeLines?boolean

Drop the first and last horizontal line (kept when two or fewer remain).

Default: false

hideVerticalEdgeLines?boolean

Drop the first and last vertical line (kept when two or fewer remain).

Default: false

shimmer?boolean

While the chart is loading, sweep a bright band across the grid.

Default: false

shimmerStroke?string

Color of the shimmer band.

Default: "color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"

shimmerSpeed?number

Speed multiplier of the shimmer sweep. 2 is twice as fast.

Default: 1

XAxis

PropType

numTicks?number | ResponsiveChartLabelCount

Target number of tick labels along the x axis, or one per chart width: { base, sm, md, lg, xl } takes the count of the widest breakpoint the chart reaches (640, 768, 1024 and 1280 px).

Type: number | ResponsiveChartLabelCount
Default: 5

labels?readonly string[]

The tick text of each data row, in row order: it replaces the date formatting (pair it with ChartTooltip dateLabels).

tickerHalfWidth?number

Half-width in px of the zone around the date pill inside which tick labels are hidden. Line, area and composed charts widen it to the pill's half-width plus the widest tick label's, so no label sits half under the pill.

Default: 50

tickMode?"domain" | "data"

Where ticks fall: "data" places them on evenly spaced data rows, "domain" places them at evenly spaced time values across the x domain.

Type: "domain" | "data"
Default: "data"

formatValue?(value: Readonly<Date>) => string

Formats a tick date into its label. Defaults to a short month and day such as "Jan 5".

Type: (value: Readonly<Date>) => string

YAxis

PropType

yAxisId?string | number

Id of the y scale this axis labels. Must match the yAxisId of the series that use it.

Type: string | number
Default: "left"

orientation?"left" | "right"

Side of the plot the axis sits on. The primary axis is on the left; additional axes default to the right.

Type: "left" | "right"
Default: "left"

numTicks?number

Target number of tick labels. The primary axis also sets the number of horizontal grid lines.

Default: 5

formatLargeNumbers?boolean

Abbreviate values of 1000 and above as thousands, with one decimal where needed, for example 2k or 1.5k.

Default: true

formatValue?(value: number) => string

Formats a tick value into its label. Overrides formatLargeNumbers.

Type: (value: number) => string

ChartTooltip

PropType

showDatePill?boolean

Show the date pill that rides along the bottom of the plot.

Default: true

showCrosshair?boolean

Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).

Default: true

showDots?boolean

Show a dot on every series at the hovered position.

Default: true

dotVariant?"dot" | "ring"

Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.

Type: "dot" | "ring"
Default: "dot"

dotSize?number

Dot radius in px.

Default: 5

dotRadiusFraction?number

Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.

Default: 0.25

dotScale?number

Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.

Default: 1

dotStrokeWidth?number

Stroke width of the dots in px.

Default: 2

indicatorColor?string | ((point: Record<string, unknown>) => string)

Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.

Type: string | ((point: Record<string, unknown>) => string)
Default: "var(--chart-crosshair)"

#content?slot: { point, index }

Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).

pinnable?boolean

A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.

Default: false

rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

Replaces the default rows (one per series) with your own list of { color, label, value }.

Type: (point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.

Type: string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

#default?slot

Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.

class?string

Extra class name for the tooltip panel.

springConfig?SpringConfig

Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.

matchCrosshair?boolean

Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.

Default: false

damping?number

Spring damping for the floating panel when matchCrosshair is off, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.

Default: 20

indicatorDasharray?string

Dash pattern of the crosshair. Omit for a solid line.

indicatorFadeEdges?IndicatorFadeEdges

Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).

Default: "both"

indicatorFadeLength?number

Size of the crosshair's fade, as a percentage of its height (2 to 40).

Default: 10

indicatorEndColor?string

Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).

indicatorEnd?"plot" | "point"

How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.

Type: "plot" | "point"
Default: "plot"

dotHaloBlur?number

Blur in px on the dots' halo, for a soft glow.

Default: 0

topOffset?number

Extra gap in px between the top of the plot and the tooltip panel.

Default: 0

dateLabels?readonly string[]

The date pill's text for each data row, in row order (pair it with XAxis labels).

boxSpringConfig?SpringConfig

Spring for the floating panel. Takes priority over matchCrosshair and damping.

indicatorWidth?IndicatorWidth

Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).

Default: "line"

StreamChartLoading

PropType

aspectRatio?string | number

Width over height: a number or a string such as "2 / 1". Defaults to the chart's own.

Type: string | number

height?number

A fixed height in px instead of an aspect ratio.

label?string

Text shown centered over the skeleton, with a shimmer. Nothing is shown when it is unset or empty.

class?string

Extra CSS class name for the placeholder's root element.

Default: ""

Examples

3 examples on Vue, each live with its code and its own install command.

All 3 stream chart examples

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular Examples

Frameworks

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Preview

Installation

Usage

Anatomy

Baseline and shares

Order and curve

With a legend

Customization

Loading state

Animation

Theming

Accessibility

API reference

StreamChart

Stream

StreamLabels

Grid

XAxis

YAxis

ChartTooltip

StreamChartLoading

Examples