Appearance in .NET MAUI Funnel Chart

The appearance of the SfFunnelChart can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application.

Add a title

The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set the title using the Title property of the funnel chart as follows.

XAML

<chart:SfFunnelChart>
    <chart:SfFunnelChart.Title>
        <Label Text="School Admission"/>
    </chart:SfFunnelChart.Title>
    . . .
</chart:SfFunnelChart>

C#

SfFunnelChart chart = new SfFunnelChart();

// Set the title of the chart.
chart.Title = new Label()
{
    Text = "School Admission"
};
. . .
this.Content = chart;

Custom PaletteBrushes

The SfFunnelChart allows you to define your own brushes with preferred order by using the PaletteBrushes property, as shown in the code below.

XAML

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue"
                     PaletteBrushes="{Binding CustomBrushes}">
. . .
</chart:SfFunnelChart>

C#

public class AdmissionViewModel
{
	public ObservableCollection<Model> Data { get; set; }

	public List<Brush> CustomBrushes { get; set; }

	public AdmissionViewModel()
	{
	    //Initializing CustomBrushes collection to add custom palette colors.
		CustomBrushes = new List<Brush>();
		CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(38, 198, 218)));
		CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 188, 212)));
		CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 172, 193)));
		CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167)));
		CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143)));
	}
. . .
}

Applying Gradient

The gradient for the funnel chart can be set by using the PaletteBrushes property of the chart with the help of the LinearGradientBrush or RadialGradientBrush.

XAML

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue"
                     YBindingPath="YValue"
                     PaletteBrushes="{Binding CustomBrushes}">
. . .
</chart:SfFunnelChart>

C#

public class AdmissionViewModel
{
	public ObservableCollection<Model> Data { get; set; }

	public List<Brush> CustomBrushes { get; set; }
	public AdmissionViewModel()
	{
		CustomBrushes = new List<Brush>();
		LinearGradientBrush gradientColor1 = new LinearGradientBrush();
		gradientColor1.GradientStops = new GradientStopCollection()
		{
			new GradientStop() { Offset = 1, Color = Color.FromArgb("#a3bded") },
			new GradientStop() { Offset = 0, Color = Color.FromArgb("#6991c7") }
		};

		LinearGradientBrush gradientColor2 = new LinearGradientBrush();
		gradientColor2.GradientStops = new GradientStopCollection()
		{
			new GradientStop() { Offset = 1, Color = Color.FromArgb("#A5678E") },
			new GradientStop() { Offset = 0, Color = Color.FromArgb("#E8B7D4") }
		};

		LinearGradientBrush gradientColor3 = new LinearGradientBrush();
		gradientColor3.GradientStops = new GradientStopCollection()
		{
			new GradientStop() { Offset = 1, Color = Color.FromArgb("#FFCAD4") },
			new GradientStop() { Offset = 0, Color = Color.FromArgb("#FB7B8E") }
		};

		LinearGradientBrush gradientColor4 = new LinearGradientBrush();
		gradientColor4.GradientStops = new GradientStopCollection()
		{
			new GradientStop() { Offset = 1, Color = Color.FromArgb("#FDC094") },
			new GradientStop() { Offset = 0, Color = Color.FromArgb("#FFE5D8") }
		};

		LinearGradientBrush gradientColor5 = new LinearGradientBrush();
		gradientColor5.GradientStops = new GradientStopCollection()
		{
			new GradientStop() { Offset = 1, Color = Color.FromArgb("#CFF4D2") },
			new GradientStop() { Offset = 0, Color = Color.FromArgb("#56C596") }
		};

		//Adding gradient brush to the custom brushes collection.
		CustomBrushes.Add(gradientColor1);
		CustomBrushes.Add(gradientColor2);
		CustomBrushes.Add(gradientColor3);
		CustomBrushes.Add(gradientColor4);
		CustomBrushes.Add(gradientColor5);
	}
. . .
}