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

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

FunnelSeries

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

FunnelArc

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

FunnelAxis

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

FunnelAxisLabel

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

FunnelAxisLine

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