Class SfChart

Represents a root class for chart which is used to plot a series of points in cartesian co-ordinate or visualize the points using non-cartesian chart types.

Inheritance

System.Object

SfChart

Namespace: Syncfusion.SfChart.XForms

Assembly: Syncfusion.SfChart.XForms.dll

Syntax

public class SfChart : View, IParentThemeElement, IThemeElement

Remarks

SfChart can plot multiple charts and used as a container view to display legend, axis and multiple chart series. Multiple chart series can be specified using Series property. Axis can be specified using PrimaryAxis and SecondaryAxis properties. Legend can be customized using Legend property. Since SfChart is a container view for both cartesian and non-cartesian charts, it can plot either cartesian or non-cartesian chart at a time when the Series collection contains mixed chart types.

Examples

SfChart chart = new SfChart();
this.BindingContext = new ViewModel();

chart.Title.Text = "Chart";
chart.Legend = new ChartLegend ();

CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.Title.Text = "Name";
chart.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Title.Text = "Height (in cm)";
chart.SecondaryAxis = secondaryAxis;

ColumnSeries series = new ColumnSeries();
series.SetBinding(ChartSeries.ItemsSourceProperty, "Data");
series.Label = "Heights";
series.XBindingPath = "Name";
series.YBindingPath = "Height";
series.DataMarker = new ChartDataMarker();
series.EnableTooltip = true;
chart.Series.Add(series);

public class ViewModel  
{
    public List<Person> Data { get; set; }

    public ViewModel()
    {
        Data = new List<Person>()
        {
            new Person { Name = "David", Height = 180 },
            new Person { Name = "Michael", Height = 170 },
            new Person { Name = "Steve", Height = 160 },
            new Person { Name = "Joel", Height = 182 }
        };
    }
}

public class Person   
{   
    public string Name { get; set; }
    public double Height { get; set; }
}

Constructors

SfChart()

Initializes a new instance of the SfChart class.

Declaration

public SfChart()

Fields

AreaBackgroundColorProperty

Gets or sets the background color of the plotting area. This is a bindable property.

Declaration

public static readonly BindableProperty AreaBackgroundColorProperty

Field Value

Type
Xamarin.Forms.BindableProperty

AreaBorderColorProperty

Gets or sets the border color of the plotting area. This is a bindable property.

Declaration

public static readonly BindableProperty AreaBorderColorProperty

Field Value

Type
Xamarin.Forms.BindableProperty

AreaBorderWidthProperty

Gets or sets the border width of the plotting area. This is a bindable property.

Declaration

public static readonly BindableProperty AreaBorderWidthProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ChartAnnotationsProperty

Gets or sets the collection of annotation to be added to the chart. This is a bindable property.

Declaration

public static readonly BindableProperty ChartAnnotationsProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ChartBehaviorsProperty

Gets or sets the collection of behavior to be added to the chart. This is a bindable property.

Declaration

public static readonly BindableProperty ChartBehaviorsProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ChartPaddingProperty

Gets or sets the padding of the chart. This is a bindable property.

Declaration

public static readonly BindableProperty ChartPaddingProperty

Field Value

Type
Xamarin.Forms.BindableProperty

ColorModelProperty

Gets or sets the color schemes for all series in the chart. This is a bindable property.

Declaration

public static readonly BindableProperty ColorModelProperty

Field Value

Type
Xamarin.Forms.BindableProperty

EnableSeriesSelectionProperty

Gets or sets a value indicating whether to allow the series selection.

Declaration

public static readonly BindableProperty EnableSeriesSelectionProperty

Field Value

Type
Xamarin.Forms.BindableProperty

LegendProperty

Gets or sets a legend that helps to identify the series in the chart. This is a bindable property.

Declaration

public static readonly BindableProperty LegendProperty

Field Value

Type
Xamarin.Forms.BindableProperty

PrimaryAxisProperty

Gets or sets a horizontal axis defined for the chart. This is a bindable property.

Declaration

public static readonly BindableProperty PrimaryAxisProperty

Field Value

Type
Xamarin.Forms.BindableProperty

SecondaryAxisProperty

Gets or sets a vertical axis defined for the chart. This is a bindable property.

Declaration

public static readonly BindableProperty SecondaryAxisProperty

Field Value

Type
Xamarin.Forms.BindableProperty

SeriesProperty

Gets or sets a collection of series to be added to the chart. To render a series, create an instance of the required series class, and add it to the collection.

Declaration

public static readonly BindableProperty SeriesProperty

Field Value

Type
Xamarin.Forms.BindableProperty

SeriesSelectionColorProperty

Gets or sets the color to the selected series.

Declaration

public static readonly BindableProperty SeriesSelectionColorProperty

Field Value

Type
Xamarin.Forms.BindableProperty

SideBySideSeriesPlacementProperty

Gets or sets the value that indicates whether the series can be placed side by side. This is a bindable property.

Declaration

public static readonly BindableProperty SideBySideSeriesPlacementProperty

Field Value

Type	Description
Xamarin.Forms.BindableProperty	This property takes Boolean value.

TechnicalIndicatorsProperty

Gets or sets the TechnicalIndicators property.

Declaration

public static readonly BindableProperty TechnicalIndicatorsProperty

Field Value

Type
Xamarin.Forms.BindableProperty

TitleProperty

Gets or sets the title for the chart. This is a mutable property.

Declaration

public static readonly BindableProperty TitleProperty

Field Value

Type
Xamarin.Forms.BindableProperty

Properties

AreaBackgroundColor

Gets or sets the background color of the plotting area. This is a bindable property.

Declaration

public Color AreaBackgroundColor { get; set; }

Property Value

Type	Description
Xamarin.Forms.Color	This property takes the Xamarin.Forms.Color value.

AreaBorderColor

Gets or sets the border color of plotting area. This is a bindable property.

Declaration

public Color AreaBorderColor { get; set; }

Property Value

Type	Description
Xamarin.Forms.Color	This property takes the Color value.

AreaBorderWidth

Gets or sets the border width of the plotting area. This is a bindable property.

Declaration

public double AreaBorderWidth { get; set; }

Property Value

Type	Description
System.Double	This property takes the double value.

Axes

Gets the Axes collection.

Declaration

public ChartAxisCollection Axes { get; }

Property Value

Type
ChartAxisCollection

Remarks

Clear method does not support for Axes collection.

ChartAnnotations

Gets or sets the collection of annotation to be added to the chart. This is a bindable property.

Declaration

public ChartAnnotationCollection ChartAnnotations { get; set; }

Property Value

Type	Description
ChartAnnotationCollection	ChartBehaviorCollection.

ChartBehaviors

Gets or sets the collection of behavior to be added to the chart. This is a bindable property.

Declaration

public ChartBehaviorCollection ChartBehaviors { get; set; }

Property Value

Type	Description
ChartBehaviorCollection	ChartBehaviorCollection.

ChartPadding

Gets or sets the padding of the chart. This is a bindable property.

Declaration

public Thickness ChartPadding { get; set; }

Property Value

Type	Description
Xamarin.Forms.Thickness	This property takes the Xamarin.Forms.Thickness as value and it's default value is 10.

ColorModel

Gets or sets the color schemes for all series in the chart. This is a bindable property.

Declaration

public ChartColorModel ColorModel { get; set; }

Property Value

Type
ChartColorModel

Remarks

It's a read only property and we need to set the Palette of the ChartColorModel class.

Examples

void MyPage()
{
	SfChart chart = new SfChart();
	chart.ColorModel.Palette = ChartColorPalette.Metro;
	this.content = chart;
}

EnableSeriesSelection

Gets or sets a value indicating whether to allow the series selection. This is a bindable property.

Declaration

public bool EnableSeriesSelection { get; set; }

Property Value

Type	Description
System.Boolean	This property takes the boolean value.

Legend

Gets or sets a legend that helps to identify the series in the chart. This is a bindable property.

Declaration

public ChartLegend Legend { get; set; }

Property Value

Type	Description
ChartLegend	This property take ChartLegend instance as value.

PrimaryAxis

Gets or sets a horizontal axis defined for the chart. This is a bindable property.

Declaration

public ChartAxis PrimaryAxis { get; set; }

Property Value

Type	Description
ChartAxis	This property gets or sets the any of the following axis instance as value:

SecondaryAxis

Gets or sets a vertical axis defined for the chart. This is a bindable property.

Declaration

public RangeAxisBase SecondaryAxis { get; set; }

Property Value

Type	Description
RangeAxisBase	This property gets or sets the NumericalAxis as its value.

Remarks

Secondary axis doesn't supports CategoryAxis or DateTimeAxis, except for Bar type series.

Series

Gets or sets a collection of series to be added to the chart. To render a series, create an instance of required series class, and add it to the collection.

Declaration

public ChartSeriesCollection Series { get; set; }

Property Value

Type	Description
ChartSeriesCollection	ChartSeriesCollection.

SeriesBounds

Gets the actual rendering bounds of chart series to customize the chart. This is Readonly property.

Declaration

public Rectangle SeriesBounds { get; }

Property Value

Type
Xamarin.Forms.Rectangle

SeriesSelectionColor

Gets or sets the color to the selected series. This is a bindable property.

Declaration

public Color SeriesSelectionColor { get; set; }

Property Value

Type	Description
Xamarin.Forms.Color	This property takes the Xamarin.Forms.Color as its value.

SideBySideSeriesPlacement

Gets or sets a value indicating whether the series can be placed side by side. This is a bindable property.

Declaration

public bool SideBySideSeriesPlacement { get; set; }

Property Value

Type
System.Boolean

TechnicalIndicators

Gets or sets the collection of TechnicalIndicators added to the chart.

Declaration

public TechnicalIndicatorCollection TechnicalIndicators { get; set; }

Property Value

Type	Description
TechnicalIndicatorCollection	TechnicalIndicatorsCollection.

Title

Gets or sets the title for the chart. This is a mutable property.

Declaration

public ChartTitle Title { get; set; }

Property Value

Type	Description
ChartTitle	This property takes the ChartTitle as value.

Examples

void MyPage()
{
	SfChart chart = new SfChart();
	chart.Title = new ChartTitle(){ Text = "My Header" };
}

Methods

GetStream()

Returns the chart as Stream(restricted to iOS and Android). You can use GetStreamAsync method for UWP platform.

Declaration

public Stream GetStream()

Returns

Type	Description
System.IO.Stream	The chart as a stream.

GetStreamAsync()

Returns the chart as Stream asynchronously.

Declaration

public Task<Stream> GetStreamAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.IO.Stream>	The chart as a stream asynchronously.

OnBindingContextChanged()

Override this method to execute an action when the BindingContext changes.

Declaration

protected override void OnBindingContextChanged()

OnMeasure(Double, Double)

Method used to measure the chart.

Declaration

protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint	Width of the chart.
System.Double	heightConstraint	Height of the chart.

Returns

Type	Description
Xamarin.Forms.SizeRequest	Actual size of the chart.

PointToValue(ChartAxis, Point)

Converts screen point to chart value.

Declaration

public double PointToValue(ChartAxis axis, Point value)

Parameters

Type	Name	Description
ChartAxis	axis	chart axis.
Xamarin.Forms.Point	value	screen point value.

Returns

Type	Description
System.Double	the screen point value to chart value.

ResumeSeriesNotification()

Processes the data that is added to the data source after the SuspendSeriesNotification is called.

Declaration

public void ResumeSeriesNotification()

SaveAsImage(String)

Saves the chart as an image to Photo gallery.

Declaration

public void SaveAsImage(string filename)

Parameters

Type	Name	Description
System.String	filename	file name used to save chart image.

SaveAsImage(String, Int32, Int32)

Saves the chart as an image with scaled width and height.

Declaration

public void SaveAsImage(string filename, int scaleWidth, int scaleHeight)

Parameters

Type	Name	Description
System.String	filename	Indicates file name.
System.Int32	scaleWidth	Indicates scale width.
System.Int32	scaleHeight	Indicates scale height.

Remarks

Chart image will generate based on the scaleHeight X scaleHeight in pixels.

Examples

chart.SaveAsImage("ColumnSeries.jpg", 1900, 1080);

SuspendSeriesNotification()

Suspends all the series from updating the data till ResumeSeriesNotification is called. It is specifically used when you need to append the collection of data.

Declaration

public void SuspendSeriesNotification()

ValueToPoint(ChartAxis, Double)

Converts the chart value to screen point.

Declaration

public double ValueToPoint(ChartAxis axis, double value)

Parameters

Type	Name	Description
ChartAxis	axis	chart axis.
System.Double	value	axis unit value.

Returns

Type	Description
System.Double	the chart data point value to screen point value.

Events

AnnotationClicked

Occurs when the annotation is clicked. The event argument contains an annotation instance, which is clicked and its touch points.

Declaration

public event EventHandler<ChartAnnotationClickedEventArgs> AnnotationClicked

Event Type

Type
System.EventHandler<ChartAnnotationClickedEventArgs>

LegendItemClicked

Occurs when the legend item is clicked. The argument contains the legend items that can be used to customize the label and its appearance.

Declaration

public event EventHandler<ChartLegendItemClickedEventArgs> LegendItemClicked

Event Type

Type
System.EventHandler<ChartLegendItemClickedEventArgs>

LegendItemCreated

Occurs before the legend item is created. The argument contains the legend items that can be used to customize the label and its appearance.

Declaration

public event EventHandler<ChartLegendItemCreatedEventArgs> LegendItemCreated

Event Type

Type
System.EventHandler<ChartLegendItemCreatedEventArgs>

ResetZoom

Event that occurs when reset the zooming. The event argument contains information about axis, previous zoom factor, and previous zoom position.

Declaration

public event EventHandler<ChartResetZoomEventArgs> ResetZoom

Event Type

Type
System.EventHandler<ChartResetZoomEventArgs>

Scroll

Event that occurs when panning the chart. The event argument contains axis, zoom position, and option to cancel the event.

Declaration

public event EventHandler<ChartScrollEventArgs> Scroll

Event Type

Type
System.EventHandler<ChartScrollEventArgs>

SelectionChanged

Event that is raised when the segment is selected.

Declaration

public event EventHandler<ChartSelectionEventArgs> SelectionChanged

Event Type

Type
System.EventHandler<ChartSelectionEventArgs>

SelectionChanging

Event that is raised before SelectionChanged event.

Declaration

public event EventHandler<ChartSelectionChangingEventArgs> SelectionChanging

Event Type

Type
System.EventHandler<ChartSelectionChangingEventArgs>

SelectionZoomDelta

Event that occurs while the region to be zoomed is being selected. The event argument contains zoom rect and option to cancel this event.

Declaration

public event EventHandler<ChartSelectionZoomDeltaEventArgs> SelectionZoomDelta

Event Type

Type
System.EventHandler<ChartSelectionZoomDeltaEventArgs>

SelectionZoomEnd

Event that occurs after the region to be zoomed is selected. The event argument contains the zoom rect.

Declaration

public event EventHandler<ChartSelectionZoomEventArgs> SelectionZoomEnd

Event Type

Type
System.EventHandler<ChartSelectionZoomEventArgs>

SelectionZoomStart

Event that occurs when start selection zooming. The event argument contains zoom rect.

Declaration

public event EventHandler<ChartSelectionZoomEventArgs> SelectionZoomStart

Event Type

Type
System.EventHandler<ChartSelectionZoomEventArgs>

SeriesRendered

This event occurs when series is rendered. This helps to identify whether the series is rendered.

Declaration

public event EventHandler<EventArgs> SeriesRendered

Event Type

Type
System.EventHandler<System.EventArgs>

TrackballCreated

This event is raised when the trackball is moved from one data point to another. This helps to customize the trackball label and marker based on the condition.

Declaration

public event EventHandler<ChartTrackballCreatedEventArgs> TrackballCreated

Event Type

Type
System.EventHandler<ChartTrackballCreatedEventArgs>

ZoomDelta

Event that occurs when zooming the chart. This event can be cancelled using the Cancel argument.

Declaration

public event EventHandler<ChartZoomDeltaEventArgs> ZoomDelta

Event Type

Type
System.EventHandler<ChartZoomDeltaEventArgs>

ZoomEnd

Event that occurs after ending the zooming. The event argument contains axis, current zoom factor, and current zoom position.

Declaration

public event EventHandler<ChartZoomEventArgs> ZoomEnd

Event Type

Type
System.EventHandler<ChartZoomEventArgs>

ZoomStart

Event that occurs when start zooming. The argument contains axis, current zoom position, current zoom factor, and an option to cancel this event.

Declaration

public event EventHandler<ChartZoomStartEventArgs> ZoomStart

Event Type

Type
System.EventHandler<ChartZoomStartEventArgs>