public class ColumnSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, 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
Microsoft.Maui.Controls.BindableProperty

Remarks

Represents the corner radius of the columns in the column series.

SpacingProperty

Identifies the Spacing bindable property.

Declaration

public static readonly BindableProperty SpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Represents the spacing between the columns in the column series.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Represents the stroke brush for the column series, defining the outline color of the columns.

WidthProperty

Identifies the Width bindable property.

Declaration

public static readonly BindableProperty WidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Represents the width of the columns in the column series. Default value is 0.8.

Properties

CornerRadius

Gets or sets the corner radius that smooths the edges of columns in a 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 ranging from 0 to 1, where the default value is 0.

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 column segment.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values ranging from 0 to 1, where the default value is `0.8`.

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()

Creates and initializes a new chart segment for the chart.

Declaration

protected override ChartSegment CreateSegment()

Returns

Type
ChartSegment

Overrides

ChartSeries.CreateSegment()