How to show markers on data points on both High and Low Series on SfChart SplineRangeAreaSeries

[Eric Nguyen]

Hello,

In my Syncfusion WPF SfChart, I have a ChartSeriesCollection of SplineRangeAreaSeries objects. I want the SplineRangeAreaSereies to show a marker per data point at the High AND Low values. My understanding is that there is no built-in way to show both High and Low markers simultaneously. Is this true?

Are you able to provide a code behind examples that shows markers at the low value of one series and at the high value of the other series?

Best,
Eric Nguyen

[Subash Sorimuthupattaraja]

Hi Eric,

It is possible to display markers at both the High and Low values in a SplineRangeAreaSeries by configuring the AdornmentsPosition property within ChartAdornmentInfo. Setting AdornmentsPosition to TopAndBottom displays markers at both the High and Low values of the SplineRangeAreaSeries.

Here’s a code-behind example:
 

SfChart chart = new();

SplineRangeAreaSeries series1 = new()

{

    ItemsSource = viewModel.Data,

    XBindingPath = "Category",

    High = "High",

    Low = "Low",

    Interior = Brushes.Orange

};

 

ChartAdornmentInfo adornment = new()

{

    ShowMarker = true,

    SymbolStroke = Brushes.OrangeRed,

    SymbolInterior = Brushes.White,

    Symbol = ChartSymbol.Ellipse,

    AdornmentsPosition = AdornmentsPosition.TopAndBottom

};

 

series1.AdornmentsInfo = adornment;

chart.Series.Add(series1);

Output:

To display data markers at only one end of the range, either the High or the Low, in a SplineRangeAreaSeries, you can use the AdornmentsPosition.Top or AdornmentsPosition.Bottom options. The Top option aligns markers with the High value, while Bottom aligns them with the Low value.

Refer to the below code snippet:

SfChart chart = new();

SplineRangeAreaSeries series1 = new()

{

    ItemsSource = viewModel.Data,

    XBindingPath = "Category",

    High = "High",

    Low = "Low",

    Interior = Brushes.Orange

};

 

ChartAdornmentInfo adornment = new()

{

    ShowMarker = true,

    SymbolStroke = Brushes.OrangeRed,

    SymbolInterior = Brushes.White,

    Symbol = ChartSymbol.Ellipse,

    AdornmentsPosition = AdornmentsPosition.Top

};

 

series1.AdornmentsInfo = adornment;

 

SplineRangeAreaSeries series2 = new()

{

    ItemsSource = viewModel.Data2,

    XBindingPath = "Category",

    High = "High",

    Low = "Low",

    Interior = Brushes.SkyBlue

};

 

series2.AdornmentsInfo = new ChartAdornmentInfo()

{

    ShowMarker = true,

    SymbolStroke = Brushes.RoyalBlue,

    SymbolInterior = Brushes.White,

    Symbol = ChartSymbol.Ellipse,

    AdornmentsPosition = AdornmentsPosition.Bottom

};

 

chart.Series.Add(series1);

chart.Series.Add(series2);

Output:

Kindly checkout the official documentation on Positioning Data Markers.

If you need further assistance or additional details—feel free to reach out.

Regards,

Subash S