Pie Chart
The Blazor Pie chart displays the data as sectors from a two-dimensional circle and is therefore useful for displaying data as parts of a whole. There can only be one series in a pie chart.
Pie chart. Results from the first code snippet below
This article assumes you are familiar with the chart basics and data binding.
To create a pie chart:
- add a
ChartSeriesto theChartSeriesItemscollection - set its
Typeproperty toChartSeriesType.Pie - provide a data model collection to its
Dataproperty - set the
FieldandCategoryFieldproperties to the corresponding fields in the model that carry the values and names that will be shown in the legend
If you use simple data binding and only provide values, the chart will not render a legend.
A pie chart that shows product revenues
Rotation
By default, the first segment starts at the top. You can change that by using the StartAngle property of the series.
Color Field
You can control the color of the individual segments of the pie chart by providing a string with the desired color in the model, and setting the ColorField of the series to it. You can pass a valid CSS color (for example, #abcdef, #f00, or blue).
Exploded Segment
You can have some of the segments of the pie separated from the rest of the circle with a small margin. This helps bring attention to them as outliers or as important bits that the viewer should focus on.
To explode (separate) a segment, use the ExplodeField property of the series and set it to a boolean field that indicates whether the segment is exploded. Only a true value explodes a segment, so you can use a nullable field as well and only provide values for the items you want separated.
Exploded Items
Visible In Legend
You can hide certain segments from the legend (for example, if their contribution is insignificantly small). To do this, add a boolean field to the model and set its name to the VisibleInLegendField property of the pie series. The flags in this field will denote whether the particular item will be rendered in the legend.
Hide segments from the legend
Width and Height
The main part of the Pie Chart is a circle. Thus, you may need to set both the Width and Height parameters to achieve the desired layout and dimensions. By default, the Chart container <div> expands horizontally to 100% and the height is set to "400px" in the CSS theme.
Setting Pie Chart Width and Height
Other Settings
Customize Chart Elements - Nested Tags Settings
When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be <Chart*Category**Specifics*> where the Category can be one of the following:
- CategoryAxis
- ChartArea
- Legend
- PlotArea
- SeriesItems
- Title
- Tooltip
- ValueAxis
- XAxes
- YAxes
- and others
To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the
ChartSeriestag has aChartSeriesLabelstag that exposes configuration options and more child tags.
For example, for axis-free charts you can rotate their Labels, Title, Legend and others. Example for doing so is customizing the Chart Series Labels by using the parameters in the
ChartSeriesItems > ChartSeries > ChartSeriesLabels tag and its child tags.
This approach is not limited only to the Labels - it can be used with to all tags that are applicable for the chart type, for example the Chart Title ChartTitle > ChartTitleMargin.