Class SfPyramidChart

Renders pyramid chart for more user-friendly data representation and greater UI visualization.

Inheritance

System.Object

ChartBase

SfPyramidChart

Implements

System.IDisposable

System.ComponentModel.INotifyPropertyChanged

Inherited Members

ChartBase.Dispose()

ChartBase.Header

ChartBase.HeaderProperty

ChartBase.HorizontalHeaderAlignment

ChartBase.HorizontalHeaderAlignmentProperty

ChartBase.InteractiveBehavior

ChartBase.InteractiveBehaviorProperty

ChartBase.Legend

ChartBase.LegendProperty

ChartBase.MeasureOverride(Size)

ChartBase.OnDoubleTapped(DoubleTappedRoutedEventArgs)

ChartBase.OnGotFocus(RoutedEventArgs)

ChartBase.OnHolding(HoldingRoutedEventArgs)

ChartBase.OnKeyDown(KeyRoutedEventArgs)

ChartBase.OnKeyUp(KeyRoutedEventArgs)

ChartBase.OnLostFocus(RoutedEventArgs)

ChartBase.OnManipulationCompleted(ManipulationCompletedRoutedEventArgs)

ChartBase.OnManipulationDelta(ManipulationDeltaRoutedEventArgs)

ChartBase.OnManipulationInertiaStarting(ManipulationInertiaStartingRoutedEventArgs)

ChartBase.OnManipulationStarted(ManipulationStartedRoutedEventArgs)

ChartBase.OnManipulationStarting(ManipulationStartingRoutedEventArgs)

ChartBase.OnPointerCanceled(PointerRoutedEventArgs)

ChartBase.OnPointerCaptureLost(PointerRoutedEventArgs)

ChartBase.OnPointerEntered(PointerRoutedEventArgs)

ChartBase.OnPointerExited(PointerRoutedEventArgs)

ChartBase.OnPointerMoved(PointerRoutedEventArgs)

ChartBase.OnPointerPressed(PointerRoutedEventArgs)

ChartBase.OnPointerReleased(PointerRoutedEventArgs)

ChartBase.OnPointerWheelChanged(PointerRoutedEventArgs)

ChartBase.OnRightTapped(RightTappedRoutedEventArgs)

ChartBase.OnTapped(TappedRoutedEventArgs)

ChartBase.PropertyChanged

ChartBase.ResumeSeriesNotification()

ChartBase.SeriesBoundsChanged

ChartBase.SeriesClipRect

ChartBase.SuspendSeriesNotification()

ChartBase.TooltipBehavior

ChartBase.TooltipBehaviorProperty

ChartBase.VerticalHeaderAlignment

ChartBase.VerticalHeaderAlignmentProperty

ChartBase.VisibleSeriesProperty

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

public class SfPyramidChart : ChartBase, IDisposable, INotifyPropertyChanged

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.

Legend

The Legend contains list of data points in chart series. The information provided in each legend item helps to identify the corresponding data point in chart series. The Series 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.

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

       <chart:SfPyramidChart.DataContext>
           <local:ViewModel/>
       </chart:SfPyramidChart.DataContext>
       <chart:SfPyramidChart.Legend>
           <chart:ChartLegend/>
       </chart:SfPyramidChart.Legend>

</chart:SfPyramidChart>

ViewModel viewModel = new ViewModel();

SfPyramidChart chart = new SfPyramidChart()
{
    ItemsSource = viewmodel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue"
};

chart.DataContext = viewModel;
chart.Legend = new ChartLegend();

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

public ViewModel()
{
   Data = new ObservableCollection<Model>();
   Data.Add(new Model() { XValue = "A", YValue = 100 });
   Data.Add(new Model() { XValue = "B", YValue = 150 });
   Data.Add(new Model() { XValue = "C", YValue = 110 });
   Data.Add(new Model() { XValue = "D", YValue = 230 });
}

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 ChartSeries.

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 EnableTooltip = "True"
                      ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue">

        <chart:SfPyramidChart.DataContext>
            <local:ViewModel/>
        </chart:SfPyramidChart.DataContext>

        <chart:SfPyramidChart.TooltipBehavior>
            <chart:ChartTooltipBehavior/>
        </chart:SfPyramidChart.TooltipBehavior>

</chart:SfPyramidChart>

ViewModel viewModel = new ViewModel();

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

chart.DataContext = viewModel;

chart.TooltipBehavior = new ChartTooltipBehavior();

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 ShowDataLabels = "True"
                      ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue">

       <chart:SfPyramidChart.DataContext>
           <local:ViewModel/>
       </chart:SfPyramidChart.DataContext>

</chart:SfPyramidChart>

ViewModel viewModel = new ViewModel();

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

chart.DataContext = viewModel;

Constructors

SfPyramidChart()

Initializes a new instance of the SfPyramidChart.

Declaration

public SfPyramidChart()

Fields

DataLabelSettingsProperty

Identifies the DataLabelSettings dependency property.

Declaration

public static readonly DependencyProperty DataLabelSettingsProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `DataLabelSettings` dependency property.

EnableTooltipProperty

Identifies the EnableTooltip dependency property.

Declaration

public static readonly DependencyProperty EnableTooltipProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `EnableTooltip` dependency property.

ExplodeIndexProperty

Identifies the ExplodeIndex dependency property.

Declaration

public static readonly DependencyProperty ExplodeIndexProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `ExplodeIndex` dependency property.

ExplodeOffsetProperty

Identifies the ExplodeOffset dependency property.

Declaration

public static readonly DependencyProperty ExplodeOffsetProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `ExplodeOffset` dependency property.

ExplodeOnTapProperty

Identifies the ExplodeOnTap dependency property.

Declaration

public static readonly DependencyProperty ExplodeOnTapProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `ExplodeOnTap` dependency property.

GapRatioProperty

Identifies the GapRatio dependency property.

Declaration

public static readonly DependencyProperty GapRatioProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `GapRatio` dependency property.

ItemsSourceProperty

Identifies the ItemsSource dependency property.

Declaration

public static readonly DependencyProperty ItemsSourceProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `ItemsSource` dependency property.

ModeProperty

Identifies the Mode dependency property.

Declaration

public static readonly DependencyProperty ModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `Mode` dependency property.

PaletteBrushesProperty

Declaration

public static readonly DependencyProperty PaletteBrushesProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

SelectionBehaviorProperty

The DependencyProperty for SelectionBehavior property. .

Declaration

public static readonly DependencyProperty SelectionBehaviorProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ShowDataLabelsProperty

Identifies the ShowDataLabels dependency property.

Declaration

public static readonly DependencyProperty ShowDataLabelsProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `ShowDataLabels` dependency property and its default value is false.

TooltipTemplateProperty

Identifies the TooltipTemplate dependency property.

Declaration

public static readonly DependencyProperty TooltipTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `TooltipTemplate` dependency property.

XBindingPathProperty

Identifies the XBindingPath dependency property.

Declaration

public static readonly DependencyProperty XBindingPathProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `XBindingPath` dependency property.

YBindingPathProperty

Identifies the YBindingPath dependency property.

Declaration

public static readonly DependencyProperty YBindingPathProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `YBindingPath` dependency property.

Properties

DataLabelSettings

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

Declaration

public PyramidDataLabelSettings DataLabelSettings { get; set; }

Property Value

Type	Description
PyramidDataLabelSettings	It takes the PyramidDataLabelSettings.

Remarks

This allows us to change the look of the displaying labels' content, shapes, and connector lines at the data point.

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

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

    <!--omitted for brevity-->

</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 value indicating whether the tooltip for the series should be shown or hidden.

Declaration

public bool EnableTooltip { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values, and its default value is `False`.

Remarks

The series tooltip will appear when you click or tap the series area.

Examples

MainWindow.xaml
MainWindow.cs

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

    <!--omitted for brevity-->

</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

chart.ItemsSource = viewmodel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip = true;

ExplodeIndex

Gets or sets a value that can be used to explode any specific segment.

Declaration

public int ExplodeIndex { get; set; }

Property Value

Type	Description
System.Int32	It accepts integer values, and its default value is -1.

Examples

MainWindow.xaml
MainWindow.cs

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

   <!--omitted for brevity-->

</chart:SfFunnelChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

chart.ItemsSource = viewmodel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ExplodeIndex = 1;

ExplodeOffset

Gets or sets the distance from the origination positions where the segment is exploded when the ExplodeIndex value is given.

Declaration

public double ExplodeOffset { get; set; }

Property Value

Type	Description
System.Double	It accepts double values, and its default value is 40.

Examples

MainWindow.xaml
MainWindow.cs

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

    <!--omitted for brevity-->

</chart:SfFunnelChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

chart.ItemsSource = viewmodel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ExplodeOffset = 50;

ExplodeOnTap

Gets or sets the value that indicates whether segment slices will explode when clicked or tapped.

Declaration

public bool ExplodeOnTap { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values, and its default value is false.

Remarks

The segment will explode when you click or tap it.

Examples

MainWindow.xaml
MainWindow.cs

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

   <!--omitted for brevity-->

</chart:SfFunnelChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

chart.ItemsSource = viewmodel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ExplodeOnTap = true;

GapRatio

Gets or sets the ratio of the distance between the pyramid segment blocks.

Declaration

public double GapRatio { get; set; }

Property Value

Type	Description
System.Double	It accepts double values, and 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.5">

    <!--omitted for brevity-->

</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

chart.ItemsSource = viewmodel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.GapRatio = 0.5;

ItemsSource

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

Declaration

public object ItemsSource { get; set; }

Property Value

Type	Description
System.Object	It accepts the data points collections.

Examples

MainWindow.xaml
MainWindow.cs

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

    <!--omitted for brevity-->

</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

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

Mode

Gets or sets a value indicating whether the y value should interpret the height or area of the pyramid block.

Declaration

public ChartPyramidMode Mode { get; set; }

Property Value

Type	Description
ChartPyramidMode	It accepts the ChartPyramidMode values and its default value is Linear.

Examples

MainWindow.xaml
MainWindow.cs

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

    <!--omitted for brevity-->

</chart:SfFunnelChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

chart.ItemsSource = viewmodel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.Mode = ChartPyramidMode.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.UI.Xaml.Media.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

<Grid>
<Grid.Resources>
   <BrushCollection x:Key="customBrushes">
      <SolidColorBrush Color="#4dd0e1"/>
      <SolidColorBrush Color="#26c6da"/>
      <SolidColorBrush Color="#00bcd4"/>
      <SolidColorBrush Color="#00acc1"/>
      <SolidColorBrush Color="#0097a7"/>
      <SolidColorBrush Color="#00838f"/>
   </BrushCollection>
</Grid.Resources>

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

</chart:SfPyramidChart>
</Grid>

SfPyramidChart chart = new SfPyramidChart();
ViewModel viewModel = new ViewModel();
List<Brush> CustomBrushes = new List<Brush>();
CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 77, 208, 225)));
CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 38, 198, 218)));
CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 188, 212)));
CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 172, 193)));
CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 151, 167)));
CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 131, 143)));

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

this.Content = chart;

SelectionBehavior

Gets or sets a selection behavior that enables you to select or highlight a segment in a series.

Declaration

public DataPointSelectionBehavior SelectionBehavior { get; set; }

Property Value

Type	Description
DataPointSelectionBehavior	This property takes the 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">

    <!--omitted for brevity-->

    <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 indicating whether the data labels for the funnel chart should be enabled.

Declaration

public bool ShowDataLabels { get; set; }

Property Value

Type	Description
System.Boolean	It takes bool values, and its default value is false.

Examples

MainWindow.xaml
MainWindow.cs

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

    <!--omitted for brevity-->

</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

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

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.UI.Xaml.DataTemplate	This accepts a Microsoft.UI.Xaml.DataTemplate value.

Examples

MainPage.xaml

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"
                      EnableTooltip="True" >
    <chart:SfPyramidChart.TooltipTemplate>
        <DataTemplate>
           <Border Background = "DarkGreen"
                   CornerRadius="5"
                   BorderThickness="2"
                   BorderBrush="Black"
                   Width="50" Height="30">
               <TextBlock Text = "{Binding Item.YValue}"
                          Foreground="White"
                          FontWeight="Bold"
                          HorizontalAlignment="Center"
                          VerticalAlignment="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 series.

Declaration

public string XBindingPath { get; set; }

Property Value

Type	Description
System.String	The string that represents the property name for the primary axis and its default value is null.

Examples

MainWindow.xaml
MainWindow.cs

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

    <!--omitted for brevity-->

</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 series.

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">

    <!--omitted for brevity-->

</chart:SfPyramidChart>

SfPyramidChart chart = new SfPyramidChart();

ViewModel viewmodel = new ViewModel();

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

Methods

OnApplyTemplate()

Declaration

protected override void OnApplyTemplate()

Overrides

ChartBase.OnApplyTemplate()

Implements

System.IDisposable

System.ComponentModel.INotifyPropertyChanged