[charts] Funnel charts

[alexfauquette]

Benchmarks

• Recharts (not supported)
• Nivo
• Highcharts
• Echarts

MUI X Funnel chart

https://mui.com/x/react-charts/funnel/

Benchmark

• https://www.highcharts.com/demo/highcharts/funnel
• https://echarts.apache.org/examples/en/index.html#chart-type-funnel
• https://nivo.rocks/funnel/

Data structure

• Echarts: data can eihter be an array of number, or an array of objects {name, value, label, ...}
• Nivo: { id: string | number, label: string, value: number }[]
• Highcharts: [string, number][] an array of tupple with the name of the item and its value

Plot options

• Orientation: horizontal/vertical
• Alignement: 'left', 'right', 'center'. I personally would prefer 'start', 'middle', 'end' because it stays relevant for horizontal display
• the gap between items
• getting colors: adding them to the items data, or using a colormap based on values
• sorting. Items can be sorted by their value, or displayed in the provided order
• Instead of computing the max value we can let the user fill a max property such that they can plot two funnels with different maximal values, but the same scale

Nivo has a notion of separator. I'm not a big fan of it:

Highcharts has a completely custom approach: They display a funnel where you can customize neckWidth, neckHeight and value are represented by the height of the item. It's basicaly a stacked bar with a funnel mask on top of it

Side note

This component is somewhat similar to the pie chart:

• same color management
• same legend with a mark per item

[jeveloper]

Commercial license holder and a very old Material UI supporter and promoter. I would like this type of chart available for pro/premium. Thanks for the amazing work.

[oliviertassinari]

In https://mui.com/blog/mui-x-v8-alpha-zero/ we communicated that MUI X v8.0 aims to include this issue.

[naveed0000]

want to use this chart in application

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.