menu

Class BubbleSeries - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class BubbleSeries

    The BubbleSeries displays a set of closely packed circles, whose areas are proportional to the quantities.

    Inheritance
    System.Object
    ChartSeries
    CartesianSeries
    XyDataSeries
    BubbleSeries
    Implements
    System.ComponentModel.INotifyPropertyChanged
    Inherited Members
    CartesianSeries.DataLabelSettings
    CartesianSeries.DataLabelSettingsProperty
    CartesianSeries.OnApplyTemplate()
    CartesianSeries.ShowTrackballLabel
    CartesianSeries.ShowTrackballLabelProperty
    CartesianSeries.XAxisName
    CartesianSeries.XAxisNameProperty
    CartesianSeries.YAxisName
    CartesianSeries.YAxisNameProperty
    ChartSeries.ActualXAxis
    ChartSeries.ActualYAxis
    ChartSeries.AnimationDuration
    ChartSeries.AnimationDurationProperty
    ChartSeries.Chart
    ChartSeries.EnableAnimation
    ChartSeries.EnableAnimationProperty
    ChartSeries.EnableTooltip
    ChartSeries.EnableTooltipProperty
    ChartSeries.Fill
    ChartSeries.FillProperty
    ChartSeries.IsSeriesVisible
    ChartSeries.IsSeriesVisibleProperty
    ChartSeries.IsVisibleOnLegend
    ChartSeries.IsVisibleOnLegendProperty
    ChartSeries.ItemsSource
    ChartSeries.ItemsSourceProperty
    ChartSeries.Label
    ChartSeries.LabelProperty
    ChartSeries.LegendIcon
    ChartSeries.LegendIconProperty
    ChartSeries.LegendIconTemplate
    ChartSeries.LegendIconTemplateProperty
    ChartSeries.ListenPropertyChange
    ChartSeries.ListenPropertyChangeProperty
    ChartSeries.OnPointerExited(PointerRoutedEventArgs)
    ChartSeries.OnPointerMoved(PointerRoutedEventArgs)
    ChartSeries.OnPointerPressed(PointerRoutedEventArgs)
    ChartSeries.OnPointerReleased(PointerRoutedEventArgs)
    ChartSeries.OnTapped(TappedRoutedEventArgs)
    ChartSeries.PaletteBrushes
    ChartSeries.PaletteBrushesProperty
    ChartSeries.PropertyChanged
    ChartSeries.ResumeNotification()
    ChartSeries.SelectionBehavior
    ChartSeries.SelectionBehaviorProperty
    ChartSeries.ShowDataLabels
    ChartSeries.ShowDataLabelsProperty
    ChartSeries.SpacingProperty
    ChartSeries.SuspendNotification()
    ChartSeries.TooltipTemplate
    ChartSeries.TooltipTemplateProperty
    ChartSeries.TrackballLabelTemplate
    ChartSeries.TrackballLabelTemplateProperty
    ChartSeries.XBindingPath
    ChartSeries.XBindingPathProperty
    XyDataSeries.StrokeWidth
    XyDataSeries.StrokeWidthProperty
    XyDataSeries.YBindingPath
    XyDataSeries.YBindingPathProperty
    Namespace: Syncfusion.UI.Xaml.Charts
    Assembly: Syncfusion.Chart.WinUI.dll
    Syntax
    public class BubbleSeries : XyDataSeries, INotifyPropertyChanged
    Remarks

    BubbleSeries requires an additional data binding parameter Size in addition to the X,Y parameters.

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

    It provides options for Fill, PaletteBrushes, , and opacity to customize the appearance.

    Size - Specify the bubble size using the Size property.

    LegendIcon - To customize the legend icon using the LegendIcon property.

    EnableTooltip - A tooltip displays information while tapping or mouse hovering over 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 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.

    Examples
    • Xaml
    • C#
    • ViewModel
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.XAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.XAxes>
    
              <chart:SfCartesianChart.YAxes>
                  <chart:NumericalAxis/>
              </chart:SfCartesianChart.YAxes>
    
              <chart:BubbleSeries ItemsSource="{Binding Data}"
                                  XBindingPath="XValue"
                                  YBindingPath="YValue"
                                  Size = "Size"/>
    
        </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.Size = "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 = 1});
           Data.Add(new Model() { XValue = 20, YValue = 150, Size = 1});
           Data.Add(new Model() { XValue = 30, YValue = 110, Size = 1});
           Data.Add(new Model() { XValue = 40, YValue = 230, Size = 1});
        }

    Constructors

    BubbleSeries()

    Initializes a new instance of the BubbleSeries.

    Declaration
    public BubbleSeries()

    Fields

    CustomTemplateProperty

    The DependencyProperty for CustomTemplate property.

    Declaration
    public static readonly DependencyProperty CustomTemplateProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    MaximumRadiusProperty

    The DependencyProperty for MaximumRadius property.

    Declaration
    public static readonly DependencyProperty MaximumRadiusProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    MinimumRadiusProperty

    The DependencyProperty for MinimumRadius property.

    Declaration
    public static readonly DependencyProperty MinimumRadiusProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    SizeProperty

    The DependencyProperty for Size property.

    Declaration
    public static readonly DependencyProperty SizeProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    StrokeProperty

    The DependencyProperty for Stroke property.

    Declaration
    public static readonly DependencyProperty StrokeProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    Properties

    CustomTemplate

    Gets or sets the custom template to customize the appearance of bubble series.

    Declaration
    public DataTemplate CustomTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    It takes the Microsoft.UI.Xaml.DataTemplate value, and its default value is null.

    MaximumRadius

    Gets or sets the maximum size for each bubble.

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

    It takes the double value, and its default value is 30.

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

    MinimumRadius

    Gets or sets the minimum size for the each bubble.

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

    It takes the double value, and its default value is 10.

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

    Size

    Gets or sets a value that specifies the bubble size.

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

    The string that represents the bubble size and its default value is null.

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

    Stroke

    Gets or sets a value to customize the stroke appearance of a chart series.

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Media.Brush

    It accepts Microsoft.UI.Xaml.Media.Brush values and its default value is null.

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

    Implements

    System.ComponentModel.INotifyPropertyChanged

    See Also

    BubbleSegment
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved