Skip to main content

Combo chart

info

Charts are available with Avalonia Pro.

ComboChart is a CartesianChart variant for combining multiple series types such as BarSeries, LineSeries, and AreaSeries on the same horizontal axis. Use it when the chart itself needs to expose an optional secondary Y-axis.

When to use​

  • Mixed visual encodings: Combine bars, lines, or areas in the same plot.
  • Dual-scale comparisons: Plot a secondary metric on a separate Y-axis.
  • Shared categories: Align multiple series types to the same category labels.

Code example​

XAML​

<ComboChart xmlns="https://github.com/avaloniaui" Title="Revenue and margin"
                     Height="320"
                     ShowLegend="True"
                     ShowSecondaryAxis="True">
    <ComboChart.HorizontalAxis>
        <CategoryAxis Title="Month" />
    </ComboChart.HorizontalAxis>
    <ComboChart.VerticalAxis>
        <NumericalAxis Title="Revenue ($K)" />
    </ComboChart.VerticalAxis>
    <ComboChart.SecondaryVerticalAxis>
        <NumericalAxis Title="Margin (%)" />
    </ComboChart.SecondaryVerticalAxis>
    <ComboChart.Series>
        <BarSeries Title="Revenue"
                            ItemsSource="{Binding MonthlyMetrics}"
                            CategoryPath="Month"
                            ValuePath="Revenue" />
        <LineSeries Title="Margin"
                             ItemsSource="{Binding MonthlyMetrics}"
                             CategoryPath="Month"
                             ValuePath="MarginPercent"
                             YAxisPosition="Secondary" />
    </ComboChart.Series>
</ComboChart>

Data model (C#)​

public record MonthlyMetric(string Month, double Revenue, double MarginPercent);

public ObservableCollection<MonthlyMetric> MonthlyMetrics { get; } = new()
{
    new("Jan", 120, 18),
    new("Feb", 145, 21),
    new("Mar", 138, 19),
    new("Apr", 166, 24)
};

Common properties​

PropertyDescriptionDefault
SeriesContent collection of cartesian series rendered in the chart.Empty collection
HorizontalAxisPrimary horizontal axis used by the mixed series.null
VerticalAxisPrimary vertical axis used by the mixed series.null
ShowSecondaryAxisWhether to show a secondary Y-axis on the right side.false
SecondaryVerticalAxisOptional secondary vertical axis for series assigned to YAxisPosition.Secondary.null

Notes​

  • Series are rendered in declaration order.
  • To plot a series against the secondary Y-axis, set that series to YAxisPosition="Secondary".
  • Use the series-specific pages for properties such as BarWidth, MarkerShape, or FillOpacity.

See also​

On this page