Skip to main content

Stacked 100% bar chart

info

Charts are available with Avalonia Pro.

Stacked 100% bar charts display bars that always extend to the same height, showing the percentage composition of each category. Each segment represents a series' proportional share, so readers can compare relative contributions.

When to use​

  • Proportional comparison: Comparing how different segments contribute to the whole across categories.
  • Market share: Showing relative market share or budget allocation across departments.
  • Survey results: Displaying percentage breakdowns such as agree/disagree responses per question.

Code example​

XAML​

<charts:CartesianChart Title="Browser Market Share" Height="250">
    <charts:CartesianChart.HorizontalAxis>
        <charts:CategoryAxis />
    </charts:CartesianChart.HorizontalAxis>
    <charts:CartesianChart.VerticalAxis>
        <charts:NumericalAxis />
    </charts:CartesianChart.VerticalAxis>
    <charts:CartesianChart.Series>
        <charts:Stacked100PercentBarSeries Title="Chrome"
                                              ItemsSource="{Binding ChromeData}"
                                              CategoryPath="Year"
                                              ValuePath="Share"
                                              StackGroup="browsers" />
        <charts:Stacked100PercentBarSeries Title="Firefox"
                                              ItemsSource="{Binding FirefoxData}"
                                              CategoryPath="Year"
                                              ValuePath="Share"
                                              StackGroup="browsers" />
        <charts:Stacked100PercentBarSeries Title="Safari"
                                              ItemsSource="{Binding SafariData}"
                                              CategoryPath="Year"
                                              ValuePath="Share"
                                              StackGroup="browsers" />
    </charts:CartesianChart.Series>
</charts:CartesianChart>

Data model (C#)​

public record BrowserShare(string Year, double Share);

public ObservableCollection<BrowserShare> ChromeData { get; } = new()
{
    new("2022", 65), new("2023", 63), new("2024", 66)
};

public ObservableCollection<BrowserShare> FirefoxData { get; } = new()
{
    new("2022", 20), new("2023", 18), new("2024", 15)
};

public ObservableCollection<BrowserShare> SafariData { get; } = new()
{
    new("2022", 15), new("2023", 19), new("2024", 19)
};

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 bars.Theme-dependent
StrokeThe outline color of the bars.Transparent
StackGroupThe group name used to combine multiple series into one stacked bar."default"
BarWidthThe width of each bar as a fraction of the category band (0.0 to 1.0).0.7
BarCornerRadiusThe rounding of the bar corners.0

See also​

On this page