Class ChartSeries

ChartSeries is the base class for all chart types.

Inheritance

System.Object

ChartSeries

CartesianSeries

CircularSeries

PolarSeries

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public abstract class ChartSeries : BindableObject, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent

Constructors

ChartSeries()

Initializes a new instance of the ChartSeries.

Declaration

public ChartSeries()

Fields

EnableAnimationProperty

Identifies the EnableAnimation bindable property.

Declaration

public static readonly BindableProperty EnableAnimationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

EnableTooltipProperty

Identifies the EnableTooltip bindable property.

Declaration

public static readonly BindableProperty EnableTooltipProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

FillProperty

Identifies the Fill bindable property.

Declaration

public static readonly BindableProperty FillProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsVisibleOnLegendProperty

Identifies the IsVisibleOnLegend bindable property.

Declaration

public static readonly BindableProperty IsVisibleOnLegendProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsVisibleProperty

Identifies the IsVisible bindable property.

Declaration

public static readonly BindableProperty IsVisibleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelContextProperty

Identifies the LabelContext bindable property.

Declaration

public static readonly BindableProperty LabelContextProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelTemplateProperty

Indentifies the LabelTemplate binable property

Declaration

public static readonly BindableProperty LabelTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LegendIconProperty

Identifies the LegendIcon bindable property.

Declaration

public static readonly BindableProperty LegendIconProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

OpacityProperty

Identifies the Opacity bindable property.

Declaration

public static readonly BindableProperty OpacityProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteBrushesProperty

Identifies the PaletteBrushes bindable property.

Declaration

public static readonly BindableProperty PaletteBrushesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionBehaviorProperty

Identifies the SelectionBehavior bindable property.

Declaration

public static readonly BindableProperty SelectionBehaviorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowDataLabelsProperty

Identifies the ShowDataLabels bindable property.

Declaration

public static readonly BindableProperty ShowDataLabelsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TooltipTemplateProperty

Identifies the TooltipTemplate bindable property.

Declaration

public static readonly BindableProperty TooltipTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

XBindingPathProperty

Identifies the XBindingPath bindable property.

Declaration

public static readonly BindableProperty XBindingPathProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

EnableAnimation

Gets or sets a value indicating whether to animate the chart series on loading.

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and its default value is `False`.

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

EnableTooltip

Gets or sets a boolean value indicating whether the tooltip for series should be shown or hidden.

Declaration

public bool EnableTooltip { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and its default value is `False`.

Remarks

The series tooltip will appear when you click or tap the series area.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

Fill

Gets or sets a brush value to customize the series appearance.

Declaration

public Brush Fill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	It accepts a Microsoft.Maui.Controls.Brush value and its default value is null.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

IsVisible

Gets or sets a value that indicates whether the series is visible or not.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and its default value is `True`.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

IsVisibleOnLegend

Gets or sets a value that indicates whether to show a legend item for this series.

Declaration

public bool IsVisibleOnLegend { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and its default value is `True`.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

        <chart:SfCartesianChart.Legend>
           <chart:ChartLegend />
        </chart:SfCartesianChart.Legend>

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

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    chart.Legend = new ChartLegend();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

ItemsSource

Gets or sets a data points collection that will be used to plot a chart.

Declaration

public object ItemsSource { get; set; }

Property Value

Type
System.Object

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

LabelContext

Gets or sets an option that determines the content to be displayed in the data labels. It is recommended to use PieSeries, DoughnutSeries, and BarSeries with LabelContext set to Percentage.

Declaration

public LabelContext LabelContext { get; set; }

Property Value

Type	Description
LabelContext	Its default value is YValue.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCircularChart>

          <chart:SfCircularChart.Series>
              <chart:PieSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  ShowDataLabels="True"
                                  LabelContext="Percentage">
              </chart:PieSeries> 
          </chart:SfCircularChart.Series>

    </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();

    PieSeries series = new PieSeries();
    series.ItemsSource = new Viewmodel().Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    series.ShowDataLabels = true;
    series.LabelContext = LabelContext.Percentage;
    chart.Series.Add(series);

LabelTemplate

Gets or sets the DataTemplate that can be used to customize the appearance of the Data label.

Declaration

public DataTemplate LabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts the Microsoft.Maui.Controls.DataTemplate value.

Examples

MainWindow.xaml
MainWindow.cs

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.Resources>
              <DataTemplate x:Key="DataLabelTemplate">
                 <VerticalStackLayout>
                    <Image Source="image.png" 
                           WidthRequest="20" 
                           HeightRequest="20"/>
                    <Label Text="{Binding Label}" 
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"/>
                 </VerticalStackLayout>
              </DataTemplate>
          </chart:SfCartesianChart.Resources>

          <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"
                                  ShowDataLabels = "True"
                                  LabelTemplate="{StaticResource DataLabelTemplate}">
              </chart:ColumnSeries> 
          </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);

ColumnSeries series = new ColumnSeries();
series.ItemsSource = new ViewModel().Data;
series.XBindingPath = "XValue";
series.YBindingPath = "YValue";
series.ShowDataLabels = true;

DataTemplate labelTemplate = new DataTemplate(()=>
{
    VerticalStackLayout layout = new VerticalStackLayout();
    Image image = new Image()
    {
        Source = "image.png",
        WightRequest = 20,
        HeightRequest = 20
    };

    Label label = new Label()
    {
        TextColor = Colors.Black,
        FontAttributes = FontAttributes.Bold,
        FontSize = 12,
    }

    label.SetBinding(Label.TextProperty, new Binding("Label"));
    layout.Children.Add(image);
    layout.Children.Add(label);
    return layout;
}    

series.LabelTemplate = labelTemplate;
chart.Series.Add(series);

LegendIcon

Gets or sets a legend icon that will be displayed in the associated legend item.

Declaration

public ChartLegendIconType LegendIcon { get; set; }

Property Value

Type	Description
ChartLegendIconType	It accepts ChartLegendIconType values and its default value is Circle.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

        <chart:SfCartesianChart.Legend>
           <chart:ChartLegend />
        </chart:SfCartesianChart.Legend>

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

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    chart.Legend = new ChartLegend();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    ColumnSeries columnSeries = new ColumnSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          LegendIcon = ChartLegendIconType.Diamond,
    };

    chart.Series.Add(columnSeries);

Opacity

Gets or sets opacity of the chart series.

Declaration

public double Opacity { get; set; }

Property Value

Type	Description
System.Double	It accepts double values and the default value is 1. Here, the value ranges from 0 to 1.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

         <chart:ColumnSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           Opacity="0.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",
          Opacity = 0.5,
    };

    chart.Series.Add(columnSeries);

PaletteBrushes

Gets or sets the list of brushes that can be used to customize the appearance of the series.

Declaration

public IList<Brush> PaletteBrushes { get; set; }

Property Value

Type	Description
System.Collections.Generic.IList<Microsoft.Maui.Controls.Brush>	This property accepts a list of brushes as input and comes with a set of predefined brushes by default.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    List<Brush> CustomBrushes = new List<Brush>();
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(77, 208, 225)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(38, 198, 218)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 188, 212)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 172, 193)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143)));

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

SelectionBehavior

Gets or sets a value for initiating selection or highlighting of a single or multiple data points in the series.

Declaration

public DataPointSelectionBehavior SelectionBehavior { get; set; }

Property Value

Type	Description
DataPointSelectionBehavior	The default value is null.

Remarks

Note: This is only applicable for SfCartesianChart.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

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

</chart:SfCartesianChart>

 SfCartesianChart chart = new SfCartesianChart();

 ViewModel viewModel = new ViewModel();
 chart.BindingContext = viewModel;

 DataPointSelectionBehavior behavior = new DataPointSelectionBehavior();

 ColumnSeries series = new ColumnSeries()
 {
     ItemsSource = viewmodel.Data,
     XBindingPath = "XValue",
     YBindingPath = "YValue1",
     SelectionBehavior = behavior
 };

 chart.Series.Add(series);

ShowDataLabels

Gets or sets a value that indicates to enable the data labels for the series..

Declaration

public bool ShowDataLabels { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `False`.

Examples

MainWindow.xaml
MainWindow.cs

    <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"
                                  ShowDataLabels="True">
              </chart:ColumnSeries> 
          </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);

    ColumnSeries series = new ColumnSeries();
    series.ItemsSource = viewmodel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    series.ShowDataLabels = "True";
    chart.Series.Add(series);

TooltipTemplate

Gets or sets the DataTemplate that can be used to customize the appearance of the tooltip.

Declaration

public DataTemplate TooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts a Microsoft.Maui.Controls.DataTemplate value.

Examples

MainWindow.xaml

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.Resources>
              <DataTemplate x:Key="tooltipTemplate1">
                 <StackLayout Orientation = "Horizontal" >
                    <Label Text="{Binding Item.XValue}" 
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                    <Label Text = " : "
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                    <Label Text = "{Binding Item.YValue}"
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                 </StackLayout>
              </DataTemplate>
          </chart:SfCartesianChart.Resources>

          <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"
                                  EnableTooltip="True"
                                  TooltipTemplate="{StaticResource tooltipTemplate1}">
              </chart:ColumnSeries> 
          </chart:SfCartesianChart.Series>

    </chart:SfCartesianChart>

XBindingPath

Gets or sets a path value on the source object to serve a x value to the series.

Declaration

public string XBindingPath { get; set; }

Property Value

Type	Description
System.String	The string that represents the property name for the x plotting data, and its default value is null.

Examples

Xaml
C#

    <chart:SfCartesianChart>

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

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

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

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

    chart.Series.Add(columnSeries);

XRange

Gets the XRange values.

Declaration

public DoubleRange XRange { get; }

Property Value

Type
DoubleRange

YRange

Gets the YRange values.

Declaration

public DoubleRange YRange { get; }

Property Value

Type
DoubleRange

Methods

CreateAnimation(Action<Double>)

Declaration

protected virtual Animation CreateAnimation(Action<double> callback)

Parameters

Type	Name	Description
System.Action<System.Double>	callback

Returns

Type
Microsoft.Maui.Controls.Animation

CreateSegment()

Declaration

protected abstract ChartSegment CreateSegment()

Returns

Type
ChartSegment

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

Declaration

protected virtual void DrawDataLabel(ICanvas canvas, Brush fillcolor, string label, PointF point, int index)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
Microsoft.Maui.Controls.Brush	fillcolor
System.String	label
Microsoft.Maui.Graphics.PointF	point
System.Int32	index

DrawSeries(ICanvas, ReadOnlyObservableCollection<ChartSegment>, RectF)

Declaration

protected virtual void DrawSeries(ICanvas canvas, ReadOnlyObservableCollection<ChartSegment> segments, RectF clipRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Collections.ObjectModel.ReadOnlyObservableCollection<ChartSegment>	segments
Microsoft.Maui.Graphics.RectF	clipRect

GetDataPointIndex(Single, Single)

Methods to get the index of data point.

Declaration

public virtual int GetDataPointIndex(float pointX, float pointY)

Parameters

Type	Name	Description
System.Single	pointX
System.Single	pointY

Returns

Type
System.Int32

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()