mcpField
S
syncfusion-maui-toolkit-pyramid-charts

syncfusion-maui-toolkit-pyramid-charts

github.com/syncfusionDesign & UI3943 installsUpdated 7w ago
Repository

About syncfusion-maui-toolkit-pyramid-charts

A documentation skill for building Syncfusion SfPyramidChart visualizations in .NET MAUI. It focuses on parts-to-whole data, with guidance on labels, legends, tooltips, appearance, and image export.

Key features

  1. 01Hierarchical, single-series visualization
  2. 02Linear and Surface pyramid modes
  3. 03Configurable labels, legends, and tooltips
  4. 04Palette, gradient, and segment spacing controls
  5. 05Export to images or streams

Use cases

  1. 01Visualize sales stages or process flows
  2. 02Show demographic proportions
  3. 03Export charts for reports or documents

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-pyramid-charts

After installing, type/syncfusion-maui-toolkit-pyramid-chartsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
appearance-customization.md
data-labels.md
exporting.md
getting-started.md
legend.md
tooltip.md

Details

From the project README

Implementing .NET MAUI Pyramid Charts

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.

When to Use This Skill

Use this skill when the user needs to:

  • Create pyramid charts to visualize hierarchical or proportional data in .NET MAUI applications
  • Display parts-to-whole relationships where segments represent percentages of a total
  • Implement funnel-like visualizations for sales stages, process flows, or demographic breakdowns
  • Add interactive features like tooltips, legends, and data labels to pyramid charts
  • Customize appearance with palettes, gradients, and segment spacing
  • Export chart visualizations as images (JPEG/PNG) or streams for reports and documents
  • Configure data binding from view models to pyramid chart segments

Component Overview

The SfPyramidChart control provides:

  • Single-series hierarchical data visualization
  • Interactive tooltips and legends with customization
  • Rich data label placement options (Auto, Inner, Center, Outer)
  • Custom palette brushes and gradient support
  • Two pyramid modes: Linear (height-based) and Surface (area-based)
  • Segment spacing control with GapRatio
  • Export to image formats or streams
  • Toggle series visibility through legend interaction
  • Scrollable legends for overflow handling

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When the user needs to:

  • Install the Syncfusion.Maui.Toolkit NuGet package
  • Initialize SfPyramidChart in XAML or C#
  • Create view models and bind data to the chart
  • Configure ItemsSource, XBindingPath, and YBindingPath
  • Understand basic pyramid chart setup and namespace imports
  • See complete working examples with data binding
Data Labels

📄 Read: references/data-labels.md

When the user needs to:

  • Enable and display data labels on pyramid segments
  • Configure PyramidDataLabelSettings for label customization
  • Control label placement (Auto, Inner, Center, Outer)
  • Set label context to show X values or Y values
  • Style labels with fonts, colors, backgrounds, borders, and corner radius
  • Use series palette colors for label backgrounds
  • Apply margins and customize label appearance
Legend

📄 Read: references/legend.md

When the user needs to:

  • Add and configure ChartLegend to display segment information
  • Customize legend label styles (font, color, size, attributes)
  • Set legend icon types and customize icon appearance
  • Position legends (Top, Bottom, Left, Right)
  • Create floating legends with offset positioning
  • Enable toggle series visibility through legend taps
  • Customize legend layout with ItemsLayout
  • Use custom legend item templates
  • Handle LegendItemCreated events
  • Override maximum size requests for legend view
Tooltip

📄 Read: references/tooltip.md

When the user needs to:

  • Enable tooltips for displaying segment information on hover
  • Configure ChartTooltipBehavior for tooltip customization
  • Style tooltip appearance (background, fonts, colors, margins)
  • Control tooltip display duration
  • Create custom tooltip templates for advanced UI
  • Bind tooltip content to item data properties
Appearance and Customization

📄 Read: references/appearance-customization.md

When the user needs to:

  • Apply custom palette brushes to pyramid segments
  • Use gradient fills (LinearGradientBrush, RadialGradientBrush)
  • Switch between Linear and Surface pyramid modes
  • Understand mode differences (height-based vs area-based)
  • Control segment spacing with GapRatio property
  • Implement visual styling best practices
  • Create sophisticated gradient effects for segments
Exporting

📄 Read: references/exporting.md

When the user needs to:

  • Export pyramid charts as images (JPEG or PNG)
  • Use SaveAsImage method for file export
  • Understand platform-specific save locations
  • Configure file writing permissions for Android and Windows Phone
  • Set iOS photo album access permissions
  • Export charts as streams using GetStreamAsync
  • Integrate chart streams with PDF, Excel, or Word components
  • Handle ImageFileFormat options

Comments

Markdown supported