2

Note

This package is forked from this repo. What is new in this package.

• Drop off perecentage between funnel stages.
• React callbacks to customize the rendering for labels, values, precentages and drop off precentages.
• Percentages now displayed nicely inside the funnel itself.

Install

npm install --save funnel-react-2

or

yarn add funnel-react-2

Usage

import { Funnel } from 'funnel-react-2';

Simple example

<Funnel
    height={252}
    colors={{
      graph: [ '#1890FF', '#BAE7FF' ],
      percent: 'red',
      label: 'yellow',
      value: 'orange'
    }}
    displayPercent={true}
    valueKey='quantity'
    width={800}
    data={data}
    renderLabel={(index, value) => {
      return (
        <span>
          {value}
        </span>
      );
    }}
    renderPercentage={(index, value) => {
      return (
        <span>
          {value}
        </span>
      );
    }}
    renderDropOffPercentage={(index, value) => {
        return (
          <span>{value} %</span>
        );
      }
    }}
    renderValue={(index, value) => {
      return (
        <span>
          {value}
        </span>
      );
    }}
  />

props	Type	Default Value	Options
labelKey	string
colors	object
valueKey	string
width	number	container width
displayPercent	boolean	false	false / true
data	array
renderLabel	function	null
renderValue	function	null
renderPercentage	function	null
renderDropOffPercentage	function	null
## License

MIT © xavivzla, whitechess