Loading...
Loading...
Implement Syncfusion WinUI Pyramid Charts (SfPyramidChart) for visualizing hierarchical proportional data. Use this when working with pyramid charts, hierarchical visualization, or proportional data display in WinUI applications. This skill covers data binding, legend configuration, exploding segments, tooltips, data labels, selection interactions, and custom styling with palettes and gradients.
npx skill4agent add syncfusion/winui-ui-components-skills syncfusion-winui-pyramid-chart<Window
x:Class="PyramidChartApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
xmlns:local="using:PyramidChartApp">
<chart:SfPyramidChart x:Name="chart"
Header="Food Nutrition Pyramid"
ItemsSource="{Binding Data}"
XBindingPath="FoodName"
YBindingPath="Calories"
EnableTooltip="True"
ShowDataLabels="True">
<chart:SfPyramidChart.DataContext>
<local:ChartViewModel/>
</chart:SfPyramidChart.DataContext>
<chart:SfPyramidChart.Legend>
<chart:ChartLegend/>
</chart:SfPyramidChart.Legend>
</chart:SfPyramidChart>
</Window>public class Model
{
public string FoodName { get; set; }
public double Calories { get; set; }
}
public class ChartViewModel
{
public List<Model> Data { get; set; }
public ChartViewModel()
{
Data = new List<Model>()
{
new Model { FoodName = "Sweet treats", Calories = 250 },
new Model { FoodName = "Cheese", Calories = 402 },
new Model { FoodName = "Vegetables", Calories = 65 },
new Model { FoodName = "Fish", Calories = 206 },
new Model { FoodName = "Fruits", Calories = 52 },
new Model { FoodName = "Rice", Calories = 130 }
};
}
}using Syncfusion.UI.Xaml.Charts;
using Microsoft.UI.Xaml;
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
// Alternative: Create chart programmatically
SfPyramidChart chart = new SfPyramidChart();
ChartViewModel viewModel = new ChartViewModel();
chart.DataContext = viewModel;
chart.SetBinding(SfPyramidChart.ItemsSourceProperty,
new Binding() { Path = new PropertyPath("Data") });
chart.XBindingPath = "FoodName";
chart.YBindingPath = "Calories";
chart.Header = "Food Nutrition Pyramid";
chart.Legend = new ChartLegend();
chart.EnableTooltip = true;
chart.ShowDataLabels = true;
this.Content = chart;
}
}<Grid>
<Grid.Resources>
<BrushCollection x:Key="customColors">
<SolidColorBrush Color="#4dd0e1"/>
<SolidColorBrush Color="#26c6da"/>
<SolidColorBrush Color="#00bcd4"/>
<SolidColorBrush Color="#00acc1"/>
<SolidColorBrush Color="#0097a7"/>
</BrushCollection>
</Grid.Resources>
<chart:SfPyramidChart Palette="Custom"
PaletteBrushes="{StaticResource customColors}"
ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"/>
</Grid><chart:SfPyramidChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
SelectionBehavior="SelectSingle">
<chart:SfPyramidChart.SelectionBrush>
<SolidColorBrush Color="#FF6B6B"/>
</chart:SfPyramidChart.SelectionBrush>
</chart:SfPyramidChart><chart:SfPyramidChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
ExplodeOnClick="True"
ExplodeRadius="10"/><Grid>
<Grid.Resources>
<BrushCollection x:Key="gradientColors">
<LinearGradientBrush>
<GradientStop Offset="1" Color="#FFE7C7"/>
<GradientStop Offset="0" Color="#FCB69F"/>
</LinearGradientBrush>
<LinearGradientBrush>
<GradientStop Offset="1" Color="#fadd7d"/>
<GradientStop Offset="0" Color="#fccc2d"/>
</LinearGradientBrush>
</BrushCollection>
</Grid.Resources>
<chart:SfPyramidChart Palette="Custom"
PaletteBrushes="{StaticResource gradientColors}"
ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"/>
</Grid>| Property | Type | Description |
|---|---|---|
| ItemsSource | object | Data source for the pyramid chart |
| XBindingPath | string | Property path for X-axis data (labels) |
| YBindingPath | string | Property path for Y-axis data (values) |
| Header | object | Chart title or header content |
| Legend | ChartLegend | Legend configuration object |
| EnableTooltip | bool | Enable/disable tooltips on hover |
| ShowDataLabels | bool | Show/hide data labels on segments |
| Palette | ChartColorPalette | Predefined color palette |
| PaletteBrushes | IList<Brush> | Custom color collection |
| ExplodeOnClick | bool | Enable segment explosion on click |
| ExplodeIndex | int | Index of segment to explode |
| ExplodeRadius | double | Distance for exploded segment |
| GapRatio | double | Spacing between segments (0-1) |
| SelectionBehavior | SelectionBehavior | Selection mode configuration |
getting-started.md