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