A lightweight component for rendering a basic funnel chart.
npm install react-funnel-pipeline> A lightweight component for rendering a basic funnel chart.
 
* Install
* Usage
* Props
* License
``bash`
npm install --save react-funnel-pipeline
Peer Dependencies;
* React v16 +
`tsx
import React, { Component } from 'react'
import { FunnelChart } from 'react-funnel-pipeline'
import 'react-funnel-pipeline/dist/index.css'
class Example extends Component {
render() {
return (
{ name: 'Awareness', value: 252 },
{ name: 'Interest', value: 105 },
{ name: 'Consideration', value: 84 },
{ name: 'Evaluation', value: 72 },
{ name: 'Commitment', value: 19 },
{ name: 'Pre-sale', value: 0 },
{ name: 'Sale', value: 10 }
]}
/>
)
}
}
`
See the Examples for more info and advanced usage.
Build the Examples with npm install and then npm start` to start the development server at http://localhost:3000.
Or view the online examples at https://darylbuckle.github.io/react-funnel-pipeline.
| Property | Type | Default | Mandatory | Description |
| -------- |------| --------| ----------| ------------|
| data | object[] | | true | The data to display in the Funnel Chart. Must be an array of objects that contain a minimum of 'name' (string) and 'value' (number). |
| title | string | | false | Displays a title above the funnel chart. |
| showValues | boolean | true | false | Whether to show the value within the chart segment. |
| showNames | boolean | true | false | Whether to show the name of the segment within the chart segment. |
| showRunningTotal | boolean | false | false | When this is true instead of showing the value in the segment it will show the running total of all values underneath it. |
| pallette | string[] | ['#f14c14', '#f39c35', '#68BC00', '#1d7b63', '#4e97a8', '#4466a3'] | false | A list of hexadecimal colours as strings to use for the background colour of chart segments. |
| chartWidth | number | | false | The maximum width of the chart. |
| chartHeight | number | 500 | false | This is only used when 'heightRelativeToValue' is true. The height of the chart. |
| heightRelativeToValue | boolean | false | false | When true each segment will have it's height relative to the value. IE segments with higher values will appear larger than those with smaller values. |
| style | style object | | false | A JSX style object to override styles for the chart. |
| getRowStyle | func(row) | | false | A function which parses row data. Return a JSX style object to override styles for that row. |
| getRowNameStyle | func(row) | | false | A function which parses row data. Return a JSX style object to override styles for that rows name. |
| getRowValueStyle | func(row) | | false | A function which parses row data. Return a JSX style object to override styles for that rows value. |
| decorateValue | func(row, index, array) | | false | A function which decorates the value when rendering the row value. Return an object to override the value displayed on the row. The unaltered value is used in all other calculations. |
| getToolTip | func(row) | | false | A function which parses row data. Return a string to override the tooltip for that row. |
| onRowClick | func(row) | | false | Called when a row/segment is clicked. Parses the data of the row which was clicked on. |
MIT © DarylBuckle 2020