Chart types in .NET MAUI Spark Charts

24 Sep 20252 minutes to read

The SfSparkChart control supports four different chart types such as Line, Column, Area, and Win-loss.

Line Sparkline

The SfSparkLineChart chart is used for identifying patterns and trends in the data, such as seasonal effects, large changes, and turning points over a period of time.

XAML

<sparkchart:SfSparkLineChart ItemsSource="{Binding Data}" 
                    YBindingPath="Value">
. . .
</sparkchart:SfSparkLineChart>

C#

SfSparkLineChart sparkchart = new SfSparkLineChart()
{
    ItemsSource = new SparkChartViewModel().Data,
    YBindingPath = "Value",
};

this.Content = sparkchart;

Column Sparkline

The SfSparkColumnChart uses vertical bars to show the comparison between the different data.

XAML

<sparkchart:SfSparkColumnChart ItemsSource="{Binding Data}" 
                    YBindingPath="Value">
. . .
</sparkchart:SfSparkColumnChart>

C#

SfSparkColumnChart sparkchart = new SfSparkColumnChart()
{
    ItemsSource = new SparkChartViewModel().Data,
    YBindingPath = "YValue",
};
this.Content = sparkchart;

Area Sparkline

The SfSparkAreaChart is used to emphasize a change in values. This is primarily used when the magnitude of the trend is to be communicated rather than individual data values.

XAML

<sparkchart:SfSparkAreaChart ItemsSource="{Binding Data}" 
                    YBindingPath="Value">
. . .
</sparkchart:SfSparkAreaChart>

C#

SfSparkAreaChart sparkchart = new SfSparkAreaChart()
{
    ItemsSource = new SparkChartViewModel().Data,
    YBindingPath = "Value",
};

this.Content = sparkchart;

WinLoss Sparkline

The SfSparkWinLossChart is used to show whether each value is positive or negative visualizing a Win/Loss scenario.

XAML

<sparkchart:SfSparkWinLossChart ItemsSource="{Binding Data}" 
                     YBindingPath="YValue">
. . .
</sparkchart:SfSparkWinLossChart>

C#

SfSparkWinLossChart sparkchart = new SfSparkWinLossChart()
{
    ItemsSource = new SparkChartViewModel().Data,
    YBindingPath = "YValue",
};
this.Content = sparkchart;