Class RadzenColumnSeries<TItem>

A chart series that displays data as vertical columns (bars) in a RadzenChart. RadzenColumnSeries is ideal for comparing values across categories or showing trends over time with discrete data points. Renders vertical rectangles where the height represents the data value. Multiple column series in the same chart are displayed side-by-side for each category. Supports fill color/stroke color/width customization with individual column colors via Fills/Strokes, dynamic coloring based on value ranges using FillRange and StrokeRange, optional value labels on top of columns, interactive tooltips showing category/value/series name, and click event handling for drill-down scenarios. Use CategoryProperty to specify the X-axis field and ValueProperty for the column height (Y-axis value).

Inheritance
object
ComponentBase
RadzenChartComponentBase
CartesianSeries<TItem>
RadzenColumnSeries<TItem>
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenColumnSeries<TItem> : CartesianSeries<TItem>, IComponent, IHandleEvent, IHandleAfterRender, IChartSeries, IDisposable, IChartColumnSeries
Type Parameters
Name Description
TItem

The type of data items in the series. Each item represents one column in the chart.
Examples

Basic column series:

<RadzenChart>
    <RadzenColumnSeries Data=@revenue CategoryProperty="Quarter" ValueProperty="Amount" Title="Revenue" />
</RadzenChart>

Multiple column series with custom colors:

<RadzenChart>
    <RadzenColumnSeries Data=@sales2023 CategoryProperty="Month" ValueProperty="Total" Title="2023" Fill="#4169E1" />
    <RadzenColumnSeries Data=@sales2024 CategoryProperty="Month" ValueProperty="Total" Title="2024" Fill="#32CD32" />
</RadzenChart>

Constructors

RadzenColumnSeries()

A chart series that displays data as vertical columns (bars) in a RadzenChart. RadzenColumnSeries is ideal for comparing values across categories or showing trends over time with discrete data points. Renders vertical rectangles where the height represents the data value. Multiple column series in the same chart are displayed side-by-side for each category. Supports fill color/stroke color/width customization with individual column colors via Fills/Strokes, dynamic coloring based on value ranges using FillRange and StrokeRange, optional value labels on top of columns, interactive tooltips showing category/value/series name, and click event handling for drill-down scenarios. Use CategoryProperty to specify the X-axis field and ValueProperty for the column height (Y-axis value).

Declaration
public RadzenColumnSeries()
Examples

Basic column series:

<RadzenChart>
    <RadzenColumnSeries Data=@revenue CategoryProperty="Quarter" ValueProperty="Amount" Title="Revenue" />
</RadzenChart>

Multiple column series with custom colors:

<RadzenChart>
    <RadzenColumnSeries Data=@sales2023 CategoryProperty="Month" ValueProperty="Total" Title="2023" Fill="#4169E1" />
    <RadzenColumnSeries Data=@sales2024 CategoryProperty="Month" ValueProperty="Total" Title="2024" Fill="#32CD32" />
</RadzenChart>

Properties

Color

Gets the color.

Declaration
public override string Color { get; }
Property Value
Type Description
string

The color.
Overrides

Fill

Gets or sets the fill (background) color applied to all columns in the series. Supports any valid CSS color value. If not set, uses the color scheme's default color.

Declaration
[Parameter]
public string Fill { get; set; }
Property Value
Type Description
string

The fill color as a CSS color value.

FillRange

Gets or sets value-based color ranges that dynamically color columns based on their values. Allows conditional coloring (e.g., red for negative values, green for positive). Each range specifies a min/max value and a color to apply to columns within that range.

Declaration
[Parameter]
public IList<SeriesColorRange> FillRange { get; set; }
Property Value
Type Description
IList<SeriesColorRange>

A collection of value ranges and their associated fill colors.

Fills

Gets or sets a collection of fill colors to apply to individual columns in sequence. Each column gets the color at its index position, allowing rainbow or gradient-like effects. Takes precedence over the Fill property.

Declaration
[Parameter]
public IEnumerable<string> Fills { get; set; }
Property Value
Type Description
IEnumerable<string>

An enumerable collection of CSS color values.

LineType

Gets or sets the line style for column borders (solid, dashed, dotted). Only applicable if stroke is enabled.

Declaration
[Parameter]
public LineType LineType { get; set; }
Property Value
Type Description
LineType

The line type. Default is solid.

Stroke

Gets or sets the stroke (border) color applied to all columns in the series. If not set, columns render without borders.

Declaration
[Parameter]
public string Stroke { get; set; }
Property Value
Type Description
string

The stroke color as a CSS color value.

StrokeRange

Gets or sets value-based color ranges that dynamically color column borders based on their values. Works similarly to FillRange but affects the stroke color instead of fill.

Declaration
[Parameter]
public IList<SeriesColorRange> StrokeRange { get; set; }
Property Value
Type Description
IList<SeriesColorRange>

A collection of value ranges and their associated stroke colors.

StrokeWidth

Gets or sets the width of the column border in pixels. Only visible if Stroke or Strokes is specified.

Declaration
[Parameter]
public double StrokeWidth { get; set; }
Property Value
Type Description
double

The stroke width in pixels. Default is 0 (no border).

Strokes

Gets or sets a collection of stroke colors to apply to individual column borders in sequence. Each column border gets the color at its index position. Takes precedence over the Stroke property.

Declaration
[Parameter]
public IEnumerable<string> Strokes { get; set; }
Property Value
Type Description
IEnumerable<string>

An enumerable collection of CSS color values for borders.

Methods

BuildRenderTree(RenderTreeBuilder)

A chart series that displays data as vertical columns (bars) in a RadzenChart. RadzenColumnSeries is ideal for comparing values across categories or showing trends over time with discrete data points. Renders vertical rectangles where the height represents the data value. Multiple column series in the same chart are displayed side-by-side for each category. Supports fill color/stroke color/width customization with individual column colors via Fills/Strokes, dynamic coloring based on value ranges using FillRange and StrokeRange, optional value labels on top of columns, interactive tooltips showing category/value/series name, and click event handling for drill-down scenarios. Use CategoryProperty to specify the X-axis field and ValueProperty for the column height (Y-axis value).

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

Contains(double, double, double)

Determines if the series contains the specified coordinates with a given tolerance.

Declaration
public override bool Contains(double x, double y, double tolerance)
Parameters
Type Name Description
double x

The x.
double y

The y.
double tolerance

The tolerance.
Returns
Type Description
bool

true if the series contains the coordinates; otherwise, false.
Overrides

DataAt(double, double)

Returns the data at the specified coordinates;

Declaration
public override (object, Point) DataAt(double x, double y)
Parameters
Type Name Description
double x

The x.
double y

The y.
Returns
Type Description
(object, Point)
Overrides

GetDataLabels(double, double)

Returns data chart position

Declaration
public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
Parameters
Type Name Description
double offsetX
double offsetY
Returns
Type Description
IEnumerable<ChartDataLabel>
Overrides

Render(ScaleBase, ScaleBase)

Renders the series with the specified category and value scales.

Declaration
public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
Parameters
Type Name Description
ScaleBase categoryScale

The category scale.
ScaleBase valueScale

The value scale.
Returns
Type Description
RenderFragment

RenderFragment.
Overrides

TooltipStyle(TItem)

Gets the tooltip inline style.

Declaration
protected override string TooltipStyle(TItem item)
Parameters
Type Name Description
TItem item

The item.
Returns
Type Description
string
Overrides

Implements

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

Learn More

Download Now