Skip to main content

Dumbbell chart

info

Charts are available with Avalonia Pro.

Dumbbell charts connect two markers per category so you can compare the gap between a lower and higher value at a glance.

When to use​

  • Before and after comparison: Compare the same measure across two points in time.
  • Range review: Show the spread between two related values for each category.
  • Target vs actual: Pair a measured value with a benchmark.

Code example​

XAML​

<DumbbellChart xmlns="https://github.com/avaloniaui" Title="Planned vs actual"
                        Height="300"
                        ItemsSource="{Binding PlannedVsActual}"
                        LabelPath="Label"
                        LowValuePath="Planned"
                        HighValuePath="Actual" />

Data model (C#)​

public record RangeComparison(string Label, double Planned, double Actual);

public ObservableCollection<RangeComparison> PlannedVsActual { get; } = new()
{
    new("Team A", 42, 55),
    new("Team B", 38, 41),
    new("Team C", 50, 62)
};

Common properties​

PropertyDescriptionDefault
ItemsSourceCollection of comparison items.null
LowValuePathPath to the lower or first value.null
HighValuePathPath to the higher or second value.null
LabelPathPath to the category label.null
LowBrushBrush used for the first marker.#2196F3
HighBrushBrush used for the second marker.#4CAF50
ConnectorBrushBrush used for the connector line.#9E9E9E
MarkerSizeMarker size in pixels.12.0
ConnectorThicknessThickness of the connector line.3.0
OrientationLayout orientation, Horizontal or Vertical.Horizontal
IsHighlightEnabledEnables hover highlighting for dumbbell items.false

See also​

On this page