PieChart

Pie chart component

Import

Usage

PieChart is based on PieChart recharts component:

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

function Demo() {
  return <PieChart 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. Note that if your chart has a lot of segments and labelPosition="inside" is set, labels might overlap. In this case, use labelPosition="outside.

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

function Demo() {
  return <PieChart withLabelsLine labelsPosition="outside" withLabels data={data} />;
}

Size

Set size prop to control width and height of the chart. Note that if withLabels and labelPosition="outside" prop are set, the chart height is automatically increased by 80px to make room for labels. You can override this behavior by setting h and w style prop.

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

function Demo() {
  return <PieChart 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 { PieChart } from '@mantine/charts';
import { data } from './data';

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

Enable tooltip

To enable the tooltip, set withTooltip prop:

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

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

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 { PieChart } 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>
        <PieChart data={data} withTooltip tooltipDataSource="segment" mx="auto" />
      </div>

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

Start and end angle

Use startAngle and endAngle props to control the start and end angle of the chart. For example, to display a half-circle chart, set startAngle={180} and endAngle={0}:

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

function Demo() {
  return <PieChart data={data} startAngle={180} endAngle={0} />;
}

Note that even when startAngle and endAngle props are set, the chart still takes the same amount of space as if it was a full circle.

Segments stroke

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

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

function Demo() {
  return <PieChart 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 { PieChart } from '@mantine/charts';

function Demo() {
  return <PieChart data={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 { PieChart } from '@mantine/charts';
import { data } from './data';
import classes from './Demo.module.css';

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