Pie Chart

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

export default Layout(MDX_DATA.PieChart);

Usage

PieChart is based on the PieChart recharts component:

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

Size

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

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.

To enable the tooltip, set the withTooltip prop:

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

Start and end angle

Use the 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}:

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

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 { PieChart } from '@mantine/charts';

function Demo() {
  return <PieChart 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: