syncfusion-flutter-pyramid-charts

Q: How do I install syncfusion-flutter-pyramid-charts?

Run npx skills add https://github.com/syncfusion/flutter-ui-components-skills --skill syncfusion-flutter-pyramid-charts in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-flutter-pyramid-charts/ (personal) or .claude/skills/syncfusion-flutter-pyramid-charts/ (project).

by syncfusionMobile

Implements Syncfusion Flutter Pyramid Charts (SfPyramidChart, PyramidSeries) for proportional and hierarchical data visualization. Use when working with pyramid charts, funnel-style visualizations, or segment-based data comparisons in Flutter. This skill covers series configuration, segment exploding, gap ratio, PyramidMode, data labels, legends, and tooltip customization.

Installs: 50
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-flutter-pyramid-charts automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Pyramid Charts (SfPyramidChart)

The Syncfusion Flutter SfPyramidChart widget renders high-performance pyramid charts natively in Dart. It visualizes proportional or hierarchical data as stacked triangular segments, making it ideal for sales funnels, population distribution, organizational hierarchy, and process stage analysis.

When to Use This Skill

User wants to render a pyramid chart in a Flutter application
User references SfPyramidChart, PyramidSeries, or syncfusion_flutter_charts
User needs to customize pyramid segments (color, gap, explode, mode)
User wants to add labels, legend, tooltip, or selection to a pyramid chart
User needs to export a pyramid chart as PNG or PDF
User asks about RTL support or accessibility in Syncfusion Flutter charts

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Package installation and pubspec.yaml setup
Import statement and basic widget initialization
Binding data source with xValueMapper / yValueMapper
Adding title, data labels, legend, and tooltip
Minimal runnable example

Pyramid Customization

📄 Read: references/pyramid-customization.md

PyramidMode: linear (height-based) vs surface (area-based)
Changing pyramid size with height and width (percentage strings)
Gap between segments using gapRatio (0 to 1)
Exploding segments: explode, explodeIndex, explodeOffset
Palette colors, border color/width, opacity, pointColorMapper

Series Customization

📄 Read: references/series-customization.md

Animation: animationDuration and animationDelay
Handling null/empty data points with EmptyPointSettings
Empty point modes: gap, zero, drop, average
Color mapping per data point via pointColorMapper

Data Labels

📄 Read: references/data-labels.md

Enabling data labels with DataLabelSettings(isVisible: true)
Inside vs outside positioning (labelPosition)
Connector line settings (type, color, length)
Custom label templates via builder
Smart labels and labelIntersectAction
Overflow mode and hiding zero-value labels

Legend and Tooltip

📄 Read: references/legend-and-tooltip.md

Enabling and positioning the legend
Legend title, item templates, overflow behavior
Toggle series visibility via legend tap
Enabling tooltip with TooltipBehavior
Tooltip formatting, custom templates, activation mode

Selection and Callbacks

📄 Read: references/selection-and-callbacks.md

Enabling segment selection with SelectionBehavior
Multi-selection, toggle selection, initial selection
Programmatic selection via selectDataPoints
Key callbacks: onPointTap, onSelectionChanged, onTooltipRender
onRendererCreated for dynamic data updates via PyramidSeriesController

Appearance, Export, and RTL

📄 Read: references/appearance-export-rtl.md

Chart title customization (ChartTitle)
Chart sizing, margin, background color/image
Exporting chart as PNG image or PDF document
RTL support using Directionality widget or locale
Accessibility: contrast, font scaling, tap targets
pixelToPoint method for coordinate conversion

Quick Start Example

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class PyramidChartExample extends StatelessWidget {
  final List<ChartData> chartData = [
    ChartData('Enterprise', 654),
    ChartData('Mid-Market', 575),
    ChartData('SMB', 446),
    ChartData('Startup', 341),
    ChartData('Individual', 160),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfPyramidChart(
        title: ChartTitle(text: 'Sales Pipeline'),
        legend: Legend(isVisible: true),
        series: PyramidSeries<ChartData, String>(
          dataSource: chartData,
          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
          dataLabelSettings: DataLabelSettings(isVisible: true),
        ),
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double y;
}

Common Patterns

Exploding a specific segment

PyramidSeries<ChartData, String>(
  explode: true,
  explodeIndex: 0,      // Index of segment to highlight
  explodeOffset: '5%',  // Distance the segment moves out
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

Surface mode (area proportional)

PyramidSeries<ChartData, String>(
  pyramidMode: PyramidMode.surface,  // Area ∝ Y value (vs linear: height ∝ Y)
  dataSource: chartData,
  xValueMapper: (ChartData data, _) => data.x,
  yValueMapper: (ChartData data, _) => data.y,
)

Tooltip + selection together

// In initState:
_tooltipBehavior = TooltipBehavior(enable: true);
_selectionBehavior = SelectionBehavior(enable: true);

// In widget:
SfPyramidChart(
  tooltipBehavior: _tooltipBehavior,
  series: PyramidSeries<ChartData, String>(
    selectionBehavior: _selectionBehavior,
    dataSource: chartData,
    xValueMapper: (ChartData data, _) => data.x,
    yValueMapper: (ChartData data, _) => data.y,
  ),
)

Key Properties

Property	Type	Description
`series`	`PyramidSeries`	The pyramid data series (one per chart)
`title`	`ChartTitle`	Chart title widget
`legend`	`Legend`	Legend configuration
`tooltipBehavior`	`TooltipBehavior`	Tooltip enable/customize
`enableMultiSelection`	`bool`	Allow selecting multiple segments
`palette`	`List<Color>`	Custom segment colors
`pyramidMode`	`PyramidMode`	`linear` or `surface` sizing
`gapRatio`	`double`	Gap between segments (0–1)
`explode`	`bool`	Enable segment explode on tap

FAQ

What does the syncfusion-flutter-pyramid-charts skill do?

How do I install syncfusion-flutter-pyramid-charts?

Run npx skills add https://github.com/syncfusion/flutter-ui-components-skills --skill syncfusion-flutter-pyramid-charts in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-flutter-pyramid-charts/ (personal) or .claude/skills/syncfusion-flutter-pyramid-charts/ (project).

Which AI agents can use syncfusion-flutter-pyramid-charts?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-flutter-pyramid-charts safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-flutter-pyramid-charts?

It is published by syncfusion in syncfusion/flutter-ui-components-skills. It has 50 recorded installs.