Skip to main content

Mirror bar chart

info

Charts are available with Avalonia Pro.

Mirror bar charts draw two bar series on opposite sides of a center line, so each category can be compared symmetrically.

When to use​

  • Back-to-back comparison: Compare two populations, regions, or product groups per category.
  • Demographic layouts: Show opposing distributions, such as male and female by age band.
  • Two-sided ranking: Contrast paired measures without stacking or grouping bars.

Code example​

XAML​

<charts:MirrorBarChart Title="Regional comparison"
                         Height="320"
                         ItemsSource="{Binding MirrorData}"
                         LabelPath="Category"
                         LeftValuePath="West"
                         RightValuePath="East"
                         LeftTitle="West"
                         RightTitle="East" />

Data model (C#)​

public record MirrorBarItem(string Category, double West, double East);

public ObservableCollection<MirrorBarItem> MirrorData { get; } = new()
{
    new("Q1", 22, 18),
    new("Q2", 28, 24),
    new("Q3", 19, 27)
};

Common properties​

PropertyDescriptionDefault
ItemsSourceCollection of mirrored comparison items.null
LeftValuePathPath to the value rendered on the left side.null
RightValuePathPath to the value rendered on the right side.null
LabelPathPath to the category label.null
LeftBrushBrush used for left bars.#E91E63
RightBrushBrush used for right bars.#2196F3
BarHeightBar height as a fraction of the row height.0.7
CenterGapGap between the two mirrored sides.40.0
LeftTitleOptional title for the left side.null
RightTitleOptional title for the right side.null
IsHighlightEnabledEnables hover highlighting for mirrored bars.false

See also​

On this page