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 to this section

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

AllowPanLink to this section

Gets or sets whether pan via scrollbar is enabled.

Declaration
public bool AllowPan { get; set; }
Property Value
Type Description
boolGets or sets whether pan via scrollbar is enabled.

AllowSeriesHoverLink to this section

Gets or sets a value indicating whether series highlight on hover is enabled. When true, hovering over a series or its legend item highlights the series and dims the others.

Declaration
public bool AllowSeriesHover { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether series highlight on hover is enabled. When true, hovering over a series or its legend item highlights the series and dims the others.

AllowZoomLink to this section

Gets or sets whether mouse wheel zoom is enabled.

Declaration
public bool AllowZoom { get; set; }
Property Value
Type Description
boolGets or sets whether mouse wheel zoom is enabled.

AnimateLink to this section

Gets or sets a value indicating whether series animate when the chart first renders. Series are revealed with a left-to-right wipe. The animation respects the user's reduced motion preference.

Declaration
public bool Animate { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether series animate when the chart first renders. Series are revealed with a left-to-right wipe. The animation respects the user's reduced motion preference.

AnimateDataUpdatesLink to this section

Gets or sets a value indicating whether line and area series morph smoothly when their data changes. Best suited for live dashboards where values update in place. Not applied while zooming or panning. Supported in Chromium and Firefox; other browsers update instantly.

Declaration
public bool AnimateDataUpdates { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether line and area series morph smoothly when their data changes. Best suited for live dashboards where values update in place. Not applied while zooming or panning. Supported in Chromium and Firefox; other browsers update instantly.

AnimationDurationLink to this section

Gets or sets the duration of the initial render animation in milliseconds.

Declaration
public double AnimationDuration { get; set; }
Property Value
Type Description
doubleGets or sets the duration of the initial render animation in milliseconds.

ChildContentLink to this section

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 to this section

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 to this section

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 to this section

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 to this section

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 to this section

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 to this section

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 to this section

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 to this section

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.

MouseMoveThrottleLink to this section

Gets or sets the minimum interval in milliseconds between mouse move notifications which drive the tooltip, crosshair and hover tracking. Mouse moves are coalesced to animation frames; this value imposes an additional delay between dispatches. Defaults to 0 (every animation frame) on WebAssembly and 50 on Blazor Server to limit SignalR traffic.

Declaration
public int? MouseMoveThrottle { get; set; }
Property Value
Type Description
int?Gets or sets the minimum interval in milliseconds between mouse move notifications which drive the tooltip, crosshair and hover tracking. Mouse moves are coalesced to animation frames; this value imposes an additional delay between dispatches. Defaults to 0 (every animation frame) on WebAssembly and 50 on Blazor Server to limit SignalR traffic.

SeriesClickLink to this section

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.

SyncGroupLink to this section

Gets or sets the synchronization group of the chart. Charts which share the same group display a synchronized crosshair and active data points: hovering one chart highlights the same category in the others. Charts in a group should plot the same kind of category (e.g. the same dates).

Declaration
public string SyncGroup { get; set; }
Property Value
Type Description
stringGets or sets the synchronization group of the chart. Charts which share the same group display a synchronized crosshair and active data points: hovering one chart highlights the same category in the others. Charts in a group should plot the same kind of category (e.g. the same dates).

TooltipToleranceLink to this section

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.

ViewChangeLink to this section

Gets or sets the callback invoked when the visible range changes due to zoom or pan. Provides the current zoom level and visible range fractions.

Declaration
public EventCallback<ChartViewChangeEventArgs> ViewChange { get; set; }
Property Value
Type Description
EventCallback<ChartViewChangeEventArgs>Gets or sets the callback invoked when the visible range changes due to zoom or pan. Provides the current zoom level and visible range fractions.

ViewEndLink to this section

Gets or sets the end of the visible range as a fraction (0-1) of the full category range. Supports two-way binding with @bind-ViewEnd.

Declaration
public double ViewEnd { get; set; }
Property Value
Type Description
doubleGets or sets the end of the visible range as a fraction (0-1) of the full category range. Supports two-way binding with @bind-ViewEnd.

ViewEndChangedLink to this section

Gets or sets the callback invoked when the visible range end changes due to user interaction. Used for two-way binding with @bind-ViewEnd.

Declaration
public EventCallback<double> ViewEndChanged { get; set; }
Property Value
Type Description
EventCallback<double>Gets or sets the callback invoked when the visible range end changes due to user interaction. Used for two-way binding with @bind-ViewEnd.

ViewStartLink to this section

Gets or sets the start of the visible range as a fraction (0-1) of the full category range. Supports two-way binding with @bind-ViewStart.

Declaration
public double ViewStart { get; set; }
Property Value
Type Description
doubleGets or sets the start of the visible range as a fraction (0-1) of the full category range. Supports two-way binding with @bind-ViewStart.

ViewStartChangedLink to this section

Gets or sets the callback invoked when the visible range start changes due to user interaction. Used for two-way binding with @bind-ViewStart.

Declaration
public EventCallback<double> ViewStartChanged { get; set; }
Property Value
Type Description
EventCallback<double>Gets or sets the callback invoked when the visible range start changes due to user interaction. Used for two-way binding with @bind-ViewStart.

WidthLink to this section

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.

ZoomLink to this section

Gets or sets the zoom level as a percentage. A value of 100 means no zoom (full range visible). Higher values zoom in (e.g., 200 shows half the range, 400 shows a quarter). Set to 100 to reset zoom. Supports two-way binding with @bind-Zoom.

Declaration
public double Zoom { get; set; }
Property Value
Type Description
doubleGets or sets the zoom level as a percentage. A value of 100 means no zoom (full range visible). Higher values zoom in (e.g., 200 shows half the range, 400 shows a quarter). Set to 100 to reset zoom. Supports two-way binding with @bind-Zoom.

ZoomChangedLink to this section

Gets or sets the callback invoked when the zoom level changes due to user interaction (mouse wheel or pan). Used for two-way binding with @bind-Zoom.

Declaration
public EventCallback<double> ZoomChanged { get; set; }
Property Value
Type Description
EventCallback<double>Gets or sets the callback invoked when the zoom level changes due to user interaction (mouse wheel or pan). Used for two-way binding with @bind-Zoom.

Methods

BuildRenderTreeLink to this section

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

ClickLink to this section

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 to this section

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 to this section

Declaration
public override void Dispose()

GetComponentCssClassLink to this section

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetSeriesLink to this section

Returns the Series used by the Chart.

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

MouseMoveLink to this section

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 to this section

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

OnInitializedLink to this section

Declaration
protected override void OnInitialized()

OnPanLink to this section

Invoked via interop when the user drags the scrollbar thumb.

Declaration
public Task OnPan(double position)
Parameters
Type Name Description
double position The new start position as a fraction (0-1).
Returns
Type Description
Task

OnWheelLink to this section

Invoked via interop when the user scrolls the mouse wheel over the chart. Zooms in or out.

Declaration
public Task OnWheel(double x, int delta)
Parameters
Type Name Description
double x The mouse X position relative to the chart element.
int delta Positive to zoom out, negative to zoom in.
Returns
Type Description
Task

ReloadLink to this section

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

Declaration
public Task Reload()
Returns
Type Description
Task

ResetZoomLink to this section

Resets zoom and pan to show the full data range.

Declaration
public Task ResetZoom()
Returns
Type Description
Task

ResizeLink to this section

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 to this section

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

SetRTLLink to this section

Called from JavaScript when the document direction changes.

Declaration
public Task SetRTL(bool isRTL)
Parameters
Type Name Description
bool isRTL
Returns
Type Description
Task

ShouldRenderAxesLink to this section

Returns whether the chart should render axes.

Declaration
protected bool ShouldRenderAxes()
Returns
Type Description
bool

ToPngLink to this section

Renders the chart as a PNG image and downloads it in the browser. The plot area and axes are included; legends and tooltips are HTML overlays and are not included.

Declaration
public Task ToPng(string fileName, int? width, int? height)
Parameters
Type Name Description
string fileName The download file name. Default is chart.png.
int? width The PNG width in pixels. When omitted the rendered size scaled by the device pixel ratio is used.
int? height The PNG height in pixels. When omitted it is derived from width preserving the aspect ratio.
Returns
Type Description
Task

ToPngLink to this section

Renders the chart as a PNG image and downloads it in the browser. The plot area and axes are included; legends and tooltips are HTML overlays and are not included.

Declaration
public Task<Byte[]> ToPng(int? width, int? height)
Parameters
Type Name Description
int? width The PNG width in pixels. When omitted the rendered size scaled by the device pixel ratio is used.
int? height The PNG height in pixels. When omitted it is derived from width preserving the aspect ratio.
Returns
Type Description
Task<Byte[]>

ToSvgLink to this section

Returns the SVG markup of the rendered chart as a string. The plot area and axes are included, with theme styles inlined so the SVG renders standalone. Legends and tooltips are HTML overlays and are not included. To download it, pass the result to the Radzen.downloadFile JavaScript helper.

Declaration
public Task<string> ToSvg()
Returns
Type Description
Task<string>A Task<T> representing the asynchronous operation. The task result contains the SVG markup of the chart.

UpdateScalesLink to this section

Updates the scales based on the configuration.

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