Skip to main content Home Creators syncfusion flutter-ui-components-skills syncfusion-flutter-funnel-charts
syncfusion-flutter-funnel-charts Implements Syncfusion Flutter Funnel Chart (SfFunnelChart) for proportional and stage-based data visualization in Flutter apps. Use when working with conversion funnels, sales pipelines, or process-stage visualizations. This skill covers series configuration, segment exploding, gap ratio, data labels, legends, tooltips, and customization.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/flutter-ui-components-skills --skill syncfusion-flutter-funnel-chartsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-flutter-funnel-charts description Implements Syncfusion Flutter Funnel Chart (SfFunnelChart) for proportional and stage-based data visualization in Flutter apps. Use when working with conversion funnels, sales pipelines, or process-stage visualizations. This skill covers series configuration, segment exploding, gap ratio, data labels, legends, tooltips, and customization. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
Syncfusion Flutter Funnel Chart
This skill covers the Syncfusion Flutter SfFunnelChart widget for visualizing data in a funnel shape, typically used to represent stages in a process where values progressively decrease.
When to Use This Skill
Use this skill when you need to:
Visualize conversion funnels showing stages in a sales or marketing processDisplay hierarchical data with progressively decreasing valuesTrack process stages in workflows, pipelines, or sequential processesAnalyze conversion rates across different stages (leads, prospects, customers)Show sales pipelines with deal progression through various stagesVisualize filtering processes where data is reduced at each stepDisplay recruitment funnels showing candidate progression through hiring stagesCreate marketing analytics showing user journey from awareness to conversionRepresent process efficiency with data reduction at each stageBuild analytics dashboards with funnel visualization for business metrics
Key Features
Funnel visualization with neck and body segmentsInteractive selection with single and multi-selection supportRich tooltips with customizable appearance and activation modesData labels with flexible positioning (inside/outside) and stylingLegend support with customization and toggling capabilitiesExploded segments for emphasis on specific data pointsGap between segments for clear visual separationAnimation support with customizable duration and delayPalette colors for automatic color applicationExport capabilities to PNG images and PDF documentsRTL support for right-to-left languagesAccessibility features with semantic labels and screen reader supportResponsive sizing with configurable width and heightEmpty point handling with multiple modesColor mapping for data-driven colors
Documentation and Navigation Guide
Getting Started
Installation and package setup
Basic SfFunnelChart implementation
Adding data source and binding
First chart creation
Package dependencies and imports
Quick start code examples
Component Overview
SfFunnelChart widget overview and features
When to use funnel charts vs other chart types
Key features and capabilities
Common use cases and scenarios
Component architecture
Funnel Customization
Funnel size configuration (height and width)
Neck size customization (neckHeight and neckWidth)
Gap between segments (gapRatio)
Exploding segments (explode, explodeIndex, explodeOffset)
Segment borders and opacity
Palette colors application
Visual appearance customization
Series Customization
Animation settings (duration and delay)
Empty point handling (gap, zero, drop, average modes)
Empty point customization (color, border)
Color mapping for data points (pointColorMapper)
Series-level styling options
Data Labels
Enabling and positioning data labels
Label alignment options (outer, auto, top, bottom, middle)
Label position (inside/outside)
Styling data labels (color, font, borders)
Using series colors for labels
Hiding labels for zero values
Overflow mode handling
Data label templates with builder
Legend
Enabling legend (isVisible)
Customizing legend appearance
Legend title configuration
Legend positioning (top, bottom, left, right, auto)
Legend overflow modes (scroll, wrap)
Toggling series visibility
Floating legend with offset
Legend item templates with builder
Tooltip
Enabling tooltips (TooltipBehavior)
Customizing tooltip appearance (colors, borders, elevation)
Tooltip formatting and templates
Tooltip positioning (auto, pointer)
Activation modes (tap, double tap, long press)
Tooltip duration and animation
Custom tooltip builders
Selection
Enabling selection (SelectionBehavior)
Single and multi-selection
Customizing selected segments (colors, borders, opacity)
Customizing unselected segments
Initial selection on rendering
Toggle selection behavior
Programmatic selection with methods
Chart Title and Appearance
Adding and styling chart title
Title alignment (near, center, far)
Title background and borders
Title text styling
Chart sizing (width/height)
Chart margin configuration
Background color and image
Border customization
Callbacks and Events
onLegendItemRender - Customize legend items
onTooltipRender - Customize tooltip content
onDataLabelRender - Customize data labels
onLegendTapped - Handle legend taps
onSelectionChanged - Handle selection events
onDataLabelTapped - Handle data label taps
onPointTap - Handle segment taps
onPointDoubleTap - Handle double taps
onPointLongPress - Handle long press
onChartTouchInteractionUp/Down/Move - Touch interactions
onRendererCreated - Access series controller
Common Patterns and Best Practices
Sales pipeline funnel pattern
Marketing conversion with colors
Exploded segment emphasis
Custom neck sizing techniques
Dynamic updates with controller
Pattern combination examples
Pattern selection guide
Advanced Features
FunnelSeriesController methods
pixelToPoint conversion
Dynamic data updates
Programmatic control
Export chart as PNG image
Export chart as PDF document
Image quality and pixel ratio
PDF document creation
Localization and Accessibility
Screen reader support
Color contrast requirements
Large font support
Touch target sizing
Accessible interactions
RTL support for Arabic, Hebrew, etc.
Directionality widget usage
RTL locale configuration
Legend and tooltip RTL behavior
Quick Start Examples
Basic Funnel Chart import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class BasicFunnelChart extends StatelessWidget {
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('Prospects', 500),
ChartData('Qualified', 350),
ChartData('Contacted', 250),
ChartData('Negotiating', 150),
ChartData('Won', 100)
];
return Scaffold(
appBar: AppBar(title: Text('Sales Funnel')),
body: Center(
child: SfFunnelChart(
title: ChartTitle(text: 'Sales Pipeline Analysis'),
legend: Legend(isVisible: true),
series: FunnelSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.stage,
yValueMapper: (ChartData data, _) => data.value,
dataLabelSettings: DataLabelSettings(isVisible: true)
)
)
)
);
}
}
class ChartData {
ChartData(this.stage, this.value);
final String stage;
final double value;
}
Funnel Chart with Customization import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class CustomFunnelChart extends StatelessWidget {
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('Awareness', 1000, Colors.blue),
ChartData('Interest', 750, Colors.green),
ChartData('Consideration', 500, Colors.orange),
ChartData('Intent', 300, Colors.purple),
ChartData('Purchase', 150, Colors.red)
];
return Scaffold(
appBar: AppBar(title: Text('Marketing Funnel')),
body: Center(
child: SfFunnelChart(
title: ChartTitle(
text: 'Customer Journey Analysis',
textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
),
legend: Legend(
isVisible: true,
position: LegendPosition.bottom
),
tooltipBehavior: TooltipBehavior(enable: true),
series: FunnelSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.stage,
yValueMapper: (ChartData data, _) => data.value,
pointColorMapper: (ChartData data, _) => data.color,
// Customize funnel appearance
height: '80%',
width: '80%',
neckHeight: '20%',
neckWidth: '15%',
gapRatio: 0.1,
explode: true,
explodeIndex: 4,
explodeOffset: '10%',
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.inside,
textStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
)
)
)
)
)
);
}
}
class ChartData {
ChartData(this.stage, this.value, this.color);
final String stage;
final double value;
final Color color;
}
Funnel Chart with Tooltip and Selection import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class InteractiveFunnelChart extends StatefulWidget {
@override
_InteractiveFunnelChartState createState() => _InteractiveFunnelChartState();
}
class _InteractiveFunnelChartState extends State<InteractiveFunnelChart> {
late TooltipBehavior _tooltipBehavior;
late SelectionBehavior _selectionBehavior;
@override
void initState() {
_tooltipBehavior = TooltipBehavior(
enable: true,
format: 'point.x: point.y leads',
color: Colors.black87,
textStyle: TextStyle(color: Colors.white)
);
_selectionBehavior = SelectionBehavior(
enable: true,
selectedColor: Colors.deepOrange,
unselectedColor: Colors.grey[300]
);
super.initState();
}
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('Visitors', 5000),
ChartData('Sign-ups', 3500),
ChartData('Active Users', 2000),
ChartData('Premium Users', 800),
ChartData('Renewals', 500)
];
return Scaffold(
appBar: AppBar(title: Text('Subscription Funnel')),
body: Center(
child: SfFunnelChart(
title: ChartTitle(text: 'User Conversion Funnel'),
legend: Legend(isVisible: true),
tooltipBehavior: _tooltipBehavior,
series: FunnelSeries<ChartData, String>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.stage,
yValueMapper: (ChartData data, _) => data.count,
selectionBehavior: _selectionBehavior,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.outside
)
)
)
)
);
}
}
class ChartData {
ChartData(this.stage, this.count);
final String stage;
final double count;
}
Common Patterns
Quick Pattern Overview
Sales Pipeline Funnel - Basic funnel for sales stages with clear progressionMarketing Conversion with Colors - Color-coded stages with visual hierarchyExploded Segment Emphasis - Highlight critical stages with exploded segmentsCustom Neck Sizing - Adjust neck dimensions for different visual effectsDynamic Updates - Real-time data updates using FunnelSeriesController Each pattern includes complete code examples, when to use them, and best practices. See the common patterns reference for full implementations.
Key Properties
SfFunnelChart Essential Properties
series - FunnelSeries configuration with data sourcetitle - Chart title (ChartTitle)legend - Legend configuration (Legend)tooltipBehavior - Tooltip settings (TooltipBehavior)palette - Color palette for seriesbackgroundColor - Chart background colorbackgroundImage - Background imageborderColor - Chart border colorborderWidth - Chart border widthmargin - Chart margin (EdgeInsets)enableMultiSelection - Enable multiple segment selectiononSelectionChanged - Selection change callbackonLegendItemRender - Legend item render callbackonTooltipRender - Tooltip render callbackonDataLabelRender - Data label render callbackonLegendTapped - Legend tap callbackonDataLabelTapped - Data label tap callbackonChartTouchInteractionUp/Down/Move - Touch interaction callbacks
FunnelSeries Essential Properties
dataSource - Data source listxValueMapper - Maps x-axis values from datayValueMapper - Maps y-axis values from datapointColorMapper - Maps colors from dataname - Series name for legendheight - Funnel height as percentage (e.g., '80%')width - Funnel width as percentage (e.g., '80%')neckHeight - Neck height as percentage (e.g., '20%')neckWidth - Neck width as percentage (e.g., '15%')gapRatio - Gap between segments (0 to 1)explode - Enable exploding segmentsexplodeIndex - Index of segment to explodeexplodeOffset - Explode distance as percentageopacity - Series opacity (0 to 1)borderWidth - Segment border widthborderColor - Segment border colordataLabelSettings - Data label configurationselectionBehavior - Selection behavior settingsenableTooltip - Enable tooltip for seriesanimationDuration - Animation duration in millisecondsanimationDelay - Animation delay in millisecondsemptyPointSettings - Empty point handlinginitialSelectedDataIndexes - Initial selection indicesonPointTap - Point tap callbackonPointDoubleTap - Point double tap callbackonPointLongPress - Point long press callbackonRendererCreated - Renderer created callback
DataLabelSettings Properties
isVisible - Show/hide data labelslabelPosition - Position (inside/outside)labelAlignment - Alignment (outer, auto, top, bottom, middle)textStyle - Text stylingcolor - Label background colorborderColor - Label border colorborderWidth - Label border widthborderRadius - Label corner radiusmargin - Label marginopacity - Label opacityangle - Label rotation angleuseSeriesColor - Use series color for label backgroundshowZeroValue - Show labels for zero valuesoverflowMode - Overflow handling (none, trim, hide, shift)
Legend Properties
isVisible - Show/hide legendposition - Position (auto, top, bottom, left, right)orientation - Orientation (auto, horizontal, vertical)title - Legend title (LegendTitle)overflowMode - Overflow mode (scroll, wrap)toggleSeriesVisibility - Enable toggling series visibilitybackgroundColor - Legend background colorborderColor - Legend border colorborderWidth - Legend border widthopacity - Legend opacitypadding - Legend paddingiconHeight - Legend icon heighticonWidth - Legend icon widthoffset - Floating legend offset
TooltipBehavior Properties
enable - Enable tooltipcolor - Tooltip background colorborderColor - Tooltip border colorborderWidth - Tooltip border widthopacity - Tooltip opacityduration - Display duration in millisecondsanimationDuration - Animation durationelevation - Tooltip elevation/shadowformat - Tooltip text formatheader - Tooltip header texttooltipPosition - Position (auto, pointer)activationMode - Activation mode (tap, doubleTap, longPress, none)builder - Custom tooltip builder
SelectionBehavior Properties
enable - Enable selectionselectedColor - Selected segment colorunselectedColor - Unselected segment colorselectedBorderColor - Selected segment border colorselectedBorderWidth - Selected segment border widthunselectedBorderColor - Unselected segment border colorunselectedBorderWidth - Unselected segment border widthselectedOpacity - Selected segment opacityunselectedOpacity - Unselected segment opacitytoggleSelection - Enable toggle selection
Common Use Cases
Sales Pipeline - Track deals through sales stages (leads → closed won)Marketing Funnel - Visualize customer journey (awareness → purchase)Conversion Analysis - Show user conversion rates across process stagesRecruitment Process - Display candidate progression through hiring stagesE-commerce Funnel - Track shopping cart abandonment and checkout flowLead Management - Monitor lead qualification and conversion processSubscription Funnel - Analyze user onboarding and subscription flowWeb Analytics - Display visitor engagement and conversion metricsProcess Efficiency - Visualize workflow bottlenecks and drop-off pointsCustomer Journey - Map customer touchpoints from awareness to loyalty More from this repository syncfusion-flutter-barcode-generator Implements Syncfusion Flutter Barcode Generator (SfBarcodeGenerator) for generating 1D and 2D barcodes in Flutter apps. Use when working with QR codes, Data Matrix, Code128, EAN, UPC, or other machine-readable barcode formats. This skill covers barcode types, customization, sizing, text display, and integration into product labels, ticketing, or inventory systems.
syncfusion-flutter-calendar-datepicker Implements Syncfusion Flutter Calendar (SfCalendar) and Date Range Picker (SfDateRangePicker) widgets for date and scheduling UIs in Flutter apps. Use when building appointment calendars, booking systems, date range selectors, or event scheduling interfaces. This skill covers calendar views, recurring events, date navigation, localization, callbacks, and customization.
syncfusion-flutter-cartesian-charts Implements Syncfusion Flutter Cartesian Charts (SfCartesianChart) for a wide range of 2D chart types in Flutter apps. Use when working with line, column, bar, area, spline, scatter, bubble, financial, stacked, or histogram charts. This skill covers axis types (NumericAxis, CategoryAxis, DateTimeAxis), zoom and pan, tooltip, trackball, legend, annotations, technical indicators, trendlines, and chart export.
Related occupations SOC
Based on SOC occupation classification
