WinUI

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ColumnSeries

    Show / Hide Table of Contents

    Class ColumnSeries

    The ColumnSeries displays a set of vertical bars for the given data point values.

    Inheritance
    System.Object
    ChartSeries
    DataMarkerSeries
    CartesianSeries
    XyDataSeries
    ColumnSeries
    Implements
    ISupportAxes
    ISegmentSelectable
    ISegmentSpacing
    Inherited Members
    XyDataSeries.YBindingPathProperty
    XyDataSeries.YBindingPath
    CartesianSeries.DataLabelSettingsProperty
    CartesianSeries.ShowTrackballInfoProperty
    CartesianSeries.XAxisNameProperty
    CartesianSeries.YAxisNameProperty
    CartesianSeries.OnApplyTemplate()
    CartesianSeries.DataLabelSettings
    CartesianSeries.XAxisName
    CartesianSeries.YAxisName
    CartesianSeries.ShowTrackballInfo
    CartesianSeries.ISupportAxes.ActualXAxis
    CartesianSeries.ISupportAxes.ActualYAxis
    CartesianSeries.ISupportAxes.VisibleXRange
    CartesianSeries.ISupportAxes.VisibleYRange
    DataMarkerSeries.ShowDataLabelsProperty
    DataMarkerSeries.ShowDataLabels
    ChartSeries.SpacingProperty
    ChartSeries.TooltipTemplateProperty
    ChartSeries.EnableTooltipProperty
    ChartSeries.ListenPropertyChangeProperty
    ChartSeries.IsSeriesVisibleProperty
    ChartSeries.XBindingPathProperty
    ChartSeries.ItemsSourceProperty
    ChartSeries.TrackballLabelTemplateProperty
    ChartSeries.FillProperty
    ChartSeries.LabelProperty
    ChartSeries.LegendIconProperty
    ChartSeries.LegendIconTemplateProperty
    ChartSeries.IsVisibleOnLegendProperty
    ChartSeries.EnableAnimationProperty
    ChartSeries.AnimationDurationProperty
    ChartSeries.PaletteBrushesProperty
    ChartSeries.StrokeProperty
    ChartSeries.StrokeThicknessProperty
    ChartSeries.SuspendNotification()
    ChartSeries.ResumeNotification()
    ChartSeries.OnPointerPressed(PointerRoutedEventArgs)
    ChartSeries.OnPointerMoved(PointerRoutedEventArgs)
    ChartSeries.OnTapped(TappedRoutedEventArgs)
    ChartSeries.OnPointerExited(PointerRoutedEventArgs)
    ChartSeries.OnPointerReleased(PointerRoutedEventArgs)
    ChartSeries.PaletteBrushes
    ChartSeries.TooltipTemplate
    ChartSeries.EnableTooltip
    ChartSeries.ListenPropertyChange
    ChartSeries.IsSeriesVisible
    ChartSeries.ItemsSource
    ChartSeries.TrackballLabelTemplate
    ChartSeries.Fill
    ChartSeries.Label
    ChartSeries.LegendIcon
    ChartSeries.LegendIconTemplate
    ChartSeries.IsVisibleOnLegend
    ChartSeries.XBindingPath
    ChartSeries.EnableAnimation
    ChartSeries.AnimationDuration
    ChartSeries.StrokeThickness
    ChartSeries.Chart
    ChartSeries.Stroke
    ChartSeries.PropertyChanged
    Namespace: Syncfusion.UI.Xaml.Charts
    Assembly: Syncfusion.Chart.WinUI.dll
    Syntax
    public class ColumnSeries : XyDataSeries, ISupportAxes, ISegmentSelectable, ISegmentSpacing
    Remarks

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

    It provides options for Fill, PaletteBrushes, StrokeThickness, 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 ColumnSeries 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 ShowDataLabels property as true in ColumnSeries 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.

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

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

    SegmentSpacing - To specify the spacing between segments using the SegmentSpacing property.

    Examples
    • Xaml
    • C#
    • ViewModel
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.XAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.XAxes>
    
              <chart:SfCartesianChart.YAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.YAxes>
    
              <chart:ColumnSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"/>
    
        </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();
    
        ColumnSeries series = new ColumnSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);
        public ObservableCollection<Model> Data { get; set; }
    
        public ViewModel()
        {
           Data = new ObservableCollection<Model>();
           Data.Add(new Model() { XValue = 10, YValue = 100 });
           Data.Add(new Model() { XValue = 20, YValue = 150 });
           Data.Add(new Model() { XValue = 30, YValue = 110 });
           Data.Add(new Model() { XValue = 40, YValue = 230 });
        }

    Constructors

    ColumnSeries()

    Declaration
    public ColumnSeries()

    Fields

    CustomTemplateProperty

    The DependencyProperty for CustomTemplate property.

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

    SegmentSpacingProperty

    The DependencyProperty for SegmentSpacing property.

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

    SelectionBehaviorProperty

    The DependencyProperty for SelectionBehavior property. .

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

    Properties

    CustomTemplate

    Gets or sets the template to customize the appearance of column series.

    Declaration
    public DataTemplate CustomTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    It accepts Microsoft.UI.Xaml.DataTemplate value.

    Examples
    • Xaml
        <chart:SfCartesianChart>
    
             <!-- ... Eliminated for simplicity-->
             <chart:ColumnSeries ItemsSource="{Binding Data}"
                                        XBindingPath="XValue"
                                        YBindingPath="YValue">
                 <chart:ColumnSeries.CustomTemplate>
                     <DataTemplate>
                         <Canvas>
                             <Rectangle Fill = "{Binding Fill}" Width="{Binding Width}" Height="{Binding Height}"  
                                        Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}" Stroke="{Binding Stroke}"/>
                         </Canvas>
                     </DataTemplate>
                 </chart:ColumnSeries.CustomTemplate>
             </chart:ColumnSeries>
    
        </chart:SfCartesianChart>

    SegmentSpacing

    Gets or sets a value to indicate spacing between the segments across the series.

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

    It accepts double values and the default value is 0. Here, the value is between 0 and 1.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:ColumnSeries ItemsSource="{Binding Data}"
                               XBindingPath="XValue"
                               YBindingPath="YValue"
                               SegmentSpacing = "0.3"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        ColumnSeries columnSeries = new ColumnSeries()
        {
              ItemsSource = viewModel.Data,
              XBindingPath = "XValue",
              YBindingPath = "YValue",
              SegmentSpacing = 0.3,
        };
    
        chart.Series.Add(columnSeries);

    SelectionBehavior

    Gets or sets a selection behavior that enables you to select or highlight a segment in the series.

    Declaration
    public DataPointSelectionBehavior SelectionBehavior { get; set; }
    Property Value
    Type Description
    DataPointSelectionBehavior

    This property takes the DataPointSelectionBehavior instance as a value, and its default value is null.

    Remarks

    To highlight the selected data point, set the value for the SelectionBrush property in the DataPointSelectionBehavior class.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:ColumnSeries ItemsSource="{Binding Data}"
                              XBindingPath="XValue"
                              YBindingPath="YValue">
                 <chart:ColumnSeries.SelectionBehavior>
                     <chart:DataPointSelectionBehavior SelectionBrush = "Red" />
                 </chart:ColumnSeries.SelectionBehavior>
             </chart:ColumnSeries>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        ColumnSeries series = new ColumnSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        series.SelectionBehavior = new DataPointSelectionBehavior()
        {
           SelectionBrush = new SolidColorBrush(Colors.Red),
        };
        chart.Series.Add(series);
    See Also
    SelectedIndex
    SelectionBrush
    SelectionChanging
    SelectionChanged

    Explicit Interface Implementations

    ISegmentSpacing.CalculateSegmentSpacing(Double, Double, Double)

    Declaration
    double ISegmentSpacing.CalculateSegmentSpacing(double spacing, double Right, double Left)
    Parameters
    Type Name Description
    System.Double spacing
    System.Double Right
    System.Double Left
    Returns
    Type Description
    System.Double

    Implements

    ISupportAxes
    ISegmentSelectable
    ISegmentSpacing

    See Also

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