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