Funnel Chart

A Funnel Chart in REAVIZ is perfect for visualizing the flow of data through various stages of a process. Each slice represents a step, with the final slice showing the end result. This type of chart helps you understand conversion rates and process efficiency.

Where to use:

Track Conversion Rates: Ideal for visualizing conversion rates at each stage.
Analyze Processes: Useful for identifying drop-offs in multi-step processes.
Evaluate Workflow Efficiency: Great for assessing the efficiency of a workflow.

Quick Start

To create a funnel chart, use import the FunnelChart and give it some data.

import { FunnelChart } from 'reaviz';


export default function App() {
  return (
    <FunnelChart
      height={300}
      width={400}
      data={[
        {
          data: 1000,
          key: 'Visited Site'
        },
        {
          data: 900,
          key: 'Added to Cart'
        },
        {
          data: 600,
          key: 'Initiated Checkout'
        }
      ]}
    />
  );
}

import { FunnelChart } from 'reaviz';

export default function App() {
  return (
    <FunnelChart
      height={300}
      width={400}
      data={[
        {
          data: 1000,
          key: 'Visited Site'
        },
        {
          data: 900,
          key: 'Added to Cart'
        },
        {
          data: 600,
          key: 'Initiated Checkout'
        }
      ]}
    />
  );
}

Examples

API

FunnelChart (opens in a new tab)

Prop	Description	Default
`data`	Chart shape used to render the funnel. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`series`	The series component that renders the funnel components. `ReactElement<FunnelSeriesProps, FC<Partial<FunnelSeriesProps>>>`	`<FunnelSeries />`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`	`0`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

FunnelSeries (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `FunnelChart`. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`id`	Id of the funnel chart. Set internally by `FunnelChart`. `string`
`arc`	The arc component that renders the funnel shape. `ReactElement<FunnelArcProps, FC<Partial<FunnelArcProps>>>`	`<FunnelArc />`
`axis`	The axis component that renders the funnel axis. `ReactElement<FunnelAxisProps, FC<Partial<FunnelAxisProps>>>`	`<FunnelAxis />`
`height`	Height of the chart. Set internally by `FunnelChart`. `number`
`width`	Width of the chart. Set internally by `FunnelChart`. `number`
`onSegmentClick`	Event for when a segment is clicked. `(e: ClickEvent) => void`

FunnelArc (opens in a new tab)

Prop	Description	Default
`id`	Unique identifier for the arc. Set internally by `FunnelChart`. `string`
`data`	Data to render the funnel. Set internally by `FunnelChart`. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`opacity`	Opacity of the funnel arc. `number`	`1`
`index`	Index of the funnel arc. Set internally by `FunnelChart`. `number`
`variant`	The chart funnel style to use. `"default" \| "layered"`	`default`
`xScale`	xScale for the funnel. Set internally by `FunnelChart`. `any`
`yScale`	yScale for the funnel. Set internally by `FunnelChart`. `any`
`interpolation`	Interpolation for the area. Set internally by `AreaSeries`. `InterpolationTypes`	`smooth`
`colorScheme`	Color scheme for the chart. `ColorSchemeType`	`schemes.cybertron[0]`
`gradient`	Gradient to apply to the area. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`	`( <Gradient direction="horizontal" stops={[ <GradientStop offset="0%" stopOpacity={1} key="stop" />, <GradientStop offset="80%" stopOpacity={0.5} key="start" /> ]} /> )`
`glow`	Glow styling for the arc. `Glow`
`tooltip`	Tooltip for the chart area. `ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>>`	`null`

FunnelAxis (opens in a new tab)

Prop	Description	Default
`data`	Data to render the funnel. Set internally by `FunnelChart`. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`xScale`	xScale for the funnel. Set internally by `FunnelChart`. `any`
`yScale`	yScale for the funnel. Set internally by `FunnelChart`. `any`
`line`	The funnel axis line. `ReactElement<FunnelAxisLineProps, FC<Partial<FunnelAxisLineProps>>>`	`<FunnelAxisLine />`
`label`	Label component for the axis. `ReactElement<FunnelAxisLabelProps, FC<Partial<FunnelAxisLabelProps>>>`	`<FunnelAxisLabel />`

FunnelAxisLabel (opens in a new tab)

Prop	Description	Default
`data`	Data object for the label. Set internally by `FunnelAxis`. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>`
`index`	Index of the label. Set internally by `FunnelAxis`. `number`
`fill`	Color of the text. `string`	`#fff`
`fontSize`	Font size of the text. `number`	`13`
`fontFamily`	Font family of the text. `string`	`sans-serif`
`padding`	Padding of the label. `number`	`10`
`className`	Class name to apply to the text. `string`
`xScale`	xScale for the funnel. Set internally by `FunnelAxis`. `any`
`yScale`	yScale for the funnel. Set internally by `FunnelAxis`. `any`
`position`	Positioning of the label. `"top" \| "bottom" \| "middle"`	`middle`
`showValue`	Whether to show the value of the data. Defaults to `true`. `boolean`	`true`
`labelVisibility`	Visibility of the label. `"auto" \| "always"`	`auto`

FunnelAxisLine (opens in a new tab)

Prop	Description	Default
`strokeColor`	Color of the axis lines. `string`	`#333`
`strokeWidth`	Width of the axis lines. `number`	`2`
`xScale`	xScale for the funnel. Set internally by `FunnelChart`. `any`
`yScale`	yScale for the funnel. Set internally by `FunnelChart`. `any`
`index`	Index of the line. Set internally by `FunnelAxis`. `number`

Bubble Chart Heatmap