Funnel chart

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.

Usage

Pass the stages in order, widest first, each with a label and a value. The first stage counts as 100% and every other segment is sized against it. To show a number your own way, such as 12.4k, set displayValue.

<script lang="ts">
import { FunnelChart } from "@/components/ui/charts";

const data = [
  { label: "Visited", value: 18_200 },
  { label: "Signed up", value: 4300 },
  { label: "Activated", value: 2150 },
  { label: "Paid", value: 610 },
];
</script>

<FunnelChart ariaLabel="Signup funnel, last 30 days" {data} />

Anatomy

The funnel is a single component. The stages come from data and everything else is a prop, including a function for pattern fills.

<FunnelChart
  color="var(--chart-2)"
  {data}
  edges="straight"
  grid
  layers={2}
  orientation="vertical"
/>

• FunnelChart: The stages, the halo rings around each, their labels and an optional grid behind them.

Vertical and straight

orientation="vertical" runs the stages from top to bottom, and edges="straight" joins them with straight lines instead of curves. The two are independent, so all four combinations work.

Values, shares and names

Each segment shows its value, its share of the first stage and its name. showValues, showPercentage and showLabels turn each one off, and formatValue and formatPercentage change how the numbers read.

labelLayout="grouped" stacks the three together inside the segment, and labelAlign moves the stack to its start, center or end.

Colors and gradients

color sets every stage at once. A stage's own color overrides it, and gradient takes a list of stops for that segment, such as two theme colors.

Bands and grid lines

grid adds alternating bands behind the stages and a line at each gap between them. Pass an object instead of true to keep only one of the two or restyle it: bands, bandColor, lines, lineColor, lineOpacity, lineWidth.

Hover and controlled state

The hovered stage's halo rings spring outward and the other stages fade to 40%. hoveredIndex and onHoverChange make that hover controlled, so something outside the chart can follow it, such as this readout of the drop-off from the stage before.

Hand the same state to a <ChartLegend> and its rows highlight with the stages.

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.

Pattern fills come from renderPattern, which the chart calls once per stage with a unique id and the stage's color. Return a <pattern> with that id and it fills the segment. The halo rings around it stay solid.

layers sets how many halo rings each segment has (3), and gap the space between stages (4 px).

<FunnelChart {data}>
  {#snippet renderPattern(id, color)}
    <pattern height={6} {id} patternUnits="userSpaceOnUse" width={6}>
      <rect fill={color} fill-opacity={0.35} height={6} width={6}></rect>
      <path d="M0 6 L6 0" stroke={color} stroke-width={1.5}></path>
    </pattern>
  {/snippet}
</FunnelChart>

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

• FunnelChart: {#snippet renderPattern(id, color)}

Loading state

The funnel has no loading state. Hold its place with a Skeleton of the same height until the stages arrive.

Animation

The segments grow in one after another, staggerDelay (0.12 s) apart, and each stage's labels fade in a quarter of a second after it.

enterTransition takes a motion-style transition for the growth: a 1.1 s tween unless you pass another, or a spring.

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.

Every stage is --chart-1 unless you set color on the chart or on a stage. The grid's bands are your theme's --muted and its lines --chart-grid.

The labels follow the theme directly: values in --foreground, names in --muted-foreground, and the percentage on a --foreground badge.

:root {
  --chart-grid: var(--muted);
}

Accessibility

The chart is an image named by ariaLabel ("Funnel chart" by default), and its labels are part of that image. Put the conversion you care about in ariaDescription, from the first stage to the last.

Focus steps through the stages and highlights each one as hover does, calling onHoverChange on the way.

API reference

Svelte takes the same props as React, with class for className. Render props are snippets, listed below by their names. Keep data in $state.raw so the chart sees each new array.

FunnelChart