menu

MAUI Toolkit

  • User Guide
  • Demos
  • Support
Class BubbleSeries - MAUI-ToolKit API Reference | Syncfusion

    Show / Hide Table of Contents

    Class BubbleSeries

    The BubbleSeries displays a collection of data points represented by a bubble of different size.

    Inheritance
    System.Object
    ChartSeries
    CartesianSeries
    XYDataSeries
    BubbleSeries
    Inherited Members
    CartesianSeries.ActualXAxis
    CartesianSeries.ActualYAxis
    CartesianSeries.DataLabelSettings
    CartesianSeries.DataLabelSettingsProperty
    CartesianSeries.EmptyPointMode
    CartesianSeries.EmptyPointModeProperty
    CartesianSeries.EmptyPointSettings
    CartesianSeries.EmptyPointSettingsProperty
    CartesianSeries.GetDataPoints(Double, Double, Double, Double)
    CartesianSeries.GetDataPoints(Rect)
    CartesianSeries.Label
    CartesianSeries.LabelProperty
    CartesianSeries.OnParentSet()
    CartesianSeries.ShowTrackballLabel
    CartesianSeries.ShowTrackballLabelProperty
    CartesianSeries.TrackballLabelTemplate
    CartesianSeries.TrackballLabelTemplateProperty
    CartesianSeries.XAxisName
    CartesianSeries.XAxisNameProperty
    CartesianSeries.YAxisName
    CartesianSeries.YAxisNameProperty
    ChartSeries.CreateAnimation(Action<Double>)
    ChartSeries.DrawDataLabel(ICanvas, Brush, String, PointF, Int32)
    ChartSeries.DrawSeries(ICanvas, ReadOnlyObservableCollection<ChartSegment>, RectF)
    ChartSeries.EnableAnimation
    ChartSeries.EnableAnimationProperty
    ChartSeries.EnableTooltip
    ChartSeries.EnableTooltipProperty
    ChartSeries.Fill
    ChartSeries.FillProperty
    ChartSeries.GetDataPointIndex(Single, Single)
    ChartSeries.IsVisible
    ChartSeries.IsVisibleOnLegend
    ChartSeries.IsVisibleOnLegendProperty
    ChartSeries.IsVisibleProperty
    ChartSeries.ItemsSource
    ChartSeries.ItemsSourceProperty
    ChartSeries.LabelContext
    ChartSeries.LabelContextProperty
    ChartSeries.LabelTemplate
    ChartSeries.LabelTemplateProperty
    ChartSeries.LegendIcon
    ChartSeries.LegendIconProperty
    ChartSeries.ListenPropertyChange
    ChartSeries.ListenPropertyChangeProperty
    ChartSeries.Opacity
    ChartSeries.OpacityProperty
    ChartSeries.PaletteBrushes
    ChartSeries.PaletteBrushesProperty
    ChartSeries.SelectionBehavior
    ChartSeries.SelectionBehaviorProperty
    ChartSeries.ShowDataLabels
    ChartSeries.ShowDataLabelsProperty
    ChartSeries.TooltipTemplate
    ChartSeries.TooltipTemplateProperty
    ChartSeries.XBindingPath
    ChartSeries.XBindingPathProperty
    ChartSeries.XRange
    ChartSeries.YRange
    XYDataSeries.StrokeWidth
    XYDataSeries.StrokeWidthProperty
    XYDataSeries.YBindingPath
    XYDataSeries.YBindingPathProperty
    Namespace: Syncfusion.Maui.Toolkit.Charts
    Assembly: Syncfusion.Maui.Toolkit.dll
    Syntax
    public class BubbleSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon
    Remarks

    To render a series, create an instance of BubbleSeries class, and add it to the Series collection.

    It provides options for Fill, PaletteBrushes, StrokeWidth, Stroke, and Opacity to customize the appearance.

    MaximumRadius - Specifies the maximum radius to the bubble series MaximumRadius property.

    MinimumRadius - Specifies the minimum radius to the bubble series MinimumRadius property.

    SizeValuePath - Specify the bubble size using the SizeValuePath property.

    ShowZeroSizeBubbles - Specifies the option to show zero size bubble, when its true the zero size bubble render with minimum radius ShowZeroSizeBubbles property.

    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 BubbleSeries 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 BubbleSeries 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.

    Examples
    • Xaml
    • C#
    • ViewModel
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.XAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.XAxes>
    
              <chart:SfCartesianChart.YAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.YAxes>
    
              <chart:SfCartesianChart.Series>
                  <chart:BubbleSeries
                      ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"
                      SizeValuePath="Size"/>
              </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();
    
        BubbleSeries series = new BubbleSeries();
        series.ItemsSource = viewModel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        series.SizeValuePath = "Size";
        chart.Series.Add(series);
        public ObservableCollection<Model> Data { get; set; }
    
        public ViewModel()
        {
           Data = new ObservableCollection<Model>();
           Data.Add(new Model() { XValue = 10, YValue = 100, Size = 10 });
           Data.Add(new Model() { XValue = 20, YValue = 150, Size = 50 });
           Data.Add(new Model() { XValue = 30, YValue = 110, Size = 20 });
           Data.Add(new Model() { XValue = 40, YValue = 230, Size = 60 });
        }

    Constructors

    BubbleSeries()

    Initializes a new instance of the BubbleSeries class.

    Declaration
    public BubbleSeries()

    Fields

    MaximumRadiusProperty

    Identifies the MaximumRadius bindable property.

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

    Defines the maximum radius for the bubbles in the series.

    MinimumRadiusProperty

    Identifies the MinimumRadius bindable property.

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

    Defines the minimum radius for the bubbles in the series.

    ShowZeroSizeBubblesProperty

    Identifies the ShowZeroSizeBubbles bindable property.

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

    Determines whether to display bubbles with a size of zero.

    SizeValuePathProperty

    Identifies the SizeValuePath bindable property.

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

    Specifies the path to the property that determines the size of the bubbles.

    StrokeProperty

    Identifies the Stroke bindable property.

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

    Defines the stroke brush used for the outline of the bubbles.

    Properties

    MaximumRadius

    Gets or sets maximum radius to the bubble series.

    Declaration
    public double MaximumRadius { get; set; }
    Property Value
    Type Description
    System.Double

    It accepts System.Double and its default is 10.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:BubbleSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  SizeValuePath="Size"
                                  MaximumRadius="15" />
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        BubbleSeries series = new BubbleSeries()
        {
              ItemsSource = viewModel.Data,
              XBindingPath = "XValue",
              YBindingPath = "YValue",
              SizeValuePath = "Size",
              MaximumRadius = 15,
        };
    
        chart.Series.Add(series);

    MinimumRadius

    Gets or sets minimum radius to the bubble series.

    Declaration
    public double MinimumRadius { get; set; }
    Property Value
    Type Description
    System.Double

    It accepts System.Double and its default is 3.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:BubbleSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  SizeValuePath="Size"
                                  MinimumRadius="5" />
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        BubbleSeries series = new BubbleSeries()
        {
              ItemsSource = viewModel.Data,
              XBindingPath = "XValue",
              YBindingPath = "YValue",
              SizeValuePath = "Size",
              MinimumRadius = 5,
        };
    
        chart.Series.Add(series);

    ShowZeroSizeBubbles

    Gets or sets the option to show zero size bubble. When it's true, the zero-size bubble renders with a minimum radius.

    Declaration
    public bool ShowZeroSizeBubbles { get; set; }
    Property Value
    Type Description
    System.Boolean

    It accepts System.Boolean and its default is true.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:BubbleSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  SizeValuePath="Size"
                                  ShowZeroSizeBubbles="False"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        BubbleSeries series = new BubbleSeries()
        {
              ItemsSource = viewModel.Data,
              XBindingPath = "XValue",
              YBindingPath = "YValue",
              SizeValuePath = "Size",
              ShowZeroSizeBubbles = false,
        };
    
        chart.Series.Add(series);

    SizeValuePath

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

    Declaration
    public string SizeValuePath { get; set; }
    Property Value
    Type Description
    System.String

    It accepts System.String and its default is string.Empty.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:BubbleSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  SizeValuePath="Size"/>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        BubbleSeries series = new BubbleSeries()
        {
              ItemsSource = viewModel.Data,
              XBindingPath = "XValue",
              YBindingPath = "YValue",
              SizeValuePath = "Size",
        };
    
        chart.Series.Add(series);

    Stroke

    Gets or sets a value to customize the border appearance of the bubble.

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    It accepts Microsoft.Maui.Controls.Brush, and its default is Transparent.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
        <!-- ... Eliminated for simplicity-->
    
             <chart:BubbleSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  SizeValuePath="Size"
                                  Stroke ="Red" />
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
    
        BubbleSeries series = new BubbleSeries()
        {
              ItemsSource = viewModel.Data,
              XBindingPath = "XValue",
              YBindingPath = "YValue",
              SizeValuePath = "Size",
              Stroke = new SolidColorBrush(Colors.Red)
        };
    
        chart.Series.Add(series);

    Methods

    CreateSegment()

    Creates and initializes a new chart segment for the chart.

    Declaration
    protected override ChartSegment CreateSegment()
    Returns
    Type
    ChartSegment
    Overrides
    ChartSeries.CreateSegment()
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved