Class SfCartesianChart
Renders the Cartesian type charts.
Implements
Inherited Members
Namespace: Syncfusion.UI.Xaml.Charts
Assembly: Syncfusion.Chart.WinUI.dll
Syntax
public class SfCartesianChart : ChartBase, IDisposable
Remarks
The Cartesian chart control is used to visualize the data graphically, it typically have horizontal and vertical axes.
SfCartesianChart class properties provides an option to add the series and axis collection, allows to customize the chart elements such as series, axis, legend, data label and tooltip features.

Axis
ChartAxis is used to locate a data point inside the chart area. Charts typically have two axes that are used to measure and categorize data. Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the Category, Numeric and Date time.
To render an axis, the chart axis instance has to be added in chart’s XAxes and YAxes collection as per the following code snippet.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
Series
ChartSeries is the visual representation of data. SfCartesianChart offers many types such as Line, Fast line, Fast column, Fast scatter, Fast step line, Spline, Column, Scatter, Bubble, Area and SplineArea series. Based on your requirements and specifications, any type of series can be added for data visualization.
To render a series, create an instance of required series class, and add it to the Series collection.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:LineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
<chart:LineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Legend
The Legend contains list of chart series or data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. The Series Label property text will be displayed in the associated legend item.
To render a legend, create an instance of ChartLegend, and assign it to the Legend property.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.Legend>
<chart:ChartLegend/>
</chart:SfCartesianChart.Legend>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:LineSeries Label="Singapore" ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
<chart:LineSeries Label="Spain" ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Tooltip
Tooltip displays information while tapping or mouse hover on the segment. To display the tooltip on chart, you need to set the ShowTooltip property as true in ChartSeriesBase.
To customize the appearance of the tooltip elements like Background, TextColor and Font, create an instance of ChartTooltipBehavior class, modify the values, and assign it to the chart’s TooltipBehavior property.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.TooltipBehavior>
<chart:ChartTooltipBehavior/>
</chart:SfCartesianChart.TooltipBehavior>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:LineSeries ShowTooltip="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
<chart:LineSeries ShowTooltip="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Data Label
Data labels are used to display values related to a chart segment. To render the data labels, you need to enable the ShowDataLabels property as true in DataMarkerSeries class.
To customize the chart data labels alignment, placement and label styles, need to create an instance of CartesianDataLabelSettings and set to the DataLabelSettings property.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:ColumnSeries ShowDataLabels="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Zooming and Panning
SfCartesianChart allows you to zoom the chart area with the help of the zoom feature. This behavior is mostly used to view the data point in the specific area, when there are large number of data points inside the chart.
Zooming and panning provides you to take a close-up look of the data point plotted in the series. To enable the zooming and panning in the chart, create an instance of ChartZoomPanBehavior and set it to the ZoomPanBehavior property of SfCartesianChart.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.ZoomPanBehavior>
<chart:ChartZoomPanBehavior EnablePanning = "True" EnableDoubleTap="True" EnablePinchZooming="True"/>
</chart:SfCartesianChart.ZoomPanBehavior>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
<chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Selection
SfCartesianChart allows you to select or highlight a segment or series in the chart by using ChartSelectionBehavior.
SfCartessianChart provides seperate behaviors for series and segment selection. To enable the series selection in the chart, create an instance of SeriesSelectionBehavior and set it to the SelectionBehavior property of SfCartesianChart.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.SelectionBehavior>
<chart:SeriesSelectionBehavior SelectionBrush="Red"/>
</chart:SfCartesianChart.SelectionBehavior>
<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="YValue1"/>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Cross Hair
SfCartesianChart allows you to view the informations related to Chart coordinates, at mouse over position or at touch contact point inside a Chart.
ChartCrosshairBehavior displays a vertical line, horizontal line and a popup like control displaying information about the data point at touch contact point or at mouse over position. To enable the cross hair in the chart, create an instance of ChartCrosshairBehavior and set it to the CrosshairBehavior property of SfCartesianChart.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.CrosshairBehavior>
<chart:ChartCrosshairBehavior/>
</chart:SfCartesianChart.CrosshairBehavior>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
<chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Track Ball
SfCartesianChart allows you to view tooltip for the data points that are nearer to mouse over position or at touch contact point in a Chart.
To enable the track ball in the chart, create an instance of ChartTrackballBehavior and set it to the TrackballBehavior property of SfCartesianChart.
To view the trackball label in the particular axis, you have to enable the ShowTrackballInfo property in that axis.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.TrackballBehavior>
<chart:ChartTrackballBehavior/>
</chart:SfCartesianChart.TrackballBehavior>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis ShowTrackballInfo="true"/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
<chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Constructors
SfCartesianChart()
Declaration
public SfCartesianChart()
Fields
CrosshairBehaviorProperty
The DependencyProperty for CrosshairBehavior property.
Declaration
public static readonly DependencyProperty CrosshairBehaviorProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty |
EnableSideBySideSeriesPlacementProperty
Identifies the EnableSideBySideSeriesPlacement dependency property.
Declaration
public static readonly DependencyProperty EnableSideBySideSeriesPlacementProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
IsTransposedProperty
The DependencyProperty for IsTransposed property.
Declaration
public static readonly DependencyProperty IsTransposedProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty |
PaletteBrushesProperty
Identifies the PaletteBrushes dependency property.
Declaration
public static readonly DependencyProperty PaletteBrushesProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
PlotAreaBackgroundProperty
Identifies the PlotAreaBackground dependency property.
Declaration
public static readonly DependencyProperty PlotAreaBackgroundProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
PlotAreaBorderBrushProperty
Identifies the PlotAreaBorderBrush dependency property.
Declaration
public static readonly DependencyProperty PlotAreaBorderBrushProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
PlotAreaBorderThicknessProperty
Identifies the PlotAreaBorderThickness dependency property.
Declaration
public static readonly DependencyProperty PlotAreaBorderThicknessProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
SelectionBehaviorProperty
The DependencyProperty for SelectionBehavior property.
Declaration
public static readonly DependencyProperty SelectionBehaviorProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty |
SeriesProperty
Identifies the Series dependency property.
Declaration
public static readonly DependencyProperty SeriesProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
TrackballBehaviorProperty
The DependencyProperty for TrackballBehavior property.
Declaration
public static readonly DependencyProperty TrackballBehaviorProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty |
ZoomPanBehaviorProperty
The DependencyProperty for ZoomPanBehavior property.
Declaration
public static readonly DependencyProperty ZoomPanBehaviorProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty |
Properties
CrosshairBehavior
Declaration
public ChartCrosshairBehavior CrosshairBehavior { get; set; }
Property Value
Type | Description |
---|---|
ChartCrosshairBehavior |
EnableSideBySideSeriesPlacement
Declaration
public bool EnableSideBySideSeriesPlacement { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
IsTransposed
Declaration
public bool IsTransposed { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
PaletteBrushes
Declaration
public IList<Brush> PaletteBrushes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IList<Microsoft.UI.Xaml.Media.Brush> |
PlotAreaBackground
Declaration
public Brush PlotAreaBackground { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.UI.Xaml.Media.Brush |
PlotAreaBorderBrush
Declaration
public Brush PlotAreaBorderBrush { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.UI.Xaml.Media.Brush |
PlotAreaBorderThickness
Declaration
public Thickness PlotAreaBorderThickness { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.UI.Xaml.Thickness |
SelectionBehavior
Declaration
public SeriesSelectionBehavior SelectionBehavior { get; set; }
Property Value
Type | Description |
---|---|
SeriesSelectionBehavior |
Series
Declaration
public CartesianSeriesCollection Series { get; set; }
Property Value
Type | Description |
---|---|
CartesianSeriesCollection |
TrackballBehavior
Declaration
public ChartTrackballBehavior TrackballBehavior { get; set; }
Property Value
Type | Description |
---|---|
ChartTrackballBehavior |
XAxes
Declaration
public ObservableCollection<ChartAxis> XAxes { get; }
Property Value
Type | Description |
---|---|
System.Collections.ObjectModel.ObservableCollection<ChartAxis> |
YAxes
Declaration
public ObservableCollection<RangeAxisBase> YAxes { get; }
Property Value
Type | Description |
---|---|
System.Collections.ObjectModel.ObservableCollection<RangeAxisBase> |
ZoomPanBehavior
Declaration
public ChartZoomPanBehavior ZoomPanBehavior { get; set; }
Property Value
Type | Description |
---|---|
ChartZoomPanBehavior |