Class ChartSeries

Defines the options for a series in a chart, allowing customization of its appearance and behavior.

Inheritance
System.Object
SfBaseComponent
Syncfusion.Blazor.Toolkit.Data.SfDataBoundComponent
ChartDataBoundComponent
ChartSeries
Implements
System.IAsyncDisposable
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Charts
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class ChartSeries : ChartDataBoundComponent, IAsyncDisposable, ISubcomponentTracker, IChartElement
Remarks

The ChartSeries component participates in data-binding and cooperates with the owning SfChart. It exposes a rich set of parameters for appearance, interactivity, accessibility and data mapping.

Examples
<SfChart>
    <ChartSeries DataSource="@Data" XName="X" YName="Y" Type="ChartSeriesType.Line" />
</SfChart>

Constructors

ChartSeries()

Declaration
public ChartSeries()

Properties

AccessibilityDescription

Gets or sets the accessibility description for the ChartSeries.

Declaration
public string AccessibilityDescription { get; set; }
Property Value
Type Description
System.String

Accepts a string that defines the accessibility description for the ChartSeries root element.
Remarks

Use this property to provide an accessibility description for the ChartSeries root element, which is the parent element of the series points.

Examples
// This example demonstrates how to set the accessibility description for a chart series.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" AccessibilityDescription="This is a sample series" />
</SfChart>

AccessibilityDescriptionFormat

Gets or sets the format string used for the accessibility description of the data points in the ChartSeries. The format string can include the following placeholders:

  • ${series.name}: Displays the name of the series.
  • ${point.x}: Displays the x-value of the point.
  • ${point.y}: Displays the y-value of the point.
  • ${point.high}: Displays the high value of the point. This is applicable only for financial and range series.
  • ${point.low}: Displays the low value of the point. This is applicable only for financial and range series.
  • ${point.open}: Displays the open value of the point. This is applicable only for financial series.
  • ${point.close}: Displays the close value of the point. This is applicable only for financial series.
Declaration
public string AccessibilityDescriptionFormat { get; set; }
Property Value
Type Description
System.String

A string that specifies the format for the accessibility description of points in the series.
Remarks

Use this property to specify the format for the points accessibility description of the ChartSeries. The AccessibilityDescription property provides accessibility information for the series root element. However, this property allows you to provide dynamic information based on the ChartSeries data. For example, the format "${series.name} : ${point.x}" displays the series name and x-value of the point in the accessibility description.

Examples
// This example demonstrates how to set the accessibility description format for a chart series.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" AccessibilityDescriptionFormat="${series.name} : ${point.x}" />
</SfChart>

AccessibilityRole

Gets or sets the accessibility role for the ChartSeries.

Declaration
public string AccessibilityRole { get; set; }
Property Value
Type Description
System.String

A string that defines the accessibility role for the ChartSeries.
Remarks

Use this property to specify the accessibility role for the ChartSeries root element.

Examples
// This example demonstrates how to set the accessibility role for a chart series.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" AccessibilityRole="region" />
</SfChart>

Animation

Specifies the animation settings for the series.

Declaration
public ChartSeriesAnimation Animation { get; set; }
Property Value
Type Description
ChartSeriesAnimation

A ChartSeriesAnimation object that defines animation behavior.
Remarks

This property allows customization of animation effects such as duration and delay to enhance the visual experience of series data as it transitions onto the chart.

Examples
// This example demonstrates how to enable animation on a chart series with a specific duration and delay.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        <ChartSeriesAnimation Enable="true" Duration="3000" Delay="1000" />
    </ChartSeries>
</SfChart>

Border

Defines the border of the rectangle-shaped series.

Declaration
public ChartSeriesBorder Border { get; set; }
Property Value
Type Description
ChartSeriesBorder

A ChartSeriesBorder object for configuring series borders.
Remarks

Use this property to specify the border attributes, such as color and width, for series that can be represented as rectangular shapes.

Examples
// This example demonstrates how to render a column chart with a custom border.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
        <ChartSeriesBorder Width="10" Color="blue"></ChartSeriesBorder>
    </ChartSeries>
</SfChart>

CardinalSplineTension

Declaration
public double CardinalSplineTension { get; set; }
Property Value
Type
System.Double

ChartDataEditSettings

Configures drag settings for the series.

Declaration
public ChartDataEditSettings ChartDataEditSettings { get; set; }
Property Value
Type Description
ChartDataEditSettings

A ChartDataEditSettings describing interactive editing behavior.
Remarks

This property allows users to modify series data points directly on the chart by dragging, enhancing interactivity and data exploration.

Examples
// This example demonstrates how to enable data editing in a column chart
// and restrict the minimum editable Y-value to 30 using the MinY property.
<SfChart>
    <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
        <ChartDataEditSettings Enable="true" MinY="30"></ChartDataEditSettings>
        <ChartMarker Visible="true" Width="10" Height="10" />
    </ChartSeries>
</SfChart>

Close

Gets or sets the field name in the data source that represents the closing value for financial series.

Declaration
public string Close { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the closing value.
Remarks

This property is used in financial charts to denote the closing price of financial data points, such as stocks at the end of a trading session.

Examples
// This example demonstrates how to render a HiloOpenClose series in a chart using the Close property.
<SfChart>
    <ChartSeries DataSource="@StockDetails" 
                 XName="X" 
                 High="High" 
                 Low="Low" 
                 Open="Open" 
                 Close="Close" 
                 Type="ChartSeriesType.HiloOpenClose">
    </ChartSeries>
</SfChart>

ColumnSpacing

Declaration
public double ColumnSpacing { get; set; }
Property Value
Type
System.Double

ColumnWidth

Declaration
public double ColumnWidth { get; set; }
Property Value
Type
System.Double

ColumnWidthInPixel

Declaration
public double ColumnWidthInPixel { get; set; }
Property Value
Type
System.Double

CornerRadius

Specifies the corner radius of the rectangle-shaped series.

Declaration
public ChartCornerRadius CornerRadius { get; set; }
Property Value
Type Description
ChartCornerRadius

A ChartCornerRadius configuring the series corner radius.
Remarks

Use this property to round the corners of rectangular series representations, enhancing their visual aesthetics by applying a uniform radius to corners.

Examples
// This example demonstrates how to render a column chart with rounded corners.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
        <ChartCornerRadius BottomLeft="20" BottomRight="20" TopLeft="20" TopRight="20">
        </ChartCornerRadius>
    </ChartSeries>
</SfChart>

DashArray

Declaration
public string DashArray { get; set; }
Property Value
Type
System.String

DataSource

Declaration
public IEnumerable<object> DataSource { get; set; }
Property Value
Type
System.Collections.Generic.IEnumerable<System.Object>

EmptyPointSettings

Specifies the customization of the empty point settings for the series.

Declaration
public ChartEmptyPointSettings EmptyPointSettings { get; set; }
Property Value
Type Description
ChartEmptyPointSettings

A ChartEmptyPointSettings instance for handling empty points.
Remarks

This property provides settings to handle and style data points that do not have values, such as display mode or custom markers.

Examples
// This example demonstrates how to handle empty points in a column chart by averaging them,
// and setting a custom fill color for the empty points.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
        <ChartEmptyPointSettings Mode="EmptyPointMode.Average" Fill="red"></ChartEmptyPointSettings>
    </ChartSeries>
</SfChart>

EnableComplexProperty

Declaration
public bool EnableComplexProperty { get; set; }
Property Value
Type
System.Boolean

EnableTooltip

Declaration
public bool EnableTooltip { get; set; }
Property Value
Type
System.Boolean

Fill

Declaration
public string Fill { get; set; }
Property Value
Type
System.String

Focusable

Gets or sets a value indicating whether the series root can receive keyboard focus.

Declaration
public bool Focusable { get; set; }
Property Value
Type Description
System.Boolean

true to enable keyboard focus on the root; otherwise false. Default is true.
Remarks

Use this property to toggle keyboard navigation focus for the ChartSeries.

Examples
// This example demonstrates how to enable focusable behavior on a chart series.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Focusable="true" />
</SfChart>

GroupName

Defines the group name to associate chart series.

Declaration
public string GroupName { get; set; }
Property Value
Type Description
System.String

A string indicating the group name for series stacking.
Remarks

The axis in the same group shares the same baseline and location on the corresponding axis.

Examples
// This example demonstrates how to use grouped column series in a Chart.
<SfChart>
    <ChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Toolkit.ValueType.Category" Interval="1">
    </ChartPrimaryXAxis>
    <ChartSeries DataSource="@ChartPoints" XName="Year" YName="USA_Total" GroupName="USA" Type="ChartSeriesType.Column" />
    <ChartSeries DataSource="@ChartPoints" XName="Year" YName="USA_Gold" GroupName="USA" Type="ChartSeriesType.Column" />
    <ChartSeries DataSource="@ChartPoints" XName="Year" YName="UK_Total" GroupName="UK" Type="ChartSeriesType.Column" />
    <ChartSeries DataSource="@ChartPoints" XName="Year" YName="UK_Gold" GroupName="UK" Type="ChartSeriesType.Column" />
</SfChart>

High

Gets or sets the field name in the data source that represents the high value for financial series.

Declaration
public string High { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the high value.
Remarks

This property is used in financial charts to determine the high points of data points, like in stock market data. Note: Need to assign the High, Low, Open, Close property.

Examples
// This example demonstrates how to render a HiloOpenClose series in a chart using the High property.
<SfChart>
    <ChartSeries DataSource="@StockDetails" 
                 XName="X" 
                 High="High" 
                 Low="Low" 
                 Open="Open" 
                 Close="Close" 
                 Type="ChartSeriesType.HiloOpenClose">
    </ChartSeries>
</SfChart>

HighlightStyle

Specifies the styling class used when the series is highlighted.

Declaration
public string HighlightStyle { get; set; }
Property Value
Type Description
System.String

A string representing the CSS class applied to highlighted state.
Remarks

This property applies a specific CSS class to style the series when it is highlighted by the user.

Examples
// This example demonstrates how to apply a custom style to highlight chart points.
<style>
.selection {
    fill: yellow;
}
</style>
<SfChart SelectionMode="SelectionMode.Point">
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" 
                 Type="ChartSeriesType.Column" HighlightStyle="selection" />
</SfChart>

LegendItemTemplate

Gets or sets the custom template used to render the content of the legend item for the current ChartSeries.

Declaration
public RenderFragment LegendItemTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

Specifies any valid HTML or Blazor content that defines the legend item's appearance for this series.
Remarks

When set, this property displays the provided template in place of the default legend item text and shape for the current series. If both LegendItemTemplate and the Name are unset, no legend item will be displayed.

Examples
  

<SfChart> 
    <ChartSeries> 
        <LegendItemTemplate> 
            <div>Profit</div> 
        </LegendItemTemplate> 
    </ChartSeries> 
    <ChartLegendSettings Visible="true"/> 
</SfChart>

LegendShape

Declaration
public LegendShape LegendShape { get; set; }
Property Value
Type
LegendShape

Low

Gets or sets the field name in the data source that represents the low value for financial series.

Declaration
public string Low { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the low value.
Remarks

This property is utilized in financial charts to identify the low points of data entries, such as those in stock market data.

Examples
// This example demonstrates how to render a HiloOpenClose series in a chart using the Low property.
<SfChart>
    <ChartSeries DataSource="@StockDetails" 
                 XName="X" 
                 High="High" 
                 Low="Low" 
                 Open="Open" 
                 Close="Close" 
                 Type="ChartSeriesType.HiloOpenClose">
        </ChartSeries>
</SfChart>

Marker

Specifies the customization of the marker of the series.

Declaration
public ChartMarker Marker { get; set; }
Property Value
Type Description
ChartMarker

A ChartMarker object controlling marker visibility and appearance.
Remarks

Use this property to configure the appearance of markers, which are used to identify individual data points within the series.

Examples
// This example demonstrates how to render a chart with visible data point markers.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        <ChartMarker Visible="true"></ChartMarker>
    </ChartSeries>
</SfChart>

MaxRadius

Specifies the maximum radius for bubbles in a bubble series.

Declaration
public double MaxRadius { get; set; }
Property Value
Type Description
System.Double

A double value representing the maximum bubble size.
Remarks

This property sets the upper limit for the size of bubbles in a bubble chart, influencing how data values are visually represented as bubble sizes.

Examples
// This example demonstrates how to render a bubble chart with a maximum radius of 30.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"
                 Type="ChartSeriesType.Bubble" MaxRadius="30" />
</SfChart>

MinRadius

Specifies the minimum radius for bubbles in a bubble series.

Declaration
public double MinRadius { get; set; }
Property Value
Type Description
System.Double

A double representing the minimum bubble size.
Remarks

This property controls the smallest size a bubble can have in a bubble chart, affecting the visual representation of data points.

Examples
// This example demonstrates how to render a bubble chart with a minimum radius of 30.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue"
                 Type="ChartSeriesType.Bubble" MinRadius="30" />
</SfChart>

Name

Declaration
public string Name { get; set; }
Property Value
Type
System.String

NonHighlightStyle

Specifies the styling class used when the series is not highlighted.

Declaration
public string NonHighlightStyle { get; set; }
Property Value
Type Description
System.String

A string representing the CSS class applied to non-highlighted state.
Remarks

This property applies a specific CSS class to style the series when it is not highlighted by the user.

Examples
// This example demonstrates how to apply a custom style to unhighlighted chart points.
<style>
.selection {
    fill: yellow;
}
.unselection {
    fill: blue;
}
</style>
<SfChart SelectionMode="SelectionMode.Point">
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" 
                 Type="ChartSeriesType.Column" HighlightStyle="selection" NonHighlightStyle="unselection" />
</SfChart>

Opacity

Declaration
public double Opacity { get; set; }
Property Value
Type
System.Double

Open

Gets or sets the field name in the data source that represents the opening value for financial series.

Declaration
public string Open { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the opening value.
Remarks

This property is used in financial charts to denote the opening price of financial data points, such as stocks at the start of a trading session.

Examples
// This example demonstrates how to render a HiloOpenClose series in a chart using the Open property.
<SfChart>
    <ChartSeries DataSource="@StockDetails" 
                 XName="X" 
                 High="High" 
                 Low="Low" 
                 Open="Open" 
                 Close="Close" 
                 Type="ChartSeriesType.HiloOpenClose">
    </ChartSeries>
</SfChart>

PointColorMapping

Declaration
public string PointColorMapping { get; set; }
Property Value
Type
System.String

Query

Declaration
public Query Query { get; set; }
Property Value
Type
Syncfusion.Blazor.Toolkit.Data.Query

SegmentAxis

Specifies the axis used for segmentation.

Declaration
public Segment SegmentAxis { get; set; }
Property Value
Type Description
Segment

A Segment indicating the segmentation axis.
Remarks

This property determines which axis will be used for segmenting the series, which can affect how series data is divided and displayed.

Segments

Specifies the segments of the multicolor series.

Declaration
public IList<ChartSegment> Segments { get; set; }
Property Value
Type Description
System.Collections.Generic.IList<ChartSegment>

A list of ChartSegment objects that define multicolored segments within a series.
Remarks

Use this property to create multicolored segments for visual differentiation of parts within the same series, enhancing the interpretation of changes within segmented data.

Examples
// This example demonstrates how to set the segments for a multicolored series.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.MultiColoredArea">
        <ChartSegments>
            <ChartSegment Value="30" Color="blue" />
        </ChartSegments>
    </ChartSeries>
</SfChart>

SelectionStyle

Specifies the styling class used when the series is selected.

Declaration
public string SelectionStyle { get; set; }
Property Value
Type Description
System.String

A string representing the CSS class applied to selected state.
Remarks

This property applies a specific CSS class to style the series when it is selected by the user.

Examples
// This example demonstrates how to apply a custom style to selected chart points.
<style>
.selection {
    fill: yellow;
}
</style>
<SfChart SelectionMode="SelectionMode.Point">
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" 
                 Type="ChartSeriesType.Column" SelectionStyle="selection" />
</SfChart>

ShowNearestTooltip

Declaration
public bool ShowNearestTooltip { get; set; }
Property Value
Type
System.Boolean

Size

The data source field that contains the size value for the bubble series.

Declaration
public string Size { get; set; }
Property Value
Type Description
System.String

A string that specifies the field name used for bubble size.
Remarks

This property specifies the data source field that provides size values, used to render bubbles in a bubble series.

Examples
// This example demonstrates how to render a bubble chart using Size property.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Bubble" Size="BubbleSize"/>
</SfChart>
@code {
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
        public double BubbleSize { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
    {
        new ChartData { XValue = 10, YValue = 21 , BubbleSize = 1.241},
        new ChartData { XValue = 20, YValue = 24 , BubbleSize = 3.234},
        new ChartData { XValue = 30, YValue = 36 , BubbleSize = 5.634}
    };
}

SplineType

Declaration
public SplineType SplineType { get; set; }
Property Value
Type
SplineType

StackingGroup

Specifies the group name used to stack series together.

Declaration
public string StackingGroup { get; set; }
Property Value
Type Description
System.String

A string representing the group name for stacking series.
Remarks

This property groups series together for stacking purposes, allowing multiple series to share the same stacking baseline within the chart.

Examples
// This example demonstrates how to render a stacking bar chart with multiple groupings.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" 
                  Type="ChartSeriesType.StackingBar" StackingGroup="Group1" />
    <ChartSeries DataSource="@Data" XName="XValue" YName="Y1Value" 
                  Type="ChartSeriesType.StackingBar" StackingGroup="Group2" />
</SfChart>

StepPosition

Declaration
public StepPosition StepPosition { get; set; }
Property Value
Type
StepPosition

TooltipFormat

Declaration
public string TooltipFormat { get; set; }
Property Value
Type
System.String

TooltipMappingName

Specifies the field name in the data source used for mapping tooltips in waterfall series.

Declaration
public string TooltipMappingName { get; set; }
Property Value
Type Description
System.String

A string representing the data source field for tooltips.
Remarks

This property allows customization of tooltip content by using a specific field from the data source in a waterfall series.

Examples
// This example demonstrates how to render a scatter chart with tooltip mapping for additional data.
<SfChart DataSource="@Data">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeries TooltipMappingName="Additional" XName="BS" YName="Rank" Type="ChartSeriesType.Scatter">
        <ChartMarker Width="10" Height="10"></ChartMarker>
    </ChartSeries>
    <ChartTooltipSettings Enable=true Format="BS : ${point.x} <br> Rank : ${point.y} <br> Additional : ${point.tooltip}"></ChartTooltipSettings>
</SfChart>

Trendlines

Specifies the trendlines for the series.

Declaration
public IList<ChartTrendline> Trendlines { get; set; }
Property Value
Type Description
System.Collections.Generic.IList<ChartTrendline>

A list of ChartTrendline objects representing trendlines.
Remarks

Trendlines predict and highlight trends in the data by displaying them over the series. They can be configured for different mathematical models such as linear or exponential.

Examples
// This example demonstrates how to add a trendline in chart
// and enable markers for it in a chart.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        <ChartTrendlines>
            <ChartTrendline Period="5" Type="TrendlineTypes.MovingAverage">
                <ChartTrendlineMarker Visible="true" />
            </ChartTrendline>
        </ChartTrendlines>
    </ChartSeries>
</SfChart>

Type

Declaration
public ChartSeriesType Type { get; set; }
Property Value
Type
ChartSeriesType

UnSelectedStyle

Specifies the styling class used when the series is deselected.

Declaration
public string UnSelectedStyle { get; set; }
Property Value
Type Description
System.String

A string representing the CSS class applied to unselected state.
Remarks

This property applies a specific CSS class to style the series when it is not selected.

Examples
// This example demonstrates how to apply a custom style to unselected chart points.
<style>
.selection {
    fill: yellow;
}
.unselection {
    fill: blue;
}
</style>
<SfChart SelectionMode="SelectionMode.Point">
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" 
                 Type="ChartSeriesType.Column" SelectionStyle="selection" UnSelectedStyle="unselection" />
</SfChart>

Visible

Declaration
public bool Visible { get; set; }
Property Value
Type
System.Boolean

Volume

Gets or sets the field name in the data source that represents the volume value for financial series.

Declaration
public string Volume { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the volume value.
Remarks

This property is used in financial charts to denote the volume of trades or transactions for financial data points, such as stock trading volumes.

Examples
// This example demonstrates how to render a candlestick chart with an Accumulation/Distribution indicator.
<SfChart>    
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.DateTime" 
                        Title="months" 
                        IntervalType="IntervalType.Months">
    </ChartPrimaryXAxis>

    <ChartSeries DataSource="@StockDetails" 
                 Name="Apple Inc" 
                 XName="X" 
                 Low="Low" 
                 High="High" 
                 Close="Close" 
                 Volume="Volume" 
                 Open="Open" 
                 Width="2" 
                 Type="ChartSeriesType.Candle">
    </ChartSeries>
</SfChart>

Width

Declaration
public double Width { get; set; }
Property Value
Type
System.Double

XAxisName

Specifies the name of the horizontal axis associated with the series.

Declaration
public string XAxisName { get; set; }
Property Value
Type Description
System.String

A string representing the name of the associated horizontal axis. Default is "PrimaryXAxis".
Remarks

This property is used when associating the series with an axis.

Examples
// This example demonstrates how to assign secondary x axis to the chart series.
<SfChart>
    <ChartAxis Name="XAxis" />
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
</SfChart>

XName

Gets or sets the field name in the data source that represents the x-axis value.

Declaration
public string XName { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the x-axis value.
Remarks

This property is applicable to both series and technical indicators, determining how data points are bound to the x-axis in the chart.

Examples
// This example demonstrates how to bind a field from for data source to X axis.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
</SfChart>

YAxisName

Gets or sets the name of the vertical axis associated with the series.

Declaration
public string YAxisName { get; set; }
Property Value
Type Description
System.String

A string representing the name of the associated vertical axis. Default is "PrimaryYAxis".
Remarks

Use this property to link the series to a specific vertical axis, allowing for targeted data plotting on the chart. It is applicable for series and technical indicators. It requires Axes of the chart.

Examples
// This example demonstrates how to assign secondary y axis to the chart series.
<SfChart>
    <ChartAxis Name="YAxis" />
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
    <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
</SfChart>

YName

Gets or sets the field name in the data source that represents the y-axis value.

Declaration
public string YName { get; set; }
Property Value
Type Description
System.String

A string specifying the data source field for the y-axis value.
Remarks

This property is used to map data points to the y-axis.

Examples
// This example demonstrates how to bind a field from for data source to y axis.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
</SfChart>

ZOrder

Specifies the z-order of the series.

Declaration
public int ZOrder { get; set; }
Property Value
Type Description
System.Int32

An integer representing the stacking order of the series.
Remarks

This determines the drawing order of series in the chart, with higher values drawn above lower values.

Examples
// This example demonstrates how to use zorder in chart series.
<SfChart>
    <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Column" ZOrder="1">
    </ChartSeries>
    <ChartSeries DataSource="@Data" XName="XValue" YName="Y1Value" Type="ChartSeriesType.Column">
    </ChartSeries>
</SfChart>

Implements

System.IAsyncDisposable