Skip to main content

Lollipop chart

info

Charts are available with Avalonia Pro.

Lollipop charts display data points as dots with thin stems extending to the baseline. They are a lightweight alternative to bar charts that reduce visual clutter while maintaining clear value communication.

When to use​

  • Lightweight comparison: When bar charts feel too heavy and you want a cleaner look.
  • Many categories: Reducing ink-to-data ratio when comparing many categories side-by-side.
  • Presentations: Creating visually appealing charts where emphasis is on the data point value.

Code example​

XAML​

<CartesianChart xmlns="https://github.com/avaloniaui" Title="Monthly Sales" Height="250">
    <CartesianChart.HorizontalAxis>
        <CategoryAxis />
    </CartesianChart.HorizontalAxis>
    <CartesianChart.VerticalAxis>
        <NumericalAxis />
    </CartesianChart.VerticalAxis>
    <CartesianChart.Series>
        <LollipopSeries Title="Sales"
                                 ItemsSource="{Binding MonthlySales}"
                                 CategoryPath="Month"
                                 ValuePath="Amount"
                                 StemThickness="2"
                                 Orientation="Vertical" />
    </CartesianChart.Series>
</CartesianChart>

Data model (C#)​

public record SalesItem(string Month, double Amount);

public ObservableCollection<SalesItem> MonthlySales { get; } = new()
{
    new("Jan", 320),
    new("Feb", 450),
    new("Mar", 280),
    new("Apr", 510),
    new("May", 390)
};

Common properties​

PropertyDescriptionDefault
TitleThe name of the series shown in the legend.null
ItemsSourceThe collection of data items to display.null
CategoryPathPath to the property used for the X-axis.null
ValuePathPath to the property used for the Y-axis.null
FillThe color/brush used to fill the dot.Theme-dependent
StrokeThe outline color of the dot.Transparent
StemThicknessThe thickness of the stem line.2
StemBrushThe brush for the stem line.null (Defaults to same color as Fill when unset.)
OrientationThe direction of the stems, Vertical or Horizontal.Vertical

See also​

On this page