Pie Chart Component

The Pie Chart component displays data in a circular chart format. It supports both pie and donut charts, with customizable colors, labels, legends, and tooltips.

Basic Pie Chart

Donut Chart with Custom Colors

Chart without Labels

Component Usage


<BosuiPieChart Data="chartData" Width="400" Height="400" />

<BosuiPieChart 
    Data="donutData" 
    Width="400" 
    Height="400"
    InnerRadius="80"
    LegendPosition="bottom"
    OnSliceClick="HandleSliceClick" />

Component Properties

Property	Type	Default	Description
Data	IEnumerable<PieChartDataItem>	null	Collection of data items to display in the chart.
Width	int	400	Width of the chart in pixels.
Height	int	400	Height of the chart in pixels.
InnerRadius	double	0	Inner radius for donut charts. Set to 0 for pie charts.
ShowLabels	bool	true	Whether to show percentage labels on slices.
ShowLegend	bool	true	Whether to show the legend.
LegendPosition	string	"right"	Position of the legend: "right", "left", "top", "bottom".
OnSliceClick	EventCallback<PieChartDataItem>	-	Event triggered when a slice is clicked.