Blazor Toolkit
Overview

A Column Chart visually represents data using vertical columns, making it easy to compare values across different categories or time periods. To visualize data as a Column Chart, set the Type property to ChartSeriesType.Column within the ChartSeries component.

Data Label

Data labels display the actual values directly on columns, improving readability and reducing the need to refer to axes. To display data labels on the column Chart, set the Visible property to true within the ChartDataLabel component.

Stacking Column

A Stacking Column Chart displays multiple data series as segments within one column, where each segment represents a part of the total and uses different colors for clarity. To visualize data as a Stacking Column Chart, set the Type property to ChartSeriesType.StackingColumn within the ChartSeries component.

Stacking Labels

Stacking Labels display the total value of stacked columns, improving readability of cumulative data. This is enabled using the ChartStackLabelSettings component with the Visible property set to true.

Stacking Group

A stacking group allows multiple independent stacks within the same category by grouping series together, enabling side‑by‑side comparison of different stacked datasets. To group stacked columns together, assign the same value to the StackingGroup property of the ChartSeries component.

100% Stacking Column

A 100% Stacking Column Chart scales each column to 100%, focusing on percentage contribution rather than absolute values, which is useful for comparing composition across categories. To visualize data as a percentage-based Stacking Column Chart, set the Type property to ChartSeriesType.StackingColumn100 within the ChartSeries component.

Column Placement

Column placement controls the position and alignment of columns within a category axis. This is achieved by setting EnableSideBySidePlacement="false" on the SfChart and adjusting the ColumnWidth of the ChartSeries.

Negative Data

Negative data values are represented by columns extending in the opposite direction of the baseline, clearly visualizing losses, reductions, or below‑zero performance. No specific API is required; simply providing negative values in the data source renders them below the baseline.

Column Drilldown

Column drilldown enables clicking a column to load or display detailed data related to that data point. This can be achieved by utilizing the OnPointClick event of the SfChart component.

Grouping Column

A grouped Column Chart places columns next to each other for each category, making it easy to compare multiple series values directly without stacking. You can achieve this by assigning identical values to the GroupName property across multiple ChartSeries.

Column With Track

A column with track includes a background column indicating the total or target value, while the foreground column shows the actual progress or achievement. This is achieved by overlaying two ChartSeries components of type ChartSeriesType.Column and setting EnableSideBySidePlacement="false" on the SfChart.

Customizing Column Spacing And Width

Customizing column spacing and width controls the gap and thickness of columns, improving readability and optimizing the visual balance of the Chart layout. The spacing and width of columns can be customized using the ColumnSpacing and ColumnWidth properties in the ChartSeries component.

Column Width In Pixels

Column width in pixels allows precise control over the thickness of columns, ensuring consistent appearance across different screens and layouts. To set a fixed column width, specify a pixel value for the ColumnWidthInPixel property in the ChartSeries component.

Series Customization

Series customization allows control over each data series' appearance and behavior, including color, labels, stacking, and visibility for better emphasis and clarity. Each column series can be customized individually using properties such as Fill, Opacity, and ChartCornerRadius inside ChartSeries.

Customizing Data Point Colors

Customizing data point colors enables individual columns or segments to have specific colors, helping highlight important values, exceptions, or conditions. To apply different colors for individual data points, map a color field using the PointColorMapping property in ChartSeries.

Data Source Update

The Chart automatically updates when the data source is changed, allowing for real-time data visualization. This can be accompanied by an animation by configuring the ChartSeriesAnimation component inside ChartSeries.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.