FunnelChart

Funnel visualization for conversion/pipeline data. Segments taper from wide to narrow based on value. Supports default and layered variants with configurable interpolation, gradients, axis labels, and tooltips.

Import

import {
  FunnelChart,
  FunnelSeries,
  FunnelArc,
  FunnelAxis,
  FunnelAxisLabel,
  FunnelAxisLine
} from 'reaviz';

FunnelChart Props

FunnelSeries Props

FunnelArc Props

FunnelAxis Props

FunnelAxisLabel Props

FunnelAxisLine Props

Basic Usage

const data = [
  { key: 'Visited Site', data: 1000 },
  { key: 'Added to Cart', data: 900 },
  { key: 'Initiated Checkout', data: 600 },
  { key: 'Purchased', data: 400 },
];

<FunnelChart
  height={300}
  width={500}
  data={data}
/>

Layered Variant

<FunnelChart
  height={400}
  width={800}
  data={data}
  series={
    <FunnelSeries
      arc={
        <FunnelArc
          variant="layered"
          colorScheme={['#013027', '#047662', '#06B899']}
          gradient={null}
        />
      }
    />
  }
/>

With Tooltips and Click

import { TooltipArea } from 'reaviz';

<FunnelChart
  data={data}
  series={
    <FunnelSeries
      arc={<FunnelArc tooltip={<TooltipArea />} />}
      onSegmentClick={(e) => console.log(e.value)}
    />
  }
/>

Step Interpolation

<FunnelChart
  data={data}
  series={
    <FunnelSeries
      arc={<FunnelArc interpolation="step" />}
    />
  }
/>

Label Positioning

// Labels at bottom
<FunnelChart
  data={data}
  series={
    <FunnelSeries
      axis={<FunnelAxis label={<FunnelAxisLabel position="bottom" />} />}
    />
  }
/>

// Hide values, show only labels
<FunnelChart
  data={data}
  series={
    <FunnelSeries
      axis={<FunnelAxis label={<FunnelAxisLabel showValue={false} />} />}
    />
  }
/>

// No axis at all
<FunnelChart
  data={data}
  series={
    <FunnelSeries
      axis={<FunnelAxis label={null} line={null} />}
    />
  }
/>

No Gradient

<FunnelChart
  data={data}
  series={
    <FunnelSeries
      arc={<FunnelArc gradient={null} colorScheme="cybertron" />}
    />
  }
/>

Notes

• Default gradient is horizontal, fading from full opacity to 50% opacity
• variant="layered" renders segments as overlapping layers instead of connected shapes
• labelVisibility="auto" hides labels that don't fit within their segment
• Data should be ordered from largest to smallest for a standard funnel shape