syncfusion-flutter-pyramid-charts

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