Class ColumnSeries

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

Inheritance

System.Object

ChartSeries

CartesianSeries

XYDataSeries

ColumnSeries

Inherited Members

XYDataSeries.YBindingPathProperty

XYDataSeries.StrokeWidthProperty

XYDataSeries.YBindingPath

XYDataSeries.StrokeWidth

CartesianSeries.XAxisNameProperty

CartesianSeries.YAxisNameProperty

CartesianSeries.DataLabelSettingsProperty

CartesianSeries.LabelProperty

CartesianSeries.ShowTrackballLabelProperty

CartesianSeries.OnBindingContextChanged()

CartesianSeries.XAxisName

CartesianSeries.YAxisName

CartesianSeries.DataLabelSettings

CartesianSeries.Label

CartesianSeries.ActualXAxis

CartesianSeries.ActualYAxis

CartesianSeries.ShowTrackballLabel

ChartSeries.ItemsSourceProperty

ChartSeries.XBindingPathProperty

ChartSeries.FillProperty

ChartSeries.PaletteBrushesProperty

ChartSeries.IsVisibleProperty

ChartSeries.OpacityProperty

ChartSeries.EnableAnimationProperty

ChartSeries.EnableTooltipProperty

ChartSeries.TooltipTemplateProperty

ChartSeries.ShowDataLabelsProperty

ChartSeries.LegendIconProperty

ChartSeries.IsVisibleOnLegendProperty

ChartSeries.SelectionBehaviorProperty

ChartSeries.GetDataPointIndex(Single, Single)

ChartSeries.CreateAnimation(Action<Double>)

ChartSeries.DrawDataLabel(ICanvas, Brush, String, PointF, Int32)

ChartSeries.DrawSeries(ICanvas, ReadOnlyObservableCollection<ChartSegment>, RectF)

ChartSeries.ItemsSource

ChartSeries.XBindingPath

ChartSeries.Fill

ChartSeries.PaletteBrushes

ChartSeries.IsVisible

ChartSeries.Opacity

ChartSeries.EnableAnimation

ChartSeries.EnableTooltip

ChartSeries.TooltipTemplate

ChartSeries.ShowDataLabels

ChartSeries.LegendIcon

ChartSeries.IsVisibleOnLegend

ChartSeries.SelectionBehavior

ChartSeries.XRange

ChartSeries.YRange

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public class ColumnSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDrawCustomLegendIcon, ISBSDependent

Remarks

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

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

EnableTooltip - A tooltip displays information while tapping or mouse hovering above a segment. To display the tooltip on a chart, you 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.

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

Examples

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:ColumnSeries
                  ItemsSource="{Binding Data}"
                  XBindingPath="XValue"
                  YBindingPath="YValue"/>
          </chart:SfCartesianChart.Series>  

    </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

CornerRadiusProperty

Identifies the CornerRadius bindable property.

Declaration

public static readonly BindableProperty CornerRadiusProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

SpacingProperty

Identifies the Spacing bindable property.

Declaration

public static readonly BindableProperty SpacingProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

WidthProperty

Identifies the Width bindable property.

Declaration

public static readonly BindableProperty WidthProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

Properties

CornerRadius

Gets or sets the value for the corner radius that helps to smooth column edges in column series.

Declaration

public CornerRadius CornerRadius { get; set; }

Property Value

Type	Description
Microsoft.Maui.CornerRadius	It accepts Microsoft.Maui.CornerRadius value.

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:ColumnSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           CornerRadius = "5"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    ColumnSeries columnSeries = new ColumnSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          CornerRadius = new CornerRadius(5)
    };

    chart.Series.Add(columnSeries);

Spacing

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

Declaration

public double Spacing { 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"
                           Spacing = "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",
          Spacing = 0.3,
    };

    chart.Series.Add(columnSeries);

Stroke

Gets or sets a value to customize the stroke appearance of the column series.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	It accepts Microsoft.Maui.Controls.Brush values and its default value is Transparent.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:ColumnSeries ItemsSource="{Binding Data}"
                             XBindingPath="XValue"
                             YBindingPath="YValue"
                             Stroke = "Red" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    ColumnSeries series = new ColumnSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          Stroke = new SolidColorBrush(Colors.Red),
    };

    chart.Series.Add(series);

Width

Gets or sets a value to change the width of the rectangle.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double	It accepts double values and the default value is 0.8. 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"
                           Width = "0.7"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    ColumnSeries columnSeries = new ColumnSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          Width = 0.7,
    };

    chart.Series.Add(columnSeries);

Methods

CreateSegment()

Declaration

protected override ChartSegment CreateSegment()

Returns

Type	Description
ChartSegment

Overrides

ChartSeries.CreateSegment()

Class ColumnSeries

Inheritance

Inherited Members

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

Remarks

Examples

Constructors

ColumnSeries()

Declaration

Fields

CornerRadiusProperty

Declaration

Field Value

SpacingProperty

Declaration

Field Value

StrokeProperty

Declaration

Field Value

WidthProperty

Declaration

Field Value

Properties

CornerRadius

Declaration

Property Value

Examples

Spacing

Declaration

Property Value

Examples

Stroke

Declaration

Property Value

Examples

Width

Declaration

Property Value

Examples

Methods

CreateSegment()

Declaration

Returns

Overrides

See Also