Bubble and Scatter in WinUI Chart

14 Apr 20212 minutes to read

Bubble

BubbleSeries is represented by closely packed circles, whose areas are proportional to the quantities.

The size of the bubble series is relative proportional to the value bind with the series using Size property. You can set the constraints on this size using MinimumRadius and MaximumRadius.

<chart:BubbleSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" Size="Size" MinimumRadius="5" MaximumRadius="10"/>
BubbleSeries series = new BubbleSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "XValue",

    YBindingPath = "YValue",

    Size = "Size",

    MinimumRadius = 5,

    MaximumRadius = 10

};

chart.Series.Add(series);

Bubble chart type in WinUI

Show Zero Bubbles

The zero size bubble segments can be enabled or disabled by using the ShowZeroBubbles property. By default, the property value is True.

The following code illustrates how to set the value to the property.

<chart:BubbleSeries ShowZeroBubbles="True">
</chart:BubbleSeries>
BubbleSeries series = new BubbleSeries();

series.ShowZeroBubbles = true;

ShowZeroBubbles support in WinUI

The following code example and screenshots describes when ShowZeroBubbles value is false.

<chart:BubbleSeries ShowZeroBubbles="False">
</chart:BubbleSeries>
BubbleSeries series = new BubbleSeries();

series.ShowZeroBubbles = false;

ShowZeroBubbles support in WinUI Chart

Scatter

ScatterSeries is similar to bubble series when each point being represented by an ellipse with equal size. This size can be defined by using ScatterHeight and ScatterWidth properties.

<chart:ScatterSeries ScatterHeight="7" ScatterWidth="7" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
ScatterSeries series = new ScatterSeries()
{

    ItemsSource = new ViewModel().Data,

    XBindingPath = "XValue",

    YBindingPath = "YValue",

    ScatterHeight = 7,

    ScatterWidth = 7,

};

chart.Series.Add(series);

Scatter chart type in WinUI