FunnelChart

ImportCopy Anchor Link

import { FunnelChart } from '@nizivo/charts/funnel-chart';

Static or interactiveCopy Anchor Link

Server. FunnelChart has no 'use client' and renders no island: every value is already text in its rows, so there is nothing to rove. The rows are hidden from assistive technology, which reads the data table instead (step, count and % of previous), as Figma's description asks; tableView="details" shows the table to everyone. How to choose.

ExamplesCopy Anchor Link

BasicCopy Anchor Link

import type { JSX } from 'react';
import { FunnelChart } from '@nizivo/charts/funnel-chart';

interface Step {
  name: string;
  sessions: number;
}

// Figma 03's funnel: a store's checkout, sessions to purchases.
const CHECKOUT: Step[] = [
  { name: 'Sessions', sessions: 48210 },
  { name: 'Added to cart', sessions: 9642 },
  { name: 'Reached checkout', sessions: 4628 },
  { name: 'Purchased', sessions: 2914 },
];

export function FunnelChartExample(): JSX.Element {
  return (
    <FunnelChart
      title="Checkout funnel"
      summary="Sessions to purchases, October"
      data={CHECKOUT}
      step={(d) => d.name}
      value={(d) => d.sessions}
      labels={{ value: 'Sessions' }}
    />
  );
}

LocaleCopy Anchor Link

import type { JSX } from 'react';
import { FunnelChart } from '@nizivo/charts/funnel-chart';

export function FunnelChartLocaleExample(): JSX.Element {
  return (
    <FunnelChart
      title="Bestellprozess"
      data={[
        { name: 'Besuche', sessions: 12840 },
        { name: 'Warenkorb', sessions: 3210 },
        { name: 'Kasse', sessions: 1765 },
        { name: 'Gekauft', sessions: 1102 },
      ]}
      step={(d) => d.name}
      value={(d) => d.sessions}
      locale="de-DE"
      tableView="details"
      labels={{ step: 'Schritt', value: 'Besuche', share: '% vom vorigen', table: 'Werte' }}
    />
  );
}

StatusCopy Anchor Link

import type { JSX } from 'react';
import { FunnelChart } from '@nizivo/charts/funnel-chart';

interface Step {
  name: string;
  sessions: number;
}

// Figma 03's funnel: a store's checkout, sessions to purchases.
const CHECKOUT: Step[] = [
  { name: 'Sessions', sessions: 48210 },
  { name: 'Added to cart', sessions: 9642 },
  { name: 'Reached checkout', sessions: 4628 },
  { name: 'Purchased', sessions: 2914 },
];

export function FunnelChartStatusExample(): JSX.Element {
  return (
    <div>
      <FunnelChart
        title="Checkout funnel"
        status="loading"
        data={[]}
        step={(d: Step) => d.name}
        value={(d) => d.sessions}
      />
      <FunnelChart
        title="Checkout funnel"
        data={[]}
        step={(d: Step) => d.name}
        value={(d) => d.sessions}
      />
      <FunnelChart
        title="Checkout funnel"
        status="error"
        data={CHECKOUT}
        step={(d) => d.name}
        value={(d) => d.sessions}
      />
    </div>
  );
}

StepsCopy Anchor Link

funnelSteps(items) is the rule FunnelChart applies, exported so a server can compute the same numbers:

1. Steps keep their input order. A value that is not a finite number, or is below zero, counts as 0.
2. A bar is as long as the step's value over the first step's, clamped to 0–1: a later step above the first draws a full bar, and a first step of 0 draws none.
3. The share is the step's value over the previous step's. The first step has none, nor does a step after a step of 0; labels.noShare ("—") stands in for it.

PropsCopy Anchor Link

Server component. Props: FunnelChartProps<T>. Source: src/funnel-chart/funnel-chart.tsx.

• Also takes every <figure> attribute except children, title.

render takes an element, or, in client code, a function of the props and this state (ChartFrameState):

step and value are an Accessor: a key of the datum (step="name", which a Server Component can pass), or a (datum, index) => value function, as in every chart. format defaults to Intl.NumberFormat's own options and shareFormat to a percent with one fraction digit ("20.0%").

labels takes Partial<FunnelChartLabels>, on top of ChartFrame's:

Other exportsCopy Anchor Link

FunnelChartLabels type

import type { FunnelChartLabels } from '@nizivo/charts/funnel-chart'

FunnelChart's strings (§16.4), with ChartFrame's. Never concatenated: each is a whole label.

Name	Type	Default	Description
noSharerequired	string	–	In place of the first step's share, which has no step before it.
sharerequired	string	–	The data table's share column.
steprequired	string	–	The data table's first column header.
valuerequired	string	–	The data table's count column.

FunnelChartProps type

import type { FunnelChartProps } from '@nizivo/charts/funnel-chart'

FunnelChart's props: its data and formats in the charts' one shape (_core/api.ts) and ChartFrame's, the <figure>'s attributes included. It draws no axes and no legend, is never mirrored and makes no keyboard claim, so axes, legend, xDirection and interaction are its own.

The props of FunnelChart, listed above.

FunnelStep type

import type { FunnelStep } from '@nizivo/charts/funnel-chart'

One step, measured.

Name	Type	Default	Description
labelrequired	string	–
ofFirstrequired	number	–	Its value over the first step's, 0 to 1: the bar's length.
ofPreviousrequired	number | null	–	Its value over the previous step's, or null on the first step (and after a zero step).
valuerequired	number	–

funnelChartLabels constant

import { funnelChartLabels } from '@nizivo/charts/funnel-chart'

English defaults (§16.4); pass labels to translate per instance.

const funnelChartLabels: FunnelChartLabels

funnelSteps function

import { funnelSteps } from '@nizivo/charts/funnel-chart'

The steps in input order, with a value that is not a finite number taken as 0; negative values are 0 too. ofFirst is clamped to 0–1 (a later step larger than the first draws a full bar), and is 0 throughout when the first step is 0.

function funnelSteps(items: ReadonlyArray<{ label: string; value: number; }>): FunnelStep[]

Data attributes and slotsCopy Anchor Link

Inside the ChartFrame root, which carries nz-funnel-chart (with axes="none" and interaction="none"):

CSS hooksCopy Anchor Link

Layers: nz.components. Classes: .nz-chart-frame-body, .nz-funnel-chart, .nz-funnel-chart-bar, .nz-funnel-chart-label, .nz-funnel-chart-share, .nz-funnel-chart-step, .nz-funnel-chart-steps, .nz-funnel-chart-track, .nz-funnel-chart-track-fill, .nz-funnel-chart-value.

The body sizes to its rows rather than ChartFrame's aspect ratio. While loading, empty or failed it keeps Figma's four-step height, so nothing moves when the data arrives.