public class SfPyramidChart : ChartBase, IContentView, IView, IElement, ITransform, IPadding, ICrossPlatformLayout, IChart, IPyramidChartDependent, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon, ITapGestureListener, IGestureListener, ITouchListener, IParentThemeElement, IThemeElement

Remarks

Pyramid chart control is used to visualize the proportions of a total in hierarchies.

SfPyramidChart class allows to customize the chart elements such as legend, data label, and tooltip features.

 
<chart:SfPyramidChart  ItemsSource="{Binding Data}" 
                       XBindingPath="XValue" 
                       YBindingPath="YValue">
     <chart:SfPyramidChart.BindingContext>
         <model:ChartViewModel/>
     </chart:SfPyramidChart.BindingContext>
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ChartViewModel viewModel = new ChartViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

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

public ViewModel()
{
   Data = new ObservableCollection<Model>();
   Data.Add(new Model() { XValue = "Stage A", YValue = 18 });
   Data.Add(new Model() { XValue = "Stage B", YValue = 20 });
   Data.Add(new Model() { XValue = "Stage C", YValue = 29 });
   Data.Add(new Model() { XValue = "Stage D", YValue = 33 });
}

Legend

The Legend contains list of data points in chart. The information provided in each legend item helps to identify the corresponding data point in pyramid chart. The chart XBindingPath property value will be displayed in the associated legend item.

To render a legend, create an instance of ChartLegend, and assign it to the Legend property.

MainPage.xaml
MainPage.xaml.cs

 
<chart:SfPyramidChart ItemsSource = "{Binding Data}"
                      XBindingPath="XValue" 
                      YBindingPath="YValue">
  <chart:SfPyramidChart.Legend>
       <chart:ChartLegend/>
  </chart:SfPyramidChart.Legend>
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
chart.Legend = new ChartLegend();
ChartViewModel viewModel = new ChartViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

Tooltip

Tooltip displays information while tapping or mouse hover on the segment. To display the tooltip on the chart, you need to set the EnableTooltip property as true in SfPyramidChart.

To customize the appearance of the tooltip elements like Background, TextColor and Font, create an instance of ChartTooltipBehavior class, modify the values, and assign it to the chart’s TooltipBehavior property.

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource = "{Binding Data}"
                      XBindingPath="XValue" 
                      YBindingPath="YValue"
                      EnableTooltip="True">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ChartViewModel viewModel = new ChartViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip=true;

Data Label

Data labels are used to display values related to a chart segment. To render the data labels, you need to enable the ShowDataLabels property as true in SfPyramidChart class.

To customize the chart data labels alignment, placement and label styles, need to create an instance of PyramidDataLabelSettings and set to the DataLabelSettings property.

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart  ItemsSource="{Binding Data}" 
                       XBindingPath="XValue" 
                       YBindingPath="YValue"
                       ShowDataLabels="True">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ChartViewModel viewModel = new ChartViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels=true;

Constructors

SfPyramidChart()

Initializes a new instance of the SfPyramidChart class.

Declaration

public SfPyramidChart()

Fields

DataLabelSettingsProperty

Identifies the DataLabelSettings bindable property.

Declaration

public static readonly BindableProperty DataLabelSettingsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the DataLabelSettings bindable property determines the customization options for data labels.

EnableTooltipProperty

Identifies the EnableTooltip bindable property.

Declaration

public static readonly BindableProperty EnableTooltipProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the EnableTooltip bindable property determines whether tooltips are enabled for the pyramid chart.

GapRatioProperty

Identifies the GapRatio bindable property.

Declaration

public static readonly BindableProperty GapRatioProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the GapRatio bindable property determines the gap ratio between the segments of the pyramid chart.

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the ItemsSource bindable property determines the data source for the pyramid chart.

LabelTemplateProperty

Identifies the LabelTemplate bindable property.

Declaration

public static readonly BindableProperty LabelTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the LabelTemplate bindable property determines the template used for data labels.

LegendIconProperty

Identifies the LegendIcon bindable property.

Declaration

public static readonly BindableProperty LegendIconProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the LegendIcon bindable property determines the legend icon type for the pyramid chart.

ModeProperty

Identifies the Mode bindable property.

Declaration

public static readonly BindableProperty ModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Mode bindable property determines the mode of the pyramid chart.

PaletteBrushesProperty

Identifies the PaletteBrushes bindable property.

Declaration

public static readonly BindableProperty PaletteBrushesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the PaletteBrushes bindable property determines the palette brushes for the pyramid chart.

SelectionBehaviorProperty

Identifies the SelectionBehavior bindable property.

Declaration

public static readonly BindableProperty SelectionBehaviorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the SelectionBehavior bindable property determines the selection behavior for the pyramid chart.

ShowDataLabelsProperty

Identifies the ShowDataLabels bindable property.

Declaration

public static readonly BindableProperty ShowDataLabelsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the ShowDataLabels bindable property determines whether data labels are shown on the pyramid chart.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Stroke bindable property determines the stroke brush used for the pyramid chart segments.

StrokeWidthProperty

Identifies the StrokeWidth bindable property.

Declaration

public static readonly BindableProperty StrokeWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the StrokeWidth bindable property determines the width of the stroke for the pyramid chart segments.

TooltipTemplateProperty

Identifies the TooltipTemplate bindable property.

Declaration

public static readonly BindableProperty TooltipTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the TooltipTemplate bindable property determines the template for the pyramid chart tooltip.

XBindingPathProperty

Identifies the XBindingPath bindable property.

Declaration

public static readonly BindableProperty XBindingPathProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the XBindingPath bindable property determines the binding path for the X values of the pyramid chart.

YBindingPathProperty

Identifies the YBindingPath bindable property.

Declaration

public static readonly BindableProperty YBindingPathProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the YBindingPath bindable property determines the binding path for the Y values of the pyramid chart.

Properties

DataLabelSettings

Gets or sets a value to customize the appearance of the displaying data labels in the chart.

Declaration

public PyramidDataLabelSettings DataLabelSettings { get; set; }

Property Value

Type	Description
PyramidDataLabelSettings	It takes the PyramidDataLabelSettings.

Remarks

This allows us to customize the appearance and position of data label.

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     ShowDataLabels="True">

    <chart:SfPyramidChart.DataLabelSettings>
        <chart:PyramidDataLabelSettings />
    </chart:SfPyramidChart.DataLabelSettings>

</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels = true;
chart.DataLabelSettings = new PyramidDataLabelSettings();

EnableTooltip

Gets or sets a Boolean value indicating whether the tooltip for chart should be shown or hidden.

Declaration

public bool EnableTooltip { get; set; }

Property Value

Type	Description
System.Boolean	This property takes the `bool` as its values and its default value is `False`.

Remarks

The tooltip will appear when you mouse over or tap on the pyramid segments.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                     XBindingPath="Category"
                     YBindingPath="Value"
                     EnableTooltip="True">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ViewModel viewModel = new ViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
chart.EnableTooltip= true;

this.Content = chart;

GapRatio

Gets or sets the ratio of the distance between the chart segments.

Declaration

public double GapRatio { get; set; }

Property Value

Type	Description
System.Double	Its default value is 0. Its value ranges from 0 to 1.

Remarks

It is used to provide the spacing between the segments

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     GapRatio="0.3">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.GapRatio = 0.3;

ItemsSource

Gets or sets a data points collection that will be used to plot a chart.

Declaration

public object ItemsSource { get; set; }

Property Value

Type	Description
System.Object	It accepts the data points collections and its default value is null.

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

LabelTemplate

Gets or sets the DataTemplate that can be used to customize the appearance of the Data label.

Declaration

public DataTemplate LabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts the Microsoft.Maui.Controls.DataTemplate value.

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     ShowDataLabels="True">
  <chart:SfPyramidChart.LabelTemplate>
       <DataTemplate>
           <VerticalStackLayout>
                    <Image Source="image.png" 
                           WidthRequest="20" 
                           HeightRequest="20"/>
                    <Label Text="{Binding Item.YValue}" 
                           TextColor="Black"
                           FontAttributes="Bold"
                           FontSize="12"/>
            </VerticalStackLayout>
       </DataTemplate>
   </chart:SfPyramidChart.LabelTemplate>
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

chart.ItemsSource = new ViewModel().Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels = true;

DataTemplate labelTemplate = new DataTemplate(()=>
{
    VerticalStackLayout layout = new VerticalStackLayout();
    Image image = new Image()
    {
        Source = "image.png",
        WightRequest = 20,
        HeightRequest = 20
    };

    Label label = new Label()
    {
        TextColor = Colors.Black,
        FontAttributes = FontAttributes.Bold,
        FontSize = 12,
    }

    label.SetBinding(Label.TextProperty, new Binding("YValue"));
    layout.Children.Add(image);
    layout.Children.Add(label);
    return layout;
}    

chart.LabelTemplate = labelTemplate;

LegendIcon

Gets or sets a legend icon that will be displayed in the associated legend item.

Declaration

public ChartLegendIconType LegendIcon { get; set; }

Property Value

Type	Description
ChartLegendIconType	This property takes the list of ChartLegendIconType and its default value is Circle.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                     XBindingPath="Category"
                     YBindingPath="Value"
                     LegendIcon="Diamond">
   <chart:SfPyramidChart.Legend>
       <chart:ChartLegend />
   </chart:SfPyramidChart.Legend>
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ViewModel viewModel = new ViewModel();
chart.Legend = new ChartLegend();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
chart.LegendIcon = ChartLegendIconType.Diamond;

this.Content = chart;

Mode

Gets or sets mode value which indicates the pyramid rendering.

Declaration

public PyramidMode Mode { get; set; }

Property Value

Type
PyramidMode

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     Mode="Surface">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.Mode =  PyramidMode.Surface;

PaletteBrushes

Gets or sets the list of brushes that can be used to customize the appearance of the chart.

Declaration

public IList<Brush> PaletteBrushes { get; set; }

Property Value

Type	Description
System.Collections.Generic.IList<Microsoft.Maui.Controls.Brush>	This property accepts a list of brushes as input and comes with a set of predefined brushes by default.

Remarks

It allows custom brushes, and gradient brushes to customize the appearance.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}"  
                     XBindingPath="Category"
                     YBindingPath="Value"
                     PaletteBrushes="{Binding CustomBrushes}">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ViewModel viewModel = new ViewModel();
List<Brush> CustomBrushes = new List<Brush>();
CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(77, 208, 225)));
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)));

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
chart.PaletteBrushes = CustomBrushes;

this.Content = chart;

SelectionBehavior

Gets or sets a value for initiating selection or highlighting of a single or multiple data points in the chart.

Declaration

public DataPointSelectionBehavior SelectionBehavior { get; set; }

Property Value

Type	Description
DataPointSelectionBehavior	This property takes a DataPointSelectionBehavior instance as a value, and its default value is null.

Remarks

To highlight the selected segment, set the value for the SelectionBrush property in the DataPointSelectionBehavior class.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource = "{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue">
    <chart:SfPyramidChart.SelectionBehavior>
         <chart:DataPointSelectionBehavior SelectionBrush="Red" />
    </chart:SfPyramidChart.SelectionBehavior>

</chart:SfPyramidChart>

ViewModel viewModel = new ViewModel();

SfPyramidChart chart = new SfPyramidChart();
chart.DataContext = viewModel;
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.SelectionBehavior = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.Red),
};

ShowDataLabels

Gets or sets a value that indicates to enable the data labels for the chart.

Declaration

public bool ShowDataLabels { get; set; }

Property Value

Type	Description
System.Boolean	This property takes the `bool` values and its default value is False.

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     ShowDataLabels="True">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels = true;

Stroke

Gets or sets the color used to paint the pyramid segments' outline.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	This property takes the Microsoft.Maui.Controls.Brush values and its default value is `Transparent`.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                     XBindingPath="Category"
                     YBindingPath="Value"
                     Stroke="Red">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ViewModel viewModel = new ViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
chart.Stroke = Colors.Red;

this.Content = chart;

StrokeWidth

Gets or sets a value to specify the width of the stroke drawn.

Declaration

public double StrokeWidth { get; set; }

Property Value

Type	Description
System.Double	This property takes the System.Double values and its default value is 2.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                     XBindingPath="Category"
                     YBindingPath="Value"
                     Stroke="Red"
                     StrokeWidth="4">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();
ViewModel viewModel = new ViewModel();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
chart.Stroke = Colors.Red;
chart.StrokeWidth = 4;

this.Content = chart;

TooltipTemplate

Gets or sets the DataTemplate that can be used to customize the appearance of the tooltip.

Declaration

public DataTemplate TooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts a Microsoft.Maui.Controls.DataTemplate value. and its default value is null.

Examples

MainPage.xaml

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                     XBindingPath="Category"
                     YBindingPath="Value"
                     EnableTooltip="True">
   <chart:SfPyramidChart.TooltipTemplate>
       <DataTemplate>
           <Border Background = "DarkGreen"
                   StrokeThickness="2" Stroke="Black" >
           <Label Text = "{Binding Item.YValue}"
                  TextColor="White" FontAttributes="Bold"
                  HorizontalOptions="Center" VerticalOptions="Center"/>
           </Border>
       </DataTemplate>
   </chart:SfPyramidChart.TooltipTemplate>
</chart:SfPyramidChart>

XBindingPath

Gets or sets a path value on the source object to serve a x value to the chart.

Declaration

public string XBindingPath { get; set; }

Property Value

Type	Description
System.String	The string that represents the property name for the x plotting data, and its default value is null.

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

YBindingPath

Gets or sets a path value on the source object to serve a y value to the chart.

Declaration

public string YBindingPath { get; set; }

Property Value

Type	Description
System.String	The string that represents the property name for the y plotting data, and its default value is null.

Examples

MainWindow.xaml
MainWindow.cs

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue">
</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewModel = new ViewModel();

chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

Methods

CreateSegment()

Creates and initializes a new chart segment for the pyramid chart.

Declaration

protected virtual ChartSegment CreateSegment()

Returns

Type
ChartSegment

Implements

Microsoft.Maui.IContentView

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout