ClassChartSeries
Represents a single data series within a chart, defining how data points are visualized and styled. Configures series appearance, behavior, and interaction through child components for borders, labels, markers, tooltips, and other visual elements. Essential for creating multi-series charts and customizing individual data presentations. Children: ChartSeriesBorder, ChartSeriesLabels, ChartSeriesLegendItem, ChartSeriesLine, ChartSeriesMarkers, ChartSeriesNegativeValues, ChartSeriesOverlay, ChartSeriesStack, ChartSeriesTooltip, ChartSeriesTrendline.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Syntax:
public class ChartSeries : ChartSeriesBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Inheritance: objectComponentBaseDataVizChildComponentDataVizCollectionItemComponentChartSeriesBaseChartSeries
Implements:
Inherited Members
Constructors
ChartSeries()
Declaration
public ChartSeries()
Properties
Aggregate
Controls how data points are aggregated when multiple values exist for the same time period. Sum combines all values for comprehensive totals. Avg calculates average values for typical performance metrics. Max shows peak values for highlighting maximum performance. Min shows minimum values for identifying low points. Count counts data points for frequency analysis. First uses the first value when multiple points overlap. Essential for time-series data where multiple measurements occur within chart intervals.
Declaration
[Parameter]
public ChartSeriesAggregate? Aggregate { get; set; }
Property Value
AutoFit
Axis
Specifies which value axis this series should use for positioning data points. Reference the axis by its Name property. Use multiple value axes to display series with different scales or units on the same chart. When not specified, the series uses the first (primary) value axis.
CategoryAxis
Specifies which category axis this series should use for positioning data points. Reference the axis by its Name property. Use multiple category axes to group different series or display different time ranges. When not specified, the series uses the first (primary) category axis.
Declaration
[Parameter]
public string CategoryAxis { get; set; }
Property Value
CategoryField
Maps the data object property that contains category labels for the X-axis. Use this for chart types that display categories like bars, columns, and lines. Examples: "ProductName", "Date", "Category", "Month". For time-based data, the field should contain DateTime values or date strings. Essential for categorical charts to position data points correctly along the X-axis.
Declaration
[Parameter]
public string CategoryField { get; set; }
Property Value
ChildContent
Declaration
[Parameter]
public RenderFragment ChildContent { get; set; }
Property Value
CloseField
Maps the data object property containing the closing price value for financial charts. Required for Candlestick and OHLC series types. Used with OpenField, HighField, and LowField to create financial indicators. Example field names: "ClosePrice", "Close", "EndValue".
Declaration
[Parameter]
public string CloseField { get; set; }
Property Value
Color
Sets the primary color for all elements in this series using any valid CSS color. Examples: "#FF5733", "rgb(255, 87, 51)", "red", "rgba(255, 87, 51, 0.8)". This color applies to bars, lines, markers, and fill areas. Override per-data-point using ColorField for dynamic coloring. When not set, uses automatic colors from the current Telerik theme.
ColorField
Maps the data object property that contains individual color values for each data point. Enables different colors for each bar, slice, or point in the series. Example field names: "Color", "PointColor", "StatusColor". Color values should be valid CSS colors like "#FF5733" or "red". Takes precedence over the series-wide Color property.
Declaration
[Parameter]
public string ColorField { get; set; }
Property Value
DashType
Controls the line style pattern for line-based chart types. Solid creates continuous lines (default). Dash creates dashed lines for emphasis or differentiation. Dot creates dotted lines for subtle data representation. DashDot combines dashes and dots for unique styling. Only applies to Line, Area, and similar series types.
Declaration
[Parameter]
public DashType? DashType { get; set; }
Property Value
DownColor
Sets the color for financial chart elements when closing price is lower than opening price. Only applies to Candlestick and OHLC series types. Use red colors like "#FF0000" to indicate declining values in financial data. Works with DownColorField for per-point color control. Defaults to theme colors when not specified.
Declaration
[Parameter]
public string DownColor { get; set; }
Property Value
DownColorField
Maps the data object property containing down-trend colors for individual financial data points. Enables different colors for each declining candlestick or OHLC bar. Used with financial chart types when CloseField value is less than OpenField. Example field names: "DeclineColor", "DownColor", "BearColor".
Declaration
[Parameter]
public string DownColorField { get; set; }
Property Value
DrilldownField
Maps the data object property containing drill-down target identifiers for hierarchical navigation. Enable users to click chart elements and navigate to detailed views of the data. Example field names: "SubCategoryId", "DrillTarget", "DetailsUrl". Use with the OnDrilldown event to handle navigation logic. Essential for creating multi-level dashboard experiences.
Declaration
[Parameter]
public string DrilldownField { get; set; }
Property Value
ExplodeField
Maps the data object property that specifies whether pie or donut slices appear separated from the center. Creates visual emphasis for important data points by spacing them from the main chart. Boolean field names like "IsExploded", "Highlighted", "Featured". Only applies to Pie and Donut series types. Use to highlight key segments in pie charts for better data emphasis.
Declaration
[Parameter]
public string ExplodeField { get; set; }
Property Value
Field
Maps the data object property containing the primary numeric values for chart visualization. This is the main data property that determines bar heights, line positions, or pie slice sizes. Examples: "Sales", "Amount", "Revenue", "Temperature", "Count". Field name must be a valid JavaScript identifier (alphanumeric, $, or _ only). Required for most chart types to display meaningful data visualization.
For
Specifies the parent series name when creating trendlines for data analysis. Reference an existing series by its Name property to add statistical analysis. Only used with Line series that serve as trendlines. Example: Set to "Sales" to create a trend line that analyzes the "Sales" series data. Use with trendline configuration to show data patterns and forecasting.
FromField
Maps the data object property containing start values for range-based chart types. Used with ToField to create range charts showing value spans. Examples: "MinValue", "StartDate", "LowTemperature", "RangeStart". Essential for RangeColumn and RangeBar series. Creates visual representations of data ranges, intervals, or spans.
Declaration
[Parameter]
public string FromField { get; set; }
Property Value
Gap
Controls the spacing between different categories as a percentage of bar width. Values between 0-1 where 0.5 means 50% spacing between category groups. Use smaller values like 0.1 for tightly packed categories. Use larger values like 0.8 for widely separated categories. Works with Spacing to control both category and series separation.
HighField
Maps the data object property containing the highest price value for financial charts. Required for Candlestick and OHLC series types. Used with OpenField, LowField, and CloseField to create complete financial indicators. Example field names: "HighPrice", "High", "MaxValue", "Peak".
Declaration
[Parameter]
public string HighField { get; set; }
Property Value
HoleSize
Sets the inner radius size for donut charts in pixels. Creates the characteristic hollow center of donut visualizations. Examples: 50 for small holes, 100 for medium holes, 150 for large holes. Only applies to Donut series types. Larger values create more prominent hollow centers, smaller values create thicker rings.
Declaration
[Parameter]
public double? HoleSize { get; set; }
Property Value
LowField
Maps the data object property containing the lowest price value for financial charts. Required for Candlestick and OHLC series types. Used with OpenField, HighField, and CloseField to create complete financial indicators. Example field names: "LowPrice", "Low", "MinValue", "Bottom".
Declaration
[Parameter]
public string LowField { get; set; }
Property Value
Margin
Controls the margin space around donut chart rings in pixels. Creates separation between multiple donut series in the same chart. Examples: 5 for tight spacing, 15 for moderate spacing, 30 for wide spacing. Only applies to Donut series types. Use when displaying multiple nested donut series for visual separation.
Declaration
[Parameter]
public double? Margin { get; set; }
Property Value
MaxSize
The maximum size of a bubble in a Chart Bubble series. The resulting bubble sizes also depend on MinSize and the data.
Declaration
[Parameter]
public double? MaxSize { get; set; }
Property Value
MinSize
The minimum size of a bubble in a Chart Bubble seriesMaxSize The resulting bubble sizes also depend on MaxSize and the data.
Declaration
[Parameter]
public double? MinSize { get; set; }
Property Value
MissingValues
Controls how the chart handles null or missing data points in the series. Gap creates visual breaks in lines where data is missing - ideal for showing incomplete data sets. Interpolate estimates missing values using neighboring points - best for continuous data trends. Zero treats missing values as zero - useful for cumulative data where gaps should not break totals. Critical for maintaining accurate data representation when source data contains null values.
Declaration
[Parameter]
public ChartSeriesMissingValues? MissingValues { get; set; }
Property Value
Name
Sets the display name for this series shown in legends and tooltips. Use descriptive names like "Q1 Sales", "Temperature", "Revenue 2023". Appears in chart legends, tooltips, and drill-down breadcrumbs. Essential for multi-series charts to help users identify different data sets. When not set, series appear without descriptive labels.
NegativeColor
Sets the color for negative values in bar, column, and waterfall charts. Use contrasting colors like "#FF0000" for red to highlight negative data points. Only applies to Column, Bar, and Waterfall series. Helps users quickly identify losses, decreases, or negative trends in data. Works automatically when data contains negative values.
Declaration
[Parameter]
public string NegativeColor { get; set; }
Property Value
Opacity
Controls the transparency level of the entire series from 0 (invisible) to 1 (fully opaque). Use values like 0.7 for subtle transparency or 0.3 for highlighting overlay effects. Applies to all series elements including fills, lines, and markers. Useful for creating layered visualizations or emphasizing specific series. Default value of 1 makes series completely opaque.
Declaration
[Parameter]
public double? Opacity { get; set; }
Property Value
OpenField
Maps the data object property containing the opening price value for financial charts. Required for Candlestick and OHLC series types. Used with HighField, LowField, and CloseField to create complete financial indicators. Example field names: "OpenPrice", "Open", "StartValue", "Beginning".
Declaration
[Parameter]
public string OpenField { get; set; }
Property Value
Padding
Sets uniform padding around the chart content area in pixels. Creates consistent spacing between chart elements and container edges. Examples: 10 for minimal padding, 20 for standard spacing, 40 for generous margins. Affects the overall chart layout and available drawing space. Use to prevent chart elements from touching container boundaries.
Declaration
[Parameter]
public double? Padding { get; set; }
Property Value
Size
Sets the radius for pie and donut charts in pixels. Controls the overall size of circular chart types. Examples: 100 for small charts, 200 for medium, 300 for large visualizations. When not specified, automatically distributes available space among multiple series. Only applies to Pie and Donut series types.
SizeField
Maps the data object property containing bubble size values for bubble charts. Enables the third dimension of data visualization through bubble sizes. Essential for Bubble series to show data magnitude. Example field names: "Population", "Volume", "Size", "Magnitude", "Weight". Larger values create bigger bubbles, smaller values create smaller bubbles.
Declaration
[Parameter]
public string SizeField { get; set; }
Property Value
Spacing
Controls the spacing between series within the same category as a percentage of bar width. Values between 0-1 where 0.2 means 20% spacing between series bars. Use smaller values like 0.1 for tightly grouped series. Use larger values like 0.5 for clearly separated series. Works with Gap to control both series and category separation.
Declaration
[Parameter]
public double? Spacing { get; set; }
Property Value
StartAngle
Sets the starting angle for the first segment in pie and donut charts in degrees. Zero degrees points to the right (3 o'clock position), positive values rotate clockwise. Examples: 0 starts from right, 90 starts from top, 180 starts from left, 270 starts from bottom. Negative values like -90 are acceptable for counter-clockwise positioning. Only applies to Pie and Donut series types.
Declaration
[Parameter]
public double? StartAngle { get; set; }
Property Value
Style
Controls how data points connect in line-based charts for different visual presentations. Normal connects points with straight lines for clear, direct data representation. Smooth creates curved connections for elegant, flowing visualizations of continuous data. Step uses right-angle connections ideal for showing discrete value changes over time. Only applies to Line, Area, and similar continuous series types.
Declaration
[Parameter]
public ChartSeriesStyle? Style { get; set; }
Property Value
SummaryField
Maps the data object property that defines summary types for waterfall chart calculations. Use "runningTotal" to show cumulative sums from the last total point to current position. Use "total" to display the sum of all previous items as a summary column. Only applies to Waterfall and HorizontalWaterfall series types. Essential for creating meaningful waterfall visualizations with intermediate and final totals.
Declaration
[Parameter]
public string SummaryField { get; set; }
Property Value
ToField
Maps the data object property containing end values for range-based chart types. Used with FromField to create range charts showing value spans. Examples: "MaxValue", "EndDate", "HighTemperature", "RangeEnd". Essential for RangeColumn and RangeBar series. Creates visual representations of data ranges, intervals, or spans.
Type
Defines the visual representation and behavior of the data series in the chart. Column displays vertical bars ideal for comparing categories and showing discrete data changes. Line creates connected points perfect for showing trends and continuous data over time. Area combines line charts with filled areas below, emphasizing data volume and cumulative values. Pie shows proportional relationships in circular segments for part-to-whole analysis. Bar displays horizontal bars suitable for category comparisons and when labels are long. Scatter plots individual points for correlation analysis and pattern recognition. Bubble extends scatter plots with a third dimension shown through bubble sizes. Candlestick visualizes financial data with open, high, low, close values. Each type requires specific field mappings - consult documentation for field requirements.
Declaration
[Parameter]
public ChartSeriesType? Type { get; set; }
Property Value
Visible
Controls whether this series appears in the chart visualization. Set to false to temporarily hide series without removing them from the chart. Useful for creating interactive charts where users can toggle series visibility. Hidden series remain in the legend but don't render data points. Default value of true makes the series visible.
VisibleInLegend
Controls whether this series appears in the chart legend for user interaction. Set to false to hide series from legend while keeping it visible in the chart. Useful when you want to display data without legend clutter. For pie and donut charts use VisibleInLegendField instead.
Declaration
[Parameter]
public bool? VisibleInLegend { get; set; }
Property Value
bool?
VisibleInLegendField
Maps the data object property that controls individual data point visibility in legends. Enables per-point control over legend display for pie, donut, and funnel charts. Sample boolean field names include "ShowInLegend", "LegendVisible", "DisplayInLegend". Useful for highlighting only important segments in pie charts. For other series types use VisibleInLegend instead.
Declaration
[Parameter]
public string VisibleInLegendField { get; set; }
Property Value
Width
Sets the line thickness for line-based series types in pixels. Examples: 1 for thin lines, 3 for standard lines, 5 for thick emphasis lines. Applies to Line, Area, and series borders. Use thicker lines to emphasize important data trends. Default width provides optimal visibility across different chart sizes.
XAxis
Specifies which X-axis this series should use for horizontal positioning. Reference the axis by its Name property. For polar charts, the X-axis range represents degrees (0-360). Use multiple X-axes to display different series with distinct horizontal scales. Essential for Scatter, Bubble, and polar series.
XField
Maps the data object property containing X-coordinate values for scatter and bubble charts. Essential for Scatter, ScatterLine, and Bubble series. Used with YField to create two-dimensional data plots. Example field names: "XValue", "Horizontal", "Width", "Time".
YAxis
Specifies which Y-axis this series should use for vertical positioning. Reference the axis by its Name property. Available for Bubble, Scatter, ScatterLine, and polar series. Use multiple Y-axes to display different series with distinct vertical scales. Essential for creating complex multi-dimensional visualizations.
YField
Maps the data object property containing Y-coordinate values for scatter and bubble charts. Essential for Scatter, ScatterLine, and Bubble series. Used with XField to create two-dimensional data plots. Example field names: "YValue", "Vertical", "Height", "Temperature".
ZIndex
Controls the layering order of series when multiple series overlap in the same chart. Higher values appear on top of lower values (foreground to background stacking). Examples: 1 for background, 5 for middle layer, 10 for foreground emphasis. When not specified, uses automatic stacking based on series type (lines on top, bars below). Use to ensure important data series remain visible over others.
Declaration
[Parameter]
public double? ZIndex { get; set; }
Property Value
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
__builder
Overrides
Dispose(bool)
Declaration
protected override void Dispose(bool disposing)
Parameters
disposing
Overrides
OnAfterRender(bool)
Declaration
protected override void OnAfterRender(bool firstRender)
Parameters
firstRender
Overrides
OnInitialized()
Declaration
protected override void OnInitialized()
Overrides
OnParametersSet()
Declaration
protected override void OnParametersSet()
Overrides