RadzenChart Class

A versatile chart component for visualizing data through various chart types including line, area, column, bar, pie, and donut series. RadzenChart supports multiple series, customizable axes, legends, tooltips, data labels, markers, and interactive features. Container for one or more chart series components. Each series (RadzenLineSeries, RadzenColumnSeries, RadzenAreaSeries, etc.) defines how data is visualized. Supports Cartesian charts (Line, Area, Column, Bar, StackedColumn, StackedBar, StackedArea with X/Y axes), Pie charts (Pie and Donut series for showing proportions), customization of color schemes/axis configuration/grid lines/legends/tooltips/data labels/markers, interactive click events on series and legend items with hover tooltips, annotations including trend lines/mean/median/mode lines/value annotations, and responsive design that automatically adapts to container size. Series are defined as child components within the RadzenChart. Configure axes using RadzenCategoryAxis and RadzenValueAxis, customize the legend with RadzenLegend, and add tooltips with RadzenChartTooltipOptions.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenChart

RadzenSparkline

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenChart : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic column chart:

<RadzenChart>
    <RadzenColumnSeries Data=@revenue CategoryProperty="Quarter" Title="Revenue" ValueProperty="Revenue" />
</RadzenChart>
@code {
    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }
    DataItem[] revenue = new DataItem[]
    {
        new DataItem { Quarter = "Q1", Revenue = 234000 },
        new DataItem { Quarter = "Q2", Revenue = 284000 },
        new DataItem { Quarter = "Q3", Revenue = 274000 },
        new DataItem { Quarter = "Q4", Revenue = 294000 }
    };
}

Chart with multiple series and custom legend:

<RadzenChart>
    <RadzenLineSeries Data=@sales2023 CategoryProperty="Month" ValueProperty="Amount" Title="2023 Sales" />
    <RadzenLineSeries Data=@sales2024 CategoryProperty="Month" ValueProperty="Amount" Title="2024 Sales" />
    <RadzenLegend Position="LegendPosition.Bottom" />
    <RadzenCategoryAxis Formatter="@(value => value.ToString())" />
    <RadzenValueAxis Formatter="@(value => value.ToString("C"))" />
</RadzenChart>

Constructors

RadzenChartlink

A versatile chart component for visualizing data through various chart types including line, area, column, bar, pie, and donut series. RadzenChart supports multiple series, customizable axes, legends, tooltips, data labels, markers, and interactive features. Container for one or more chart series components. Each series (RadzenLineSeries, RadzenColumnSeries, RadzenAreaSeries, etc.) defines how data is visualized. Supports Cartesian charts (Line, Area, Column, Bar, StackedColumn, StackedBar, StackedArea with X/Y axes), Pie charts (Pie and Donut series for showing proportions), customization of color schemes/axis configuration/grid lines/legends/tooltips/data labels/markers, interactive click events on series and legend items with hover tooltips, annotations including trend lines/mean/median/mode lines/value annotations, and responsive design that automatically adapts to container size. Series are defined as child components within the RadzenChart. Configure axes using RadzenCategoryAxis and RadzenValueAxis, customize the legend with RadzenLegend, and add tooltips with RadzenChartTooltipOptions.

Declaration
public RadzenChart()

Properties

ChildContentlink

Gets or sets the child content. Used to specify series and other configuration.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the child content. Used to specify series and other configuration.

ClickTolerancelink

The minimum pixel distance from a data point to the mouse cursor required for the SeriesClick event to fire. Set to 25 by default.

Declaration
public int ClickTolerance { get; set; }
Property Value
Type Description
intThe minimum pixel distance from a data point to the mouse cursor required for the SeriesClick event to fire. Set to 25 by default.

ColorSchemelink

Gets or sets the color scheme used to assign colors to chart series. Determines the palette of colors applied sequentially to each series when series-specific colors are not set. Available schemes include Pastel (default), Palette, Monochrome, and custom color schemes.

Declaration
public ColorScheme ColorScheme { get; set; }
Property Value
Type Description
ColorSchemeGets or sets the color scheme used to assign colors to chart series. Determines the palette of colors applied sequentially to each series when series-specific colors are not set. Available schemes include Pastel (default), Palette, Monochrome, and custom color schemes.

Heightlink

Gets the runtime height of the chart.

Declaration
protected double? Height { get; set; }
Property Value
Type Description
double?Gets the runtime height of the chart.

LegendClicklink

Gets or sets the callback invoked when a user clicks on a legend item. Useful for implementing custom behaviors like toggling series visibility or filtering data.

Declaration
public EventCallback<LegendClickEventArgs> LegendClick { get; set; }
Property Value
Type Description
EventCallback<LegendClickEventArgs>Gets or sets the callback invoked when a user clicks on a legend item. Useful for implementing custom behaviors like toggling series visibility or filtering data.

MarginBottomlink

Gets or sets the bottom margin of the plot area.

Declaration
protected double MarginBottom { get; set; }
Property Value
Type Description
doubleGets or sets the bottom margin of the plot area.

MarginLeftlink

Gets or sets the left margin of the plot area.

Declaration
protected double MarginLeft { get; set; }
Property Value
Type Description
doubleGets or sets the left margin of the plot area.

MarginRightlink

Gets or sets the right margin of the plot area.

Declaration
protected double MarginRight { get; set; }
Property Value
Type Description
doubleGets or sets the right margin of the plot area.

MarginToplink

Gets or sets the top margin of the plot area.

Declaration
protected double MarginTop { get; set; }
Property Value
Type Description
doubleGets or sets the top margin of the plot area.

SeriesClicklink

Gets or sets the callback invoked when a user clicks on a data point or segment in a chart series. Provides information about the clicked series, data item, and value in the event arguments.

Declaration
public EventCallback<SeriesClickEventArgs> SeriesClick { get; set; }
Property Value
Type Description
EventCallback<SeriesClickEventArgs>Gets or sets the callback invoked when a user clicks on a data point or segment in a chart series. Provides information about the clicked series, data item, and value in the event arguments.

TooltipTolerancelink

The minimum pixel distance from a data point to the mouse cursor required by the tooltip to show. Set to 25 by default.

Declaration
public int TooltipTolerance { get; set; }
Property Value
Type Description
intThe minimum pixel distance from a data point to the mouse cursor required by the tooltip to show. Set to 25 by default.

Widthlink

Gets the runtime width of the chart.

Declaration
protected double? Width { get; set; }
Property Value
Type Description
double?Gets the runtime width of the chart.

Methods

BuildRenderTreelink

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

Clicklink

Invoked via interop when the user clicks the RadzenChart. Raises the SeriesClick handler.

Declaration
public Task Click(double x, double y)
Parameters
Type Name Description
double x The x.
double y The y.
Returns
Type Description
Task

DisplayTooltipForlink

Displays a Tooltip on a chart without user interaction, given a series, and the data associated with it.

Declaration
public Task DisplayTooltipFor(IChartSeries series, object data)
Parameters
Type Name Description
IChartSeries series
object data
Returns
Type Description
Task

Disposelink

Declaration
public override void Dispose()

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetSerieslink

Returns the Series used by the Chart.

Declaration
public IReadOnlyList<IChartSeries> GetSeries()
Returns
Type Description
IReadOnlyList<IChartSeries>

MouseMovelink

Invoked via interop when the user moves the mouse over the RadzenChart. Displays the tooltip.

Declaration
public Task MouseMove(double x, double y)
Parameters
Type Name Description
double x The x.
double y The y.
Returns
Type Description
Task

OnAfterRenderAsynclink

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender
Returns
Type Description
Task

OnInitializedlink

Declaration
protected override void OnInitialized()

Reloadlink

Causes all series to refresh. Use it when Data has changed.

Declaration
public Task Reload()
Returns
Type Description
Task

Resizelink

Invoked via interop when the RadzenChart resizes. Display the series with the new dimensions.

Declaration
public Task Resize(double width, double height)
Parameters
Type Name Description
double width The width.
double height The height.
Returns
Type Description
Task

SetParametersAsynclink

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task

ShouldRenderAxeslink

Returns whether the chart should render axes.

Declaration
protected bool ShouldRenderAxes()
Returns
Type Description
bool

UpdateScaleslink

Updates the scales based on the configuration.

Declaration
protected virtual bool UpdateScales()
Returns
Type Description
bool
In This Article
An error has occurred. This app may no longer respond until reloaded. Reload 🗙