Skip to main content

Bubble chart

info

Charts are available with Avalonia Pro.

Bubble charts use a BubbleSeries inside a CartesianChart to plot two numeric dimensions. Each marker is sized using a third measure.

When to use​

  • Three-variable comparison: Show relationships between X, Y, and magnitude in one view.
  • Portfolio analysis: Compare price, margin, and volume at the same time.
  • Opportunity maps: Highlight outliers by size as well as position.

Code example​

XAML​

<charts:CartesianChart Title="Product portfolio" Height="300">
    <charts:CartesianChart.HorizontalAxis>
        <charts:NumericalAxis Title="Price" />
    </charts:CartesianChart.HorizontalAxis>
    <charts:CartesianChart.VerticalAxis>
        <charts:NumericalAxis Title="Revenue" />
    </charts:CartesianChart.VerticalAxis>
    <charts:CartesianChart.Series>
        <charts:BubbleSeries ItemsSource="{Binding BubbleData}"
                               CategoryPath="Price"
                               ValuePath="Revenue"
                               SizePath="Units"
                               Title="Products" />
    </charts:CartesianChart.Series>
</charts:CartesianChart>

Data model (C#)​

public record ProductBubble(double Price, double Revenue, double Units);

public ObservableCollection<ProductBubble> BubbleData { get; } = new()
{
    new(15, 120, 40),
    new(22, 180, 65),
    new(30, 140, 25)
};

Common properties (BubbleSeries)​

PropertyDescriptionDefault
ItemsSourceCollection of data points.null
CategoryPathPath to the X-axis value.null
ValuePathPath to the Y-axis value.null
SizePathPath to the value used for bubble size.null
MinBubbleSizeMinimum bubble diameter in pixels.10.0
MaxBubbleSizeMaximum bubble diameter in pixels.50.0
FillBrush used for the bubbles.Theme-dependent
StrokeBrush used for the bubble outlines.Theme-dependent

See also​

On this page