Radzen Blazor Chart
The series is the heart of a chart - each one binds a set of data to a visual form like a line, bar, or pie. Most chart questions start here: how to bind data, combine series, and handle interaction.
Chart Series link
The chart can display area, bar, column, donut, line, and pie data series. The chart series needs data and configuration to tell it which property of the data item is the value of the series (Y axis) and which is the category (X axis).
All series have the following common properties:
Data - specifies the data source which the series should display.
ValueProperty - the name of the property which provides values for the Y axis of the chart. The property should be of numeric type: int, long, float, double, decimal.
CategoryProperty - the name of the property which provides value for the X axis of the chart. The property can be string, Date or numeric. If not set RadzenChart will use the index of the data item as its X axis value.
Basic usage link
Here is a very basic example that creates a column chart with minimal configuration.
The RadzenColumnSeries tag is used to specify that the chart has a column series. The Data property specifies the data source. The chart will render a column for every DataItem instance from the revenue array. The Y (value) axis displays the Revenue property and the X (category) axis displays the Quarter property.
Keyboard Navigation link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Chart component.
| Press this key | To do this |
|---|---|
| Tab | Navigate forward across Chart legend items. |
| Shift + Tab | Navigate backward across Chart legend items. |
| Enter or Space | Show/hide the focused Chart legend item series. |
Frequently asked questions
How do I add a series to a chart?
Place a series component such as RadzenLineSeries or RadzenColumnSeries inside the chart and bind its Data, then point CategoryProperty and ValueProperty at the fields you want.
Can I combine different series types?
Yes. Put more than one series inside the same chart - a column series with a line overlay, for example - as long as they share compatible axes.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT