Funnel-react-2 NPM

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