syncfusion-maui-toolkit-pyramid-charts
starsforks
How to install syncfusion-maui-toolkit-pyramid-charts?
syncfusion/maui-toolkit-ui-components-skills/syncfusion-maui-toolkit-pyramid-charts
$npx -y skills add syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-pyramid-chartsImplements Syncfusion .NET MAUI Pyramid Chart (SfPyramidChart) for visually representing hierarchical, proportional, and parts-to-whole data using pyramid-shaped segments. Use this for pyramid charts, hierarchical data visualization, proportional data display, or segment-based ch
SKILL.md
| 1 | # Implementing .NET MAUI Pyramid Charts |
| 2 | |
| 3 | Guide users to implement Syncfusion .NET MAUI Pyramid Chart (SfPyramidChart), which visualizes proportions of a total in hierarchical segments, making it ideal for displaying parts-to-whole relationships in high-quality .NET MAUI applications. As a single-series chart without axes, data is represented as percentages where the sum of parts equals the whole. |
| 4 | |
| 5 | ## When to Use This Skill |
| 6 | |
| 7 | Use this skill when the user needs to: |
| 8 | |
| 9 | - **Create pyramid charts** to visualize hierarchical or proportional data in .NET MAUI applications |
| 10 | - **Display parts-to-whole relationships** where segments represent percentages of a total |
| 11 | - **Implement funnel-like visualizations** for sales stages, process flows, or demographic breakdowns |
| 12 | - **Add interactive features** like tooltips, legends, and data labels to pyramid charts |
| 13 | - **Customize appearance** with palettes, gradients, and segment spacing |
| 14 | - **Export chart visualizations** as images (JPEG/PNG) or streams for reports and documents |
| 15 | - **Configure data binding** from view models to pyramid chart segments |
| 16 | |
| 17 | ## Component Overview |
| 18 | |
| 19 | The **SfPyramidChart** control provides: |
| 20 | - Single-series hierarchical data visualization |
| 21 | - Interactive tooltips and legends with customization |
| 22 | - Rich data label placement options (Auto, Inner, Center, Outer) |
| 23 | - Custom palette brushes and gradient support |
| 24 | - Two pyramid modes: Linear (height-based) and Surface (area-based) |
| 25 | - Segment spacing control with GapRatio |
| 26 | - Export to image formats or streams |
| 27 | - Toggle series visibility through legend interaction |
| 28 | - Scrollable legends for overflow handling |
| 29 | |
| 30 | ## Documentation and Navigation Guide |
| 31 | |
| 32 | ### Getting Started |
| 33 | |
| 34 | 📄 **Read:** [references/getting-started.md](references/getting-started.md) |
| 35 | |
| 36 | When the user needs to: |
| 37 | - Install the `Syncfusion.Maui.Toolkit` NuGet package |
| 38 | - Initialize SfPyramidChart in XAML or C# |
| 39 | - Create view models and bind data to the chart |
| 40 | - Configure ItemsSource, XBindingPath, and YBindingPath |
| 41 | - Understand basic pyramid chart setup and namespace imports |
| 42 | - See complete working examples with data binding |
| 43 | |
| 44 | ### Data Labels |
| 45 | |
| 46 | 📄 **Read:** [references/data-labels.md](references/data-labels.md) |
| 47 | |
| 48 | When the user needs to: |
| 49 | - Enable and display data labels on pyramid segments |
| 50 | - Configure PyramidDataLabelSettings for label customization |
| 51 | - Control label placement (Auto, Inner, Center, Outer) |
| 52 | - Set label context to show X values or Y values |
| 53 | - Style labels with fonts, colors, backgrounds, borders, and corner radius |
| 54 | - Use series palette colors for label backgrounds |
| 55 | - Apply margins and customize label appearance |
| 56 | |
| 57 | ### Legend |
| 58 | |
| 59 | 📄 **Read:** [references/legend.md](references/legend.md) |
| 60 | |
| 61 | When the user needs to: |
| 62 | - Add and configure ChartLegend to display segment information |
| 63 | - Customize legend label styles (font, color, size, attributes) |
| 64 | - Set legend icon types and customize icon appearance |
| 65 | - Position legends (Top, Bottom, Left, Right) |
| 66 | - Create floating legends with offset positioning |
| 67 | - Enable toggle series visibility through legend taps |
| 68 | - Customize legend layout with ItemsLayout |
| 69 | - Use custom legend item templates |
| 70 | - Handle LegendItemCreated events |
| 71 | - Override maximum size requests for legend view |
| 72 | |
| 73 | ### Tooltip |
| 74 | |
| 75 | 📄 **Read:** [references/tooltip.md](references/tooltip.md) |
| 76 | |
| 77 | When the user needs to: |
| 78 | - Enable tooltips for displaying segment information on hover |
| 79 | - Configure ChartTooltipBehavior for tooltip customization |
| 80 | - Style tooltip appearance (background, fonts, colors, margins) |
| 81 | - Control tooltip display duration |
| 82 | - Create custom tooltip templates for advanced UI |
| 83 | - Bind tooltip content to item data properties |
| 84 | |
| 85 | ### Appearance and Customization |
| 86 | |
| 87 | 📄 **Read:** [references/appearance-customization.md](references/appearance-customization.md) |
| 88 | |
| 89 | When the user needs to: |
| 90 | - Apply custom palette brushes to pyramid segments |
| 91 | - Use gradient fills (LinearGradientBrush, RadialGradientBrush) |
| 92 | - Switch between Linear and Surface pyramid modes |
| 93 | - Understand mode differences (height-based vs area-based) |
| 94 | - Control segment spacing with GapRatio property |
| 95 | - Implement visual styling best practices |
| 96 | - Create sophisticated gradient effects for segments |
| 97 | |
| 98 | ### Exporting |
| 99 | |
| 100 | 📄 **Read:** [references/exporting.md](references/exporting.md) |
| 101 | |
| 102 | When the user needs to: |
| 103 | - Export pyramid charts as images (JPEG or PNG) |
| 104 | - Use SaveAsImage method for file export |
| 105 | - Understand platform-specific save locations |
| 106 | - Configure file writing permissions for Android and Windows Phone |
| 107 | - Set iOS photo album access permissions |
| 108 | - Export charts |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
