Skip to main content

FunnelChart

FunnelChart

Visualize conversion rates and process flows

Tags: chart conversion process pipeline sales

View Demo

The FunnelChart visualizes a sequential process where values decrease (or increase) at each stage. It's commonly used for sales funnels, conversion tracking, recruitment pipelines, or any process where you want to show drop-off rates between stages.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { FunnelChart } from '@classic-homes/charts-svelte';
</script>
// React
import { FunnelChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { FunnelChart } from '@classic-homes/charts-svelte';

  const data = [
    { name: 'Visited', value: 100 },
    { name: 'Inquired', value: 80 },
    { name: 'Ordered', value: 60 },
    { name: 'Paid', value: 40 },
    { name: 'Completed', value: 20 },
  ];
</script>

<FunnelChart title="Conversion Funnel" {data} sort="descending" showLabels height={400} />

Props​

Chart-Specific Props​

Prop Type Default Description
data FunnelSliceData[] required Array of funnel stages
sort 'ascending' | 'descending' | 'none' 'descending' Sort order
orientation 'vertical' | 'horizontal' 'vertical' Funnel orientation
showLabels boolean true Show value labels
labelFormatter string | ((params: LabelFormatterParams) => string) - Data label template or function
legend ChartLegendConfig - Built-in legend position, alignment, icon and formatter
onLegendChange (visible: Record<string, boolean>) => void - Called when legend items are shown or hidden
renderLegend Snippet<[LegendRenderProps]> - Custom HTML legend (e.g. ChartLegend) instead of the built-in one; React takes a function returning a node
onClick (params: SliceEventParams) => void - Callback when clicked

Inherited Base Props​

Prop Type Default Description
title string required Chart title for accessibility
height number | string 400 Chart height
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
showLegend boolean true Show chart legend
showTooltip boolean true Show tooltip on hover
tooltipFormatter string | ((items: TooltipFormatterParams[]) => string) - Custom tooltip template or HTML function
tooltipValueFormatter (value: number) => string - Format values in the default tooltip
option EChartsOption - Raw ECharts option deep-merged over the generated one
description string - Optional description for screen readers
minHeight number - Minimum height in pixels; also bounds an 'auto' height
maxHeight number - Maximum height in pixels; also bounds an 'auto' height
loading boolean false Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error string | null - Error message to display
onRetry () => void - Show a Retry button on the error state, calling this (Svelte only)
emptyMessage string - Message shown when data is empty
valueFormat ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string) - How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale string 'en-US' Locale for valueFormat (Svelte only)
onReady (chart: EChartsType) => void - Called with the ECharts instance when it is created (Svelte only)
events Record<string, (params) => void> - Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns boolean false Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class string - Custom CSS class
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
showGrid boolean - Show grid lines (where applicable)

Data Structure​

interface FunnelSliceData {
  name: string; // Stage name
  value: number; // Stage value
  color?: string; // Optional custom color
}

Examples​

Sales Pipeline​

<FunnelChart
  title="Sales Pipeline"
  data={[
    { name: 'Leads', value: 500 },
    { name: 'Qualified', value: 350 },
    { name: 'Proposal', value: 200 },
    { name: 'Negotiation', value: 100 },
    { name: 'Closed', value: 50 },
  ]}
  sort="descending"
/>

Ascending Funnel​

<FunnelChart title="Growth Funnel" {data} sort="ascending" />

Accessibility​

  • Clear stage labels for screen readers
  • Value labels provide exact numbers
  • Distinct colors for each stage
On this page