Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

FunnelChart

Funnel chart component

Import

Source

View source code

Docs

Edit this page

Package

@mantine/charts

Usage

FunnelChart is based on FunnelChart recharts component:

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

function Demo() {
  return <FunnelChart data={data} />;
}

Segments labels

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

Labels position
import { FunnelChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <FunnelChart labelsPosition="right" withLabels data={data} />;
}

Size and thickness

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

Size
import { FunnelChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <FunnelChart size={160} data={data} />;
}

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.

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

function Demo() {
  return (
    <FunnelChart
      data={[
        { name: 'USA', value: 400, color: 'blue' },
        { name: 'Other', value: 200, color: 'gray.6' },
      ]}
    />
  );
}

Tooltip data source

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":

Data only for hovered segment

Data only for all segments

import { Group, Text } from '@mantine/core';
import { FunnelChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Group gap={50}>
      <div>
        <Text fz="xs" mb="sm" ta="center">
          Data only for hovered segment
        </Text>
        <FunnelChart data={data} tooltipDataSource="segment" mx="auto" />
      </div>

      <div>
        <Text fz="xs" mb="sm" ta="center">
          Data only for all segments
        </Text>
        <FunnelChart data={data} mx="auto" />
      </div>
    </Group>
  );
}

Without tooltip

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

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

function Demo() {
  return <FunnelChart data={data} withTooltip={false} />;
}

Segments stroke

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

Stroke width
import { FunnelChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <FunnelChart strokeWidth={1} data={data} />;
}

To change color of the stroke, use strokeColor prop. 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.

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

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

By default, 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 CSS variable and pass it to the strokeColor prop:

import { FunnelChart } from '@mantine/charts';
import { data } from './data';
import classes from './Demo.module.css';

function Demo() {
  return (
    <div className={classes.root}>
      <FunnelChart data={data} strokeColor="var(--card-bg)" />
    </div>
  );
}

Previous

PieChart

Next

RadarChart

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people