{"id":"7b09eaaf-947b-4610-820b-fa4ea1618e76","shortId":"hYxBrn","kind":"skill","title":"syncfusion-maui-pyramid-charts","tagline":"Implements 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","description":"# Implementing .NET MAUI Pyramid Charts\n\nGuide 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.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- **Create pyramid charts** to visualize hierarchical or proportional data in .NET MAUI applications\n- **Display parts-to-whole relationships** where segments represent percentages of a total\n- **Implement funnel-like visualizations** for sales stages, process flows, or demographic breakdowns\n- **Add interactive features** like tooltips, legends, and data labels to pyramid charts\n- **Customize appearance** with palettes, gradients, segment spacing, and orientation\n- **Enable modern UI effects** like liquid glass styling for iOS/macOS applications\n- **Export chart visualizations** as images (JPEG/PNG) or streams for reports and documents\n- **Configure data binding** from view models to pyramid chart segments\n\n## Component Overview\n\nThe **SfPyramidChart** control provides:\n- Single-series hierarchical data visualization\n- Interactive tooltips and legends with customization\n- Rich data label placement options (Auto, Inner, Center, Outer)\n- Custom palette brushes and gradient support\n- Two pyramid modes: Linear (height-based) and Surface (area-based)\n- Segment spacing control with GapRatio\n- Vertical and horizontal orientation options\n- Modern liquid glass visual effects (iOS/macOS .NET 10+)\n- Export to image formats or streams\n- Toggle series visibility through legend interaction\n- Scrollable legends for overflow handling\n\n## Documentation and Navigation Guide\n\n### Getting Started\n\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n\nWhen the user needs to:\n- Install the Syncfusion.Maui.Charts NuGet package\n- Initialize SfPyramidChart in XAML or C#\n- Create view models and bind data to the chart\n- Configure ItemsSource, XBindingPath, and YBindingPath\n- Understand basic pyramid chart setup and namespace imports\n- See complete working examples with data binding\n\n### Data Labels\n\n📄 **Read:** [references/data-labels.md](references/data-labels.md)\n\nWhen the user needs to:\n- Enable and display data labels on pyramid segments\n- Configure PyramidDataLabelSettings for label customization\n- Control label placement (Auto, Inner, Center, Outer)\n- Set label context to show X values or Y values\n- Style labels with fonts, colors, backgrounds, borders, and corner radius\n- Use series palette colors for label backgrounds\n- Apply margins and customize label appearance\n\n### Legend\n\n📄 **Read:** [references/legend.md](references/legend.md)\n\nWhen the user needs to:\n- Add and configure ChartLegend to display segment information\n- Customize legend label styles (font, color, size, attributes)\n- Set legend icon types and customize icon appearance\n- Position legends (Top, Bottom, Left, Right)\n- Create floating legends with offset positioning\n- Enable toggle series visibility through legend taps\n- Customize legend layout with ItemsLayout\n- Use custom legend item templates\n- Handle LegendItemCreated events\n- Override maximum size requests for legend view\n\n### Tooltip\n\n📄 **Read:** [references/tooltip.md](references/tooltip.md)\n\nWhen the user needs to:\n- Enable tooltips for displaying segment information on hover\n- Configure ChartTooltipBehavior for tooltip customization\n- Style tooltip appearance (background, fonts, colors, margins)\n- Control tooltip display duration\n- Create custom tooltip templates for advanced UI\n- Bind tooltip content to item data properties\n\n### Appearance and Customization\n\n📄 **Read:** [references/appearance-customization.md](references/appearance-customization.md)\n\nWhen the user needs to:\n- Apply custom palette brushes to pyramid segments\n- Use gradient fills (LinearGradientBrush, RadialGradientBrush)\n- Switch between Linear and Surface pyramid modes\n- Understand mode differences (height-based vs area-based)\n- Control segment spacing with GapRatio property\n- Implement visual styling best practices\n- Create sophisticated gradient effects for segments\n\n### Orientation and Visual Effects\n\n📄 **Read:** [references/orientation-and-effects.md](references/orientation-and-effects.md)\n\nWhen the user needs to:\n- Change chart orientation from Vertical to Horizontal\n- Implement liquid glass visual effects (iOS/macOS .NET 10+)\n- Integrate SfGlassEffectView for modern UI styling\n- Enable glass effects for tooltips\n- Configure EffectType (Regular vs Clear glass appearance)\n- Apply best practices for glass effects over backgrounds\n- Use transparent backgrounds in custom tooltip templates\n\n### Exporting\n\n📄 **Read:** [references/exporting.md](references/exporting.md)\n\nWhen the user needs to:\n- Export pyramid charts as images (JPEG or PNG)\n- Use SaveAsImage method for file export\n- Understand platform-specific save locations\n- Configure file writing permissions for Android and Windows Phone\n- Set iOS photo album access permissions\n- Export charts as streams using GetStreamAsync\n- Integrate chart streams with PDF, Excel, or Word components\n- Handle ImageFileFormat options","tags":["syncfusion","maui","pyramid","charts","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-pyramid-charts","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-pyramid-charts","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (5,329 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:09.050Z","embedding":null,"createdAt":"2026-04-18T22:15:36.442Z","updatedAt":"2026-04-22T00:56:09.050Z","lastSeenAt":"2026-04-22T00:56:09.050Z","tsv":"'10':275,612 'access':688 'add':159,419 'advanc':520 'album':687 'android':680 'appear':172,409,442,506,529,630 'appli':404,540,631 'applic':85,132,190 'area':256,567 'area-bas':255,566 'attribut':434 'auto':236,373 'axe':93 'background':392,403,507,638,641 'base':43,252,257,564,568 'basic':333 'best':578,632 'bind':205,322,346,522 'border':393 'bottom':446 'breakdown':158 'brush':242,543 'c':317 'center':238,375 'ch':44 'chang':598 'chart':5,11,33,49,58,91,122,170,192,211,326,335,599,657,691,697 'chartlegend':422 'charttooltipbehavior':500 'clear':628 'color':391,400,432,509 'complet':341 'compon':213,704 'configur':203,327,365,421,499,624,675 'content':524 'context':379 'control':217,260,370,511,569 'corner':395 'creat':120,318,449,515,580 'custom':171,230,240,369,407,427,440,462,468,503,516,531,541,643 'data':23,35,38,94,128,166,204,223,232,323,345,347,360,527 'demograph':157 'differ':561 'display':39,73,133,359,424,494,513 'document':202,293 'durat':514 'effect':183,272,583,589,609,621,636 'effecttyp':625 'enabl':180,357,455,491,619 'equal':104 'event':474 'exampl':343 'excel':701 'export':191,276,646,655,668,690 'featur':161 'file':667,676 'fill':549 'float':450 'flow':155 'font':390,431,508 'format':279 'funnel':148 'funnel-lik':147 'gapratio':262,573 'get':297 'getstreamasync':695 'glass':186,270,607,620,629,635 'gradient':175,244,548,582 'guid':50,296 'handl':292,472,705 'height':251,563 'height-bas':250,562 'hierarch':16,34,67,125,222 'high':81 'high-qual':80 'horizont':265,604 'hover':498 'icon':437,441 'ideal':71 'imag':195,278,659 'imagefileformat':706 'implement':6,45,53,146,575,605 'import':339 'inform':426,496 'initi':312 'inner':237,374 'instal':307 'integr':613,696 'interact':160,225,287 'io':685 'ios/macos':189,273,610 'item':470,526 'itemslayout':466 'itemssourc':328 'jpeg':660 'jpeg/png':196 'label':167,233,348,361,368,371,378,388,402,408,429 'layout':464 'left':447 'legend':164,228,286,289,410,428,436,444,451,460,463,469,480 'legenditemcr':473 'like':149,162,184 'linear':249,554 'lineargradientbrush':550 'liquid':185,269,606 'locat':674 'make':69 'margin':405,510 'maui':3,9,47,56,84,131 'maximum':476 'method':665 'mode':248,558,560 'model':208,320 'modern':181,268,616 'namespac':338 'navig':295 'need':118,305,355,417,489,538,596,653 'net':8,46,55,83,130,274,611 'nuget':310 'offset':453 'option':235,267,707 'orient':179,266,586,600 'outer':239,376 'overflow':291 'overrid':475 'overview':214 'packag':311 'palett':174,241,399,542 'part':20,75,103,135 'parts-to-whol':19,74,134 'pdf':700 'percentag':98,142 'permiss':678,689 'phone':683 'photo':686 'placement':234,372 'platform':671 'platform-specif':670 'png':662 'posit':443,454 'practic':579,633 'process':154 'properti':528,574 'proport':17,37,62,127 'provid':218 'pyramid':4,10,26,32,48,57,121,169,210,247,334,363,545,557,656 'pyramid-shap':25 'pyramiddatalabelset':366 'qualiti':82 'radialgradientbrush':551 'radius':396 'read':299,349,411,483,532,590,647 'references/appearance-customization.md':533,534 'references/data-labels.md':350,351 'references/exporting.md':648,649 'references/getting-started.md':300,301 'references/legend.md':412,413 'references/orientation-and-effects.md':591,592 'references/tooltip.md':484,485 'regular':626 'relationship':78,138 'report':200 'repres':15,96,141 'request':478 'rich':231 'right':448 'sale':152 'save':673 'saveasimag':664 'scrollabl':288 'see':340 'segment':28,42,68,140,176,212,258,364,425,495,546,570,585 'segment-bas':41 'seri':90,221,283,398,457 'set':377,435,684 'setup':336 'sfglasseffectview':614 'sfpyramidchart':12,59,216,313 'shape':27 'show':381 'singl':89,220 'single-seri':88,219 'size':433,477 'skill':111,114 'skill-syncfusion-maui-pyramid-charts' 'sophist':581 'source-syncfusion' 'space':177,259,571 'specif':672 'stage':153 'start':298 'stream':198,281,693,698 'style':187,387,430,504,577,618 'sum':101 'support':245 'surfac':254,556 'switch':552 'syncfus':2,7,54 'syncfusion-maui-pyramid-chart':1 'syncfusion.maui.charts':309 'tap':461 'templat':471,518,645 'toggl':282,456 'tooltip':163,226,482,492,502,505,512,517,523,623,644 'top':445 'topic-agent-skills' 'total':65,145 'transpar':640 'two':246 'type':438 'ui':182,521,617 'understand':332,559,669 'use':24,29,109,112,397,467,547,639,663,694 'user':51,117,304,354,416,488,537,595,652 'valu':383,386 'vertic':263,602 'view':207,319,481 'visibl':284,458 'visual':14,36,61,124,150,193,224,271,576,588,608 'vs':565,627 'whole':22,77,106,137 'window':682 'without':92 'word':703 'work':342 'write':677 'x':382 'xaml':315 'xbindingpath':329 'y':385 'ybindingpath':331","prices":[{"id":"bade23fd-caf4-47dc-8286-e17e0ac0a544","listingId":"7b09eaaf-947b-4610-820b-fa4ea1618e76","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:36.442Z"}],"sources":[{"listingId":"7b09eaaf-947b-4610-820b-fa4ea1618e76","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-pyramid-charts","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-pyramid-charts","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:36.442Z","lastSeenAt":"2026-04-22T00:56:09.050Z"}],"details":{"listingId":"7b09eaaf-947b-4610-820b-fa4ea1618e76","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-pyramid-charts","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.","skill_md_sha":"906450d03d430de1f4cd6d1a9113cf73439d0f27","skill_md_path":"skills/syncfusion-maui-pyramid-charts/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-pyramid-charts"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-pyramid-charts","description":"Implements 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 charts. This skill covers installation, data binding, legends, tooltips, data labels, appearance customization, and gradients."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-pyramid-charts"},"updatedAt":"2026-04-22T00:56:09.050Z"}}