menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class StackedAreaSeries - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class StackedAreaSeries

    The StackedAreaSeries is a special kind of area series which is similar to regular area series except that the Y-values stack on top of each other.

    Inheritance
    System.Object
    ChartSeries
    CartesianSeries
    XyDataSeries
    StackedSeriesBase
    StackedAreaSeries
    StackedArea100Series
    Implements
    System.ComponentModel.INotifyPropertyChanged
    Inherited Members
    CartesianSeries.DataLabelSettings
    CartesianSeries.DataLabelSettingsProperty
    CartesianSeries.OnApplyTemplate()
    CartesianSeries.ShowTrackballLabel
    CartesianSeries.ShowTrackballLabelProperty
    CartesianSeries.XAxisName
    CartesianSeries.XAxisNameProperty
    CartesianSeries.YAxisName
    CartesianSeries.YAxisNameProperty
    ChartSeries.ActualXAxis
    ChartSeries.ActualYAxis
    ChartSeries.AnimationDuration
    ChartSeries.AnimationDurationProperty
    ChartSeries.Chart
    ChartSeries.EnableAnimation
    ChartSeries.EnableAnimationProperty
    ChartSeries.EnableTooltip
    ChartSeries.EnableTooltipProperty
    ChartSeries.Fill
    ChartSeries.FillProperty
    ChartSeries.IsSeriesVisible
    ChartSeries.IsSeriesVisibleProperty
    ChartSeries.IsVisibleOnLegend
    ChartSeries.IsVisibleOnLegendProperty
    ChartSeries.ItemsSource
    ChartSeries.ItemsSourceProperty
    ChartSeries.Label
    ChartSeries.LabelProperty
    ChartSeries.LegendIcon
    ChartSeries.LegendIconProperty
    ChartSeries.LegendIconTemplate
    ChartSeries.LegendIconTemplateProperty
    ChartSeries.ListenPropertyChange
    ChartSeries.ListenPropertyChangeProperty
    ChartSeries.OnPointerExited(PointerRoutedEventArgs)
    ChartSeries.OnPointerMoved(PointerRoutedEventArgs)
    ChartSeries.OnPointerPressed(PointerRoutedEventArgs)
    ChartSeries.OnPointerReleased(PointerRoutedEventArgs)
    ChartSeries.PaletteBrushes
    ChartSeries.PaletteBrushesProperty
    ChartSeries.PropertyChanged
    ChartSeries.ResumeNotification()
    ChartSeries.SelectionBehavior
    ChartSeries.SelectionBehaviorProperty
    ChartSeries.ShowDataLabels
    ChartSeries.ShowDataLabelsProperty
    ChartSeries.SpacingProperty
    ChartSeries.SuspendNotification()
    ChartSeries.TooltipTemplate
    ChartSeries.TooltipTemplateProperty
    ChartSeries.TrackballLabelTemplate
    ChartSeries.TrackballLabelTemplateProperty
    ChartSeries.XBindingPath
    ChartSeries.XBindingPathProperty
    StackedSeriesBase.GroupName
    StackedSeriesBase.GroupNameProperty
    XyDataSeries.StrokeWidth
    XyDataSeries.StrokeWidthProperty
    XyDataSeries.YBindingPath
    XyDataSeries.YBindingPathProperty
    Namespace: Syncfusion.UI.Xaml.Charts
    Assembly: Syncfusion.Chart.WinUI.dll
    Syntax
    public class StackedAreaSeries : StackedSeriesBase, INotifyPropertyChanged
    Remarks

    To render a series, create an instance of StackedAreaSeries class, and add it to the Series collection.

    It provides options for Fill, PaletteBrushes, Stroke, , and opacity to customize the appearance.

    EnableTooltip - A tooltip displays information while tapping or mouse hovering over a segment. To display the tooltip on chart, need to set the EnableTooltip property as true in StackedAreaSeries class, and also refer TooltipBehavior property.

    Data Label - Data labels are used to display values related to a chart segment. To render the data labels, you need to set the property as true in StackedAreaSeries class. To customize the chart data labels alignment, placement, and label styles, you need to create an instance of CartesianDataLabelSettings and set to the DataLabelSettings property.

    Selection - To enable the data point selection in a chart, create an instance of DataPointSelectionBehavior and set it to the property of the chart series. To highlight the selected segment data label, set the value for SelectionBrush property in DataPointSelectionBehavior.

    Animation - To animate the series, set True to the EnableAnimation property.

    LegendIcon - To customize the legend icon using the LegendIcon property.

    Examples
    • Xaml
    • C#
    • ViewModel
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.XAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.XAxes>
    
              <chart:SfCartesianChart.YAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.YAxes>
    
              <chart:StackedAreaSeries ItemsSource="{Binding Data}"
                                       XBindingPath="XValue"
                                       YBindingPath="YValue"/>
    
              <chart:StackedAreaSeries ItemsSource="{Binding Data}"
                                       XBindingPath="XValue"
                                       YBindingPath="YValue1"/> 
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
    
        NumericalAxis xAxis = new NumericalAxis();
        NumericalAxis yAxis = new NumericalAxis();
    
        chart.XAxes.Add(xAxis);
        chart.YAxes.Add(yAxis);
    
        ViewModel viewModel = new ViewModel();
    
        StackedAreaSeries series = new StackedAreaSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);
    
        StackedAreaSeries series1 = new StackedAreaSeries();
        series1.ItemsSource = viewModel.Data;
        series1.XBindingPath = "XValue";
        series1.YBindingPath = "YValue1";
        chart.Series.Add(series1); 
        public ObservableCollection<Model> Data { get; set; }
    
        public ViewModel()
        {
           Data = new ObservableCollection<Model>();
           Data.Add(new Model() { XValue = 10, YValue = 100, YValue1 = 110 });
           Data.Add(new Model() { XValue = 20, YValue = 150, YValue1 = 100 });
           Data.Add(new Model() { XValue = 30, YValue = 110, YValue1 = 130 });
           Data.Add(new Model() { XValue = 40, YValue = 230, YValue1 = 180 });
        }

    Constructors

    StackedAreaSeries()

    Declaration
    public StackedAreaSeries()

    Fields

    IsClosedProperty

    Identifies the IsClosed dependency property.

    Declaration
    public static readonly DependencyProperty IsClosedProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for IsClosed dependency property.

    StrokeProperty

    The DependencyProperty for Stroke property.

    Declaration
    public static readonly DependencyProperty StrokeProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    Properties

    IsClosed

    Gets or sets a value indicating whether the area path's stroke should be closed or open.

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

    If its true, the area path will be closed by stroke; otherwise, it will be opened.

    Remarks

    To highlight the close path, set the Stroke and StrokeWidth properties in the series class.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
             <!-- ... Eliminated for simplicity-->
             <chart:StackedAreaSeries ItemsSource="{Binding Data}"
                                      XBindingPath="XValue"
                                      YBindingPath="YValue"
                                      IsClosed = "True"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
       // Eliminated for simplicity
    
        StackedAreaSeries series = new StackedAreaSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        series.IsClosed = true;
        chart.Series.Add(series);

    Stroke

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type
    Microsoft.UI.Xaml.Media.Brush

    Methods

    OnTapped(TappedRoutedEventArgs)

    Declaration
    protected override void OnTapped(TappedRoutedEventArgs e)
    Parameters
    Type Name Description
    Microsoft.UI.Xaml.Input.TappedRoutedEventArgs e
    Overrides
    ChartSeries.OnTapped(TappedRoutedEventArgs)

    Implements

    System.ComponentModel.INotifyPropertyChanged

    See Also

    StackedAreaSegment
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved