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.

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 },
];

export const SignupFunnel = () => (
  <FunnelChart ariaLabel="Signup funnel, last 30 days" data={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={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={data}
  renderPattern={(id, color) => (
    <pattern height={6} id={id} patternUnits="userSpaceOnUse" width={6}>
      <rect fill={color} fill-opacity={0.35} height={6} width={6} />
      <path d="M0 6 L6 0" stroke={color} stroke-width={1.5} />
    </pattern>
  )}
/>

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

• FunnelChart: 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

Solid takes the same props as React, with class for className. A render prop is a function, called again when its arguments change, so destructured parameters stay current.

FunnelChart