DonutChart based on PieChart
DonutChart is based on the PieChart recharts component.
charts/donut-chart
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
DonutChart withLegend prop
Set the withLegend prop to display the legend, which shows the name and color of each segment. Hover over a legend item to highlight the corresponding segment.
DonutChart legendProps prop
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.
DonutChart withLabels prop
Set the withLabels prop to display labels next to each segment.
DonutChart size prop and automatic height adjustment
Set the size prop to control the width and height of the chart. If the withLabels prop is set, the chart height is automatically increased by 80px to make room for labels. You can override this behavior by setting the h style prop.
DonutChart paddingAngle prop
Use the paddingAngle prop to control the space between segments.
DonutChart segment color from theme
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.
DonutChart tooltipDataSource 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".
DonutChart withTooltip prop
To remove the tooltip, set withTooltip={false}.
DonutChart chartLabel prop
To display a label in the center of the chart, use the chartLabel prop. It accepts a string or a number.
DonutChart startAngle and endAngle props
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}. Even when these props are set, the chart still takes the same amount of space as if it were a full circle.
DonutChart strokeWidth prop
Use the strokeWidth prop to control the width of the stroke around each segment.
DonutChart strokeColor prop
Use the strokeColor prop to change the color of the stroke. 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. 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.
DonutChart strokeColor example
import { DonutChart } from '@mantine/charts'; function Demo() { return <DonutChart data={[]} strokeColor="red.5" />; }