Skip to main content

Variance chart

info

Charts are available with Avalonia Pro.

Variance charts display bars extending above and below a baseline value, using distinct colors for positive and negative deviations. They show where values exceed or fall short of a target or reference point.

When to use​

  • Budget analysis: Showing actual vs. planned spending where overruns and savings are color-coded.
  • Performance tracking: Visualizing KPI deviations from targets across categories.
  • Profit and loss: Displaying gains and losses relative to a break-even point.

Code example​

XAML​

<charts:CartesianChart Title="Monthly Profit/Loss" Height="250">
    <charts:CartesianChart.HorizontalAxis>
        <charts:CategoryAxis />
    </charts:CartesianChart.HorizontalAxis>
    <charts:CartesianChart.VerticalAxis>
        <charts:NumericalAxis />
    </charts:CartesianChart.VerticalAxis>
    <charts:CartesianChart.Series>
        <charts:VarianceSeries Title="Profit/Loss"
                                 ItemsSource="{Binding ProfitData}"
                                 CategoryPath="Month"
                                 ValuePath="Amount"
                                 Baseline="0"
                                 PositiveBrush="Green"
                                 NegativeBrush="Red"
                                 BarWidth="0.6" />
    </charts:CartesianChart.Series>
</charts:CartesianChart>

Data model (C#)​

public record ProfitItem(string Month, double Amount);

public ObservableCollection<ProfitItem> ProfitData { get; } = new()
{
    new("Jan", 150),
    new("Feb", -80),
    new("Mar", 220),
    new("Apr", -30),
    new("May", 180),
    new("Jun", -120)
};

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
BaselineThe reference value that separates positive from negative variance.0
PositiveBrushThe brush used for bars above the baseline.null
NegativeBrushThe brush used for bars below the baseline.null
BarWidthThe width of each bar as a fraction of the category band (0.0 to 1.0).0.6
BarCornerRadiusThe rounding of the bar corners.2

See also​

On this page