Blazor DoughnutChart component

Comprehensive API documentation for the Blazor DoughnutChart component, including configuration options, parameters, methods, events, child component parameters, and model properties.

Demos
Blazor Doughnut Chart - API Documentation

Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
ContainerClass string null Gets or sets the CSS class name for the container element. 1.0.0
ContainerStyle string null Gets or sets the CSS style string applied to the container element. 1.0.0
Height int? null Gets or sets chart container height. 1.0.0
HeightUnit Unit Px Gets or sets chart container height unit of measure. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
IsContainerFluid bool False Gets or sets a value indicating whether the container is fluid. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0
Width int? null Gets or sets chart container width. 1.0.0
WidthUnit Unit Px Gets or sets chart container width unit of measure. 1.0.0

Methods #

Name Return type Description Added Version
AddDataAsync(char chartData,string dataLabel,char data) Task<ChartData> Asynchronously adds a new data entry to the specified chart data. 1.0.0
AddDataAsync(char chartData,string dataLabel,IReadOnlyCollection`1 data) Task<ChartData> Asynchronously adds a new dataset to the specified chart data. 1.0.0
AddDatasetAsync(char chartData,char chartDataset,char chartOptions) Task<ChartData> Asynchronously adds a dataset to the specified chart data. 1.0.0
InitializeAsync(char chartData,char chartOptions,string plugins) Task Asynchronously initializes the chart with the specified data and options. 1.0.0
UpdateAsync(char chartData,char chartOptions) Task Asynchronously updates the chart with the specified data and options. 1.0.0

ChartData Properties #

Name Type Default Required Description Added Version
Datasets List<IChartDataset>? null Gets or sets the collection of datasets to be displayed in the chart. 1.0.0
Labels List<string>? null Gets or sets the labels for the chart, typically used for the x-axis or categories. 1.0.0

DoughnutChartDataset Properties #

Name Type Default Required Description Added Version
Animation char null Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes. 1.2.0
BackgroundColor List<string>? rgba(0, 0, 0, 0.1) Arc background color. 1.0.0
BorderAlign List<string>? center Supported values are center and inner. When center is set, the borders of arcs next to each other will overlap. When inner is set, it is guaranteed that all borders will not overlap. 1.0.0
BorderColor List<string>? #fff Arc border color. 1.0.0
BorderDash List<double>? null Arc border length and spacing of dashes. 1.0.0
BorderDashOffset double 0.0 Arc border offset for line dashes. 1.0.0
BorderJoinStyle List<string>? null Arc border join style. Supported values are round, bevel, and miter. 1.0.0
BorderRadius List<double>? 0 It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). 1.0.0
BorderWidth List<double>? 2 Arc border width (in pixels). 1.0.0
Circumference double? null Per-dataset override for the sweep that the arcs cover. 1.0.0
Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0
Data List<TData>? null Get or sets the Data. 1.0.0
Datalabels DoughnutChartDatasetDataLabels new() Gets or sets the data labels configuration for the doughnut chart dataset. Use this property to customize the display of data labels, such as their font, color, alignment, and visibility, for the doughnut chart dataset. 1.0.0
Hidden bool False Configure the visibility of the dataset. Setting Hidden to true will prevent the dataset from being rendered in the Chart. 1.0.0
HoverBackgroundColor List<string>? null Arc background color when hovered. 1.0.0
HoverBorderColor List<string>? null Arc border color when hovered. 1.0.0
HoverBorderDash List<double>? null Arc border length and spacing of dashes when hovered. 1.0.0
HoverBorderDashOffset double? null Arc border offset for line dashes when hovered. 1.0.0
HoverBorderJoinStyle List<string>? null Arc border join style when hovered. Supported values are round, bevel, and miter. 1.0.0
HoverBorderWidth List<double>? null Arc border width when hovered (in pixels). 1.0.0
HoverOffset List<double>? 0 Arc offset when hovered (in pixels). 1.0.0
Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0
Offset List<double>? 0 Arc offset (in pixels). 1.0.0
Oid Guid Guid.NewGuid() Gets the unique object identifier for this dataset instance. This value is auto-generated when the dataset is created. 1.0.0
Order int 0 The drawing order of dataset. Also affects order for stacking, tooltip and legend. 1.0.0
Rotation double? null Per-dataset override for the starting angle to draw arcs from. 1.0.0
Spacing double 0 Fixed arc offset (in pixels). Similar to Offset but applies to all arcs. 1.0.0
Type string null Gets or sets the chart type. This value is auto-set based on the chart type. 1.0.0
Weight double 1 The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values. 1.0.0

DoughnutChartDatasetData Properties #

Name Type Default Required Description Added Version
BackgroundColor string? null 1.0.0
Data object? null Gets the data value or values for the dataset. 1.0.0
DatasetLabel string? null Gets the label for the dataset this data belongs to. 1.0.0

DoughnutChartDatasetDataLabels Properties #

Name Type Default Required Description Added Version
Alignment DataLabelAlignment Center Gets or sets the data labels alignment. 1.0.0
Anchor DataLabelAnchor Center Gets or sets the data labels anchor. 1.0.0
BackgroundColor string null Gets or sets the data label background color. 1.0.0
BorderColor string null Gets or sets the data label border color. 1.0.0
BorderWidth double 2 Gets or sets the width of the border. 1.0.0
DataLabelsAlignmentAsString string? null Gets the data labels alignment as a string. 1.0.0
DataLabelsAnchorAsString string? null Gets the data labels anchor as a string. 1.0.0

DoughnutChartOptions Properties #

Name Type Default Required Description Added Version
Animation char null Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes. 1.2.0
Locale string? By default, the chart is using the default locale of the platform which is running on. Gets or sets the locale for the chart. 1.0.0
MaintainAspectRatio bool True Gets or sets a value indicating whether to maintain the original canvas aspect ratio (width / height) when resizing. 1.0.0
Plugins char null
Responsive bool True Gets or sets a value indicating whether the chart canvas should resize when its container does. 1.0.0
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!