Funnel Chart

import { FunnelChartDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.FunnelChart);

Usage

FunnelChart is based on the FunnelChart recharts component:

Legend

To display the legend, set the withLegend prop. The legend displays the name and color of each segment. Hover over a legend item to highlight the corresponding segment:

You can pass props down to the recharts Legend component with the legendProps prop. For example, set legendProps={{ verticalAlign: 'top' }} to display the legend above the chart.

Segments labels

Set the withLabels prop to display labels next to each segment. Use the labelPosition prop to control the position of labels relative to the corresponding segment.

Size and thickness

Set the size prop to control the width and height of the chart. You can override this behavior by setting the h style prop.

Segment color

You can reference colors from theme the same way as in other components, for example, blue, red.5, orange.7, etc. Any valid CSS color value is also accepted.

By default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource="segment":

To remove the tooltip, set withTooltip={false}:

Segments stroke

Use the strokeWidth prop to control the width of the stroke around each segment:

To change the color of the stroke, use the strokeColor prop. You can reference colors from the theme the same way as in other components, for example, blue, red.5, orange.7, etc. Any valid CSS color value is also accepted.

tsx

import { FunnelChart } from '@mantine/charts';

function Demo() {
  return <FunnelChart data={[]} strokeColor="red.5" />;
}

By default, the segments stroke color is the same as the background color of the body element (--mantine-color-body CSS variable). If you want to change it depending on the color scheme, define a CSS variable and pass it to the strokeColor prop: