Skip to main content

Packed bubble chart

info

Charts are available with Avalonia Pro.

Packed bubble charts show category magnitude through bubble size while packing circles tightly into a single frame.

When to use​

  • Part-to-whole views: Compare categories by size without a bar chart.
  • Compact dashboards: Fit many categories into a square card.
  • Label-first comparisons: Keep category names inside the bubbles when space allows.

Code example​

XAML​

<charts:PackedBubbleChart Title="Segment size"
                            Height="320"
                            ItemsSource="{Binding Segments}"
                            LabelPath="Name"
                            ValuePath="Value"
                            ShowLabels="True" />

Data model (C#)​

public record SegmentBubble(string Name, double Value);

public ObservableCollection<SegmentBubble> Segments { get; } = new()
{
    new("Desktop", 42),
    new("Mobile", 30),
    new("Web", 18)
};

Common properties​

PropertyDescriptionDefault
ItemsSourceCollection of bubble items.null
ValuePathPath to the value used for bubble size.null
LabelPathPath to the bubble label.null
MinBubbleSizeMinimum bubble size in pixels.20.0
MaxBubbleSizeMaximum bubble size in pixels.80.0
ShowLabelsWhether to draw labels inside bubbles when space allows.true
LabelFontSizeBase font size for bubble labels. The rendered size is constrained by each bubble radius.12.0
LabelForegroundBrush used for bubble labels. When null, labels use white.null
IsHighlightEnabledEnables hover highlighting for bubbles.false

See also​

On this page