Skip to main content

Spline area chart

info

Charts are available with Avalonia Pro.

Spline area charts display a filled area under a smooth interpolated curve. They combine the aesthetic smoothness of spline curves with the volume emphasis of area fills, making trends visually prominent.

When to use​

  • Smooth trends: Displaying continuous data where smooth interpolation better represents the underlying trend.
  • Volume emphasis: Highlighting the magnitude of values with the filled area beneath the curve.
  • Time series: Visualizing data that changes gradually over time, such as revenue or traffic.

Code example​

XAML​

<charts:CartesianChart Title="Website Traffic" Height="250">
    <charts:CartesianChart.HorizontalAxis>
        <charts:CategoryAxis />
    </charts:CartesianChart.HorizontalAxis>
    <charts:CartesianChart.VerticalAxis>
        <charts:NumericalAxis />
    </charts:CartesianChart.VerticalAxis>
    <charts:CartesianChart.Series>
        <charts:SplineAreaSeries Title="Visitors"
                                   ItemsSource="{Binding SplineAreaSeriesData}"
                                   FillOpacity="0.4"
                                   SplineTension="0.3" />
    </charts:CartesianChart.Series>
</charts:CartesianChart>

Data model (C#)​

public ObservableCollection<int> SplineAreaSeriesData { get; } = new()
{
    1200, 1400, 1100, 1600, 1800, 1500, 2000
};

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 area.Theme-dependent
StrokeThe color of the spline curve outline.Transparent
FillOpacityThe opacity of the fill area (0.0 to 1.0).0.5
SplineTensionThe tension of the spline curve (0.0 to 1.0). Lower values create sharper curves, higher values create smoother curves.0.25

See also​

On this page