Blazor BarChart component
Comprehensive API documentation for the Blazor BarChart component, including configuration options, parameters, methods, events, child component parameters, and model properties.
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 |
BarChartDataset 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) | Gets or sets the bar background color. | 1.0.0 | |
| BarPercentage | double | 0.9 | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. | 1.0.0 | |
| BarThickness | double? | null | Gets or sets the width of each bar, in pixels. When this is enforced, BarPercentage and CategoryPercentage are ignored. |
1.0.0 | |
| BorderColor | List<string>? | rgba(0, 0, 0, 0.1) | The bar border color. | 1.0.0 | |
| BorderRadius | List<double>? | 0 | The bar border radius (in pixels). | 1.0.0 | |
| BorderSkipped | Object | start | This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. In general, this does not need to be changed except when creating chart types that derive from a bar chart. Supported values are start, end, middle, bottom, left, top, right, false, and true. |
1.2.0 | |
| BorderWidth | List<double>? | 0 | The bar border width (in pixels). | 1.0.0 | |
| CategoryPercentage | double | 0.8 | Percent (0-1) of the available width each category should be within the sample width. | 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 | BarChartDatasetDataLabels | new() | Gets or sets the data labels configuration for the bar chart dataset. This property allows customization of data labels, such as their appearance, positioning, and formatting. If not set, the default configuration will be used. | 1.0.0 | |
| Grouped | bool | True | Should the bars be grouped on index axis. When true, all the datasets at same index value will be placed next to each other centering on that index value. When false, each bar is placed on its actual index-axis value. | 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 | The bar background color when hovered. | 1.0.0 | |
| HoverBorderColor | List<string>? | null | The bar border color when hovered. | 1.0.0 | |
| HoverBorderRadius | List<double>? | 0 | The bar border radius when hovered (in pixels). | 1.0.0 | |
| HoverBorderWidth | List<double>? | 1 | The bar border width when hovered (in pixels). | 1.0.0 | |
| IndexAxis | string? | x | The base axis of the dataset. 'x' for vertical bars and 'y' for horizontal bars. | 1.0.0 | |
| Label | string | null | The label for the dataset which appears in the legend and tooltips. | 1.0.0 | |
| MaxBarThickness | double? | null | Set this to ensure that bars are not sized thicker than this. | 1.0.0 | |
| MinBarLength | double? | null | Set this to ensure that bars have a minimum length 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 | |
| SkipNull | bool | False | If true, null or undefined values will not be used for spacing calculations when determining bar size. | 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 | |
| XAxisID | string? | null | The ID of the x-axis to plot this dataset on. | 1.0.0 | |
| YAxisID | string? | null | The ID of the y-axis to plot this dataset on. | 1.0.0 |
BarChartDatasetData Properties #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| 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 |
BarChartDatasetDataLabels 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 |
BarChartOptions 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 | |
| IndexAxis | string? | null | Gets or sets the base axis of the chart. Use 'x' for vertical charts and 'y' for horizontal charts. Supported values are 'x' and 'y'. | 1.0.0 | |
| Interaction | Interaction | null | Gets or sets the interaction options for the bar chart. | 1.0.0 | |
| Layout | ChartLayout | null | Gets or sets the layout options for the bar chart. | 1.0.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 | BarChartPlugins | null | Gets or sets the plugins configuration for the bar chart. | 1.0.0 | |
| Responsive | bool | True | Gets or sets a value indicating whether the chart canvas should resize when its container does. | 1.0.0 | |
| Scales | Scales | null | Gets or sets the scales configuration for the bar chart. | 1.0.0 |