Class RadzenChart

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

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenChart : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

RadzenChart()

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()

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>

Properties

ChildContent

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

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	The child content.

ClickTolerance

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

[Parameter]
public int ClickTolerance { get; set; }

Property Value

Type	Description
int

ColorScheme

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, Palette (default), Monochrome, and custom color schemes.

Declaration

[Parameter]
public ColorScheme ColorScheme { get; set; }

Property Value

Type	Description
ColorScheme	The color scheme. Default uses the Palette scheme.

Height

Gets the runtime height of the chart.

Declaration

protected double? Height { get; set; }

Property Value

Type	Description
double?

LegendClick

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

[Parameter]
public EventCallback<LegendClickEventArgs> LegendClick { get; set; }

Property Value

Type	Description
EventCallback<LegendClickEventArgs>	The legend click event callback.

MarginBottom

Gets or sets the bottom margin of the plot area.

Declaration

protected double MarginBottom { get; set; }

Property Value

Type	Description
double

MarginLeft

Gets or sets the left margin of the plot area.

Declaration

protected double MarginLeft { get; set; }

Property Value

Type	Description
double

MarginRight

Gets or sets the right margin of the plot area.

Declaration

protected double MarginRight { get; set; }

Property Value

Type	Description
double

MarginTop

Gets or sets the top margin of the plot area.

Declaration

protected double MarginTop { get; set; }

Property Value

Type	Description
double

SeriesClick

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

[Parameter]
public EventCallback<SeriesClickEventArgs> SeriesClick { get; set; }

Property Value

Type	Description
EventCallback<SeriesClickEventArgs>	The series click event callback.

TooltipTolerance

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

Declaration

[Parameter]
public int TooltipTolerance { get; set; }

Property Value

Type	Description
int

Width

Gets the runtime width of the chart.

Declaration

protected double? Width { get; set; }

Property Value

Type	Description
double?

Methods

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

Click(double, double)

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

Declaration

[JSInvokable]
public Task Click(double x, double y)

Parameters

Type	Name	Description
double	x	The x.
double	y	The y.

Returns

Type	Description
Task

DisplayTooltipFor(IChartSeries, object)

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

Exceptions

Type	Condition
ArgumentException

Dispose()

Detaches event handlers and disposes Reference.

Declaration

public override void Dispose()

Overrides

RadzenComponent.Dispose()

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

GetSeries()

Returns the Series used by the Chart.

Declaration

public IReadOnlyList<IChartSeries> GetSeries()

Returns

Type	Description
IReadOnlyList<IChartSeries>

MouseMove(double, double)

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

Declaration

[JSInvokable]
public Task MouseMove(double x, double y)

Parameters

Type	Name	Description
double	x	The x.
double	y	The y.

Returns

Type	Description
Task

OnAfterRenderAsync(bool)

Called by the Blazor runtime.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender

Returns

Type	Description
Task

Overrides

RadzenComponent.OnAfterRenderAsync(bool)

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

Reload()

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

Declaration

public Task Reload()

Returns

Type	Description
Task

Resize(double, double)

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

Declaration

[JSInvokable]
public Task Resize(double width, double height)

Parameters

Type	Name	Description
double	width	The width.
double	height	The height.

Returns

Type	Description
Task

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

ShouldRenderAxes()

Returns whether the chart should render axes.

Declaration

protected bool ShouldRenderAxes()

Returns

Type	Description
bool

UpdateScales()

Updates the scales based on the configuration.

Declaration

protected virtual bool UpdateScales()

Returns

Type	Description
bool

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable