Funnel chart

Vanilla JS

import { FunnelChart } from '@arshad-shah/swift-chart';

new FunnelChart('#chart', { theme: 'midnight' })
  .setData(conversionFunnel, { labelField: 'stage', valueField: 'value' });

React

import { Funnel } from '@arshad-shah/swift-chart/react';

<Funnel
  data={conversionFunnel}
  mapping={{ labelField: 'stage', valueField: 'value' }}
  theme="midnight"
  height={340}
/>

Pyramid orientation

Set pyramid: true to invert the chart vertically: a narrow apex at the top widens into the largest stage at the bottom.

Reference

• Class: FunnelChart
• React component: Funnel