menu

MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ChartBase - MAUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class ChartBase

    The ChartBase class is the base for SfCartesianChart and SfCircularChart types.

    Inheritance
    System.Object
    ChartBase
    SfCartesianChart
    SfCircularChart
    SfFunnelChart
    SfPolarChart
    SfPyramidChart
    Implements
    Microsoft.Maui.IContentView
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IPadding
    Microsoft.Maui.ICrossPlatformLayout
    Namespace: Syncfusion.Maui.Charts
    Assembly: Syncfusion.Maui.Charts.dll
    Syntax
    public abstract class ChartBase : View, IContentView, IView, IElement, ITransform, IPadding, ICrossPlatformLayout, IChart

    Constructors

    ChartBase()

    Initializes a new instance of the ChartBase class.

    Declaration
    public ChartBase()

    Fields

    InteractiveBehaviorProperty

    Identifies the InteractiveBehavior bindable property.

    Declaration
    public static readonly BindableProperty InteractiveBehaviorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for InteractiveBehavior bindable property.

    LegendProperty

    Identifies the Legend bindable property.

    Declaration
    public static readonly BindableProperty LegendProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Legend bindable property.

    PlotAreaBackgroundViewProperty

    Identifies the PlotAreaBackgroundView bindable property.

    Declaration
    public static readonly BindableProperty PlotAreaBackgroundViewProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty

    TitleProperty

    Identifies the Title bindable property.

    Declaration
    public static readonly BindableProperty TitleProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Title bindable property.

    TooltipBehaviorProperty

    Identifies the TooltipBehavior bindable property.

    Declaration
    public static readonly BindableProperty TooltipBehaviorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TooltipBehavior bindable property.

    Properties

    InteractiveBehavior

    Gets or sets the interactive behavior that allows to override and customize the touch interaction methods.

    Declaration
    public ChartInteractiveBehavior InteractiveBehavior { get; set; }
    Property Value
    Type Description
    ChartInteractiveBehavior

    This property takes ChartInteractiveBehavior instance as value and its default value is null.

    Remarks

    To use those touch interaction methods, create the class inherited by ChartInteractiveBehavior class.

    Then Create the instance for that class and instance has to be added in the chart's InteractiveBehavior as per the following code snippet.

    Examples
    • ChartInteractionExt.cs
    • MainPage.xaml
    • MainPage.xaml.cs
    public class ChartInteractionExt : ChartInteractiveBehavior
    {
       <!--omitted for brevity-->
    }
    <chart:SfCartesianChart>
    
        <chart:SfCircularChart.BindingContext>
               <local:ViewModel/>
           </chart:SfCircularChart.BindingContext>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.InteractiveBehavior>
             <local:ChartInteractionExt/>
        </chart:SfCartesianChart.InteractiveBehavior>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    
    ViewModel viewModel = new ViewModel();
    chart.BindingContext = viewModel;
    ...
    ChartInteractionExt interaction = new ChartInteractionExt();
    chart.ChartInteractiveBehavior = interaction;
    ...

    Legend

    Gets or sets the legend that helps to identify the corresponding series or data point in chart.

    Declaration
    public ChartLegend Legend { get; set; }
    Property Value
    Type Description
    ChartLegend

    This property takes a ChartLegend instance as value and its default value is null.

    Remarks

    To render a legend, create an instance of ChartLegend, and assign it to the Legend property.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
     
    <chart:SfCircularChart>
    
           <chart:SfCircularChart.BindingContext>
               <local:ViewModel/>
           </chart:SfCircularChart.BindingContext>
    
           <chart:SfCircularChart.Legend>
               <chart:ChartLegend/>
           </chart:SfCircularChart.Legend>
    
           <chart:SfCircularChart.Series>
               <chart:PieSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue" />
           </chart:SfCircularChart.Series>
    
    </chart:SfCircularChart>
    SfCircularChart chart = new SfCircularChart();
    
    ViewModel viewModel = new ViewModel();
    chart.BindingContext = viewModel;
    
    chart.Legend = new ChartLegend();
    
    PieSeries series = new PieSeries()
    {
        ItemsSource = viewmodel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue",
    };
    chart.Series.Add(series);

    PlotAreaBackgroundView

    Gets or sets the view to the background of chart area.

    Declaration
    public View PlotAreaBackgroundView { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.View

    Defaults to null.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCircularChart>
    
            <chart:SfCircularChart.BindingContext>
                <local:ViewModel/>
            </chart:SfCircularChart.BindingContext>
    
            <chart:SfCartesianChart.PlotAreaBackgroundView>
                <BoxView Color="Aqua" Margin = "10" CornerRadius = "5" />
            </chart:SfCartesianChart.PlotAreaBackgroundView>
    
            <chart:SfCircularChart.Series>
                <chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
            </chart:SfCircularChart.Series>
    
    </chart:SfCircularChart>
     SfCircularChart chart = new SfCircularChart();
    
     ViewModel viewModel = new ViewModel();
     chart.BindingContext = viewModel;
    
     BoxView boxView = new BoxView()
     {
        Color = Colors.Aqua,
        Margin = 10,
        CornerRadius = 5,
     };
    
     chart.PlotAreaBackgroundView = boxView
    
     DoughnutSeries series = new DoughnutSeries()
     {
        ItemsSource = viewmodel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue1",
        SelectionBrush = Colors.Blue
     };
     chart.Series.Add(series);

    SeriesBounds

    Get the actual rendering bounds of the chart series.

    Declaration
    public Rect SeriesBounds { get; }
    Property Value
    Type
    Microsoft.Maui.Graphics.Rect

    Title

    Gets or sets the title for chart. It supports the string or any view as title.

    Declaration
    public object Title { get; set; }
    Property Value
    Type Description
    System.Object

    Default value is null.

    Remarks

    Example code for string as title.

    • MainPage.xaml
    • MainPage.xaml.cs
        <chart:SfCartesianChart Title="Average High/Low Temperature">
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        chart.Title = "Average High / Low Temperature";

    Example code for View as title.

    • MainPage.xaml
    • MainPage.xaml.cs
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.Title>
                  <Label Text = "Average High/Low Temperature" 
                         HorizontalOptions="Fill"
                         HorizontalTextAlignment="Center"
                         VerticalOptions="Center"
                         FontSize="16"
                         TextColor="Black"/>
              </chart:SfCartesianChart.Title>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        chart.Title = new Label()
        { 
            Text = "Average High / Low Temperature",
            HorizontalOptions = LayoutOptions.Fill,
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            TextColor = Colors.Black
        };

    TooltipBehavior

    Gets or sets a tooltip behavior that allows to customize the default tooltip appearance in the chart.

    Declaration
    public ChartTooltipBehavior TooltipBehavior { get; set; }
    Property Value
    Type Description
    ChartTooltipBehavior

    This property takes ChartTooltipBehavior instance as value and its default value is null.

    Remarks

    To display the tooltip on the chart, set the EnableTooltip property as true in ChartSeries.

    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.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCircularChart>
    
            <chart:SfCircularChart.BindingContext>
                <local:ViewModel/>
            </chart:SfCircularChart.BindingContext>
    
            <chart:SfCircularChart.TooltipBehavior>
                <chart:ChartTooltipBehavior/>
            </chart:SfCircularChart.TooltipBehavior>
    
            <chart:SfCircularChart.Series>
                <chart:PieSeries EnableTooltip="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
            </chart:SfCircularChart.Series>
    
    </chart:SfCircularChart>
     SfCircularChart chart = new SfCircularChart();
    
     ViewModel viewModel = new ViewModel();
     chart.BindingContext = viewModel;
    
     chart.TooltipBehavior = new ChartTooltipBehavior();
    
     PieSeries series = new PieSeries()
     {
        ItemsSource = viewmodel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue1",
        EnableTooltip = true
     };
     chart.Series.Add(series);
    See Also
    EnableTooltip

    Methods

    GetStreamAsync(ImageFileFormat)

    To convert a chart view to a stream, the GetStreamAsync method is used. Currently, the supported file formats are JPEG and PNG .

    To get the stream for the chart view in PNG file format, use await chart.GetStreamAsync(ImageFileFormat.Png);

    To get the stream for the chart view in JPEG file format, use await chart.GetStreamAsync(ImageFileFormat.Jpeg);

    The charts stream can only be rendered when the chart view is added to the visual tree.

    imageFileFormat Pass the required file format.

    Declaration
    public Task<Stream> GetStreamAsync(ImageFileFormat imageFileFormat)
    Parameters
    Type Name Description
    ImageFileFormat imageFileFormat

    Pass the required file format.

    Returns
    Type Description
    System.Threading.Tasks.Task<System.IO.Stream>

    Returns the chart view's stream in the desired file format.

    OnBindingContextChanged()

    Invoked when binding context changed.

    Declaration
    protected override void OnBindingContextChanged()

    OnPropertyChanged(String)

    Enforces LeftToRight flow direction for the chart, overriding any inherited RightToLeft flow direction.

    Declaration
    protected override void OnPropertyChanged(string propertyName = null)
    Parameters
    Type Name Description
    System.String propertyName

    SaveAsImage(String)

    To save a chart view as an image in the desired file format, the SaveAsImage is used. Currently, the supported image formats are JPEG and PNG .

    By default, the image format is PNG. For example, chart.SaveAsImage("Test");

    To save a chart view in the PNG image format, the filename should be passed with the ".png" extension while to save the image in the JPEG image format, the filename should be passed with the ".jpeg" extension , for example, "chart.SaveAsImage("Test.png")" and "chart.SaveAsImage("Test.jpeg")" respectively.

    Saved location: For Windows, Android, and Mac , the image will be saved in the Pictures folder , and for iOS , the image will be saved in the Photos Album folder .

    In Windows and Mac , when you save an image with an already existing filename, the existing file is replaced with a new file, but the filename remains the same.

    In Android , when you save the same view with an existing filename, the new image will be saved with a filename with a number appended to it, for example, Test(1).jpeg and the existing filename Test.jpeg will be removed.When you save a different view with an already existing filename, the new image will be saved with a filename with a number will be appended to it, for example, Test(1).jpeg, and the existing filename Test.jpeg will remain in the folder.

    In iOS , due to its platform limitation, the image will be saved with the default filename, for example, IMG_001.jpeg, IMG_002.png and more.

    The chart view can be saved as an image only when the view is added to the visual tree.
    Declaration
    public void SaveAsImage(string fileName)
    Parameters
    Type Name Description
    System.String fileName

    Implements

    Microsoft.Maui.IContentView
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IPadding
    Microsoft.Maui.ICrossPlatformLayout
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved