Skip to main content Accueil Créateurs syncfusion javascript-ui-controls-skills syncfusion-javascript-accumulation-chart
syncfusion-javascript-accumulation-chart Implements Syncfusion JavaScript accumulation charts (Pie, Doughnut, Funnel, Pyramid) for proportional and percentage-based visualizations. Use when displaying categorical or proportional data. Covers legend and label configuration, interactivity, accessibility, and customization. Works with TypeScript (modules) and JavaScript (CDN/ES5).
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-accumulation-chartLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... syncfusion-javascript-data-manager Implements Syncfusion TypeScript/JavaScript(ES6+) DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
syncfusion-javascript-grid Implements Syncfusion JavaScript Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-javascript-diagram Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
Métiers associés SOC
Basé sur la classification professionnelle SOC
Explorateur de fichiers
10 fichiers name syncfusion-javascript-accumulation-chart description Implements Syncfusion JavaScript accumulation charts (Pie, Doughnut, Funnel, Pyramid) for proportional and percentage-based visualizations. Use when displaying categorical or proportional data. Covers legend and label configuration, interactivity, accessibility, and customization. Works with TypeScript (modules) and JavaScript (CDN/ES5). metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Accumulation Charts in Syncfusion TypeScript & JavaScript
The Syncfusion Accumulation Chart component provides powerful visualization tools for creating interactive pie charts, doughnut charts, funnel charts, and pyramid charts. With advanced customization options, interactive features, multiple chart types, and comprehensive data handling capabilities, you can create professional percentage-based and categorical visualizations for any use case. Works in both TypeScript (with full type safety) and JavaScript (ES5 CDN-based or webpack).
Platform Support
This skill covers both TypeScript and JavaScript implementations:
TypeScript (Primary):
Full type definitions and IDE support
Module-based imports with AccumulationChart.Inject()
Webpack/bundler-based setup
Advanced type checking
JavaScript (ES5):
CDN-based or local script loading
Global namespace access (ej.charts.AccumulationChart)
No build step required
Compatible with ES5 and modern browsers
Where noted , code examples show both TS and JS variants. Choose based on your project setup.
When to Use This Skill Use this skill when you need to:
Create pie charts - Basic pie chart with data points and seriesBuild doughnut charts - Pie chart with inner radius (donut hole)Implement funnel charts - Funnel-shaped data visualizationDesign pyramid charts - Pyramid-shaped hierarchical visualizationConfigure chart types - Switch between Pie, Doughnut, Funnel, PyramidCustomize legends - Position, align, and style legend elementsAdd data labels - Configure label positioning and contentEnable tooltips - Interactive hover informationImplement selection - Point and series selection modesAdd annotations - Custom annotations and markersApply styling - Colors, gradients, themes, and responsive designEnsure accessibility - WCAG compliance, keyboard navigation, screen reader supportExport charts - PNG, SVG, PDF, or print functionalityHandle dynamic data - Real-time data updates and animations
Accumulation Chart Overview Accumulation charts visualize data as proportions of a whole, ideal for:
Pie Charts - Show percentage distribution of categoriesDoughnut Charts - Pie variant with center label capabilityFunnel Charts - Funnel-shaped representations (stages, conversion funnels)Pyramid Charts - Pyramid-shaped hierarchical data visualization All types support interactive features, custom styling, multiple series, and rich configuration options.
Navigation Guide Choose the reference that matches your task:
Getting Started
Installation and setup for TypeScript and JavaScript
Dependencies and package configuration
Creating your first accumulation chart
Basic pie chart implementation
Module injection and initialization patterns
Chart Types & Selection
Pie chart fundamentals and implementation
Doughnut charts with inner radius and center labels
Funnel charts and data arrangement
Pyramid charts and reverse mode
Radius and size customization for each type
Comparison matrix: when to use each type
Legend Configuration
Legend positioning (left, right, top, bottom)
Alignment options (center, near, far)
Legend styling and customization
Visibility and interactive legend features
Responsive legend behavior
Data Labels
Enabling and configuring data labels
Label positioning (inside, outside)
Smart label arrangement and overlap prevention
Label formatting and templates
Dynamic label visibility
Tooltips & Selection
Tooltip configuration and styling
Custom tooltip templates
Point selection modes (Single, Multiple, None)
Series selection capabilities
Event handling for interactions
Annotations & Features
Adding annotations to charts
Gradient fills and custom colors
Center labels for doughnut charts
Grouping and clubbing data points
Empty point handling and visibility
Customization & Styling
CSS class customization and styling
Theme options (Material, Bootstrap, Fabric, etc.)
Responsive sizing and dimensions
Print and export functionality
Title and subtitle configuration
Accessibility & Advanced Features
WCAG compliance and accessibility standards
Keyboard navigation and focus management
Screen reader support and ARIA attributes
Dynamic data updates and animations
Real-time chart updates
Performance optimization for large datasets
Troubleshooting common issues
API Reference
Complete AccumulationChart API reference
All properties, methods, and events
Interface and model definitions
Module injection and enums
Comprehensive API tables with links to official documentation
Quick Start Example import { AccumulationChart , AccumulationDataLabel , AccumulationLegend , AccumulationTooltip } from '@syncfusion/ej2-charts' ;
AccumulationChart .Inject ( AccumulationDataLabel , AccumulationLegend , AccumulationTooltip );
const data = [
{ x : 'Jan' , y : 18 , text : 'January' },
{ x : 'Feb' , y : 18 , text : 'February' },
{ x : 'Mar' , y : 18 , text : 'March' },
{ x : 'Apr' , y : 20 , text : 'April' }
];
const chart = new AccumulationChart ({
series : [{
dataSource : data,
xName : 'x' ,
yName : 'y' ,
type : 'Pie'
}],
tooltip : { enable : true },
legendSettings : { visible : true }
}, '#chart' );
Common Patterns
Pattern 1: Basic Pie Chart with Legend Standard pie chart showing data distribution with legend for category identification:
const chart = new AccumulationChart ({
series : [{
dataSource : data,
xName : 'x' ,
yName : 'y' ,
type : 'Pie'
}],
legendSettings : { visible : true , position : 'Right' }
}, '#chart' );
Pattern 2: Doughnut Chart with Center Label Doughnut chart with center text for additional information:
const chart = new AccumulationChart ({
series : [{
dataSource : data,
xName : 'x' ,
yName : 'y' ,
innerRadius : '40%'
}],
centerLabel : { text : 'Sales' , hoverTextFormat : '${point.x}: ${point.y}%' }
}, '#chart' );
Pattern 3: Funnel Chart with Custom Colors Funnel visualization showing progression through stages:
Note Import and Inject FunnelSeries.
const chart = new AccumulationChart ({
series : [{
dataSource : stageData,
xName : 'stage' ,
yName : 'users' ,
type : 'Funnel' ,
neckWidth : '15%'
}]
}, '#chart' );
Pattern 4: Pyramid Chart Reversed Note Import and Inject PyramidSeries.
const chart = new AccumulationChart ({
series : [{
dataSource : data,
xName : 'x' ,
yName : 'y' ,
type : 'Pyramid' ,
pyramidMode : 'Linear' ,
}]
}, '#chart' );
Pattern 5: Interactive Selection with Tooltip Point selection with detailed tooltips:
Note Import and Inject AccumulationTooltip and AccumulationSelection.
const chart = new AccumulationChart ({
series : [{
dataSource : data,
xName : 'x' ,
yName : 'y' ,
type : 'Pie' ,
dataLabel : {
visible : true ,
position : 'Outside' ,
name : 'text'
}
}],
selectionMode : 'Point' ,
tooltip : {
enable : true ,
format : '${point.x}: <b>${point.y}%</b>'
}
}, '#chart' );
Key Properties For detailed information on all properties, methods, and events, see API Reference .
series - Array of series configurations | API height, width - Chart dimensions | API title - Chart title text | API tooltip - Tooltip configuration | API legendSettings - Legend positioning and styling | API background - Chart background color/image | API centerLabel - Center label for doughnut (TS & JS) | API
dataSource - Array of data points | API xName, yName - Data field mapping | API type - Chart type: 'Pie', 'Doughnut', 'Funnel', 'Pyramid'radius - Chart radius (percentage or pixel)innerRadius - Inner radius for doughnut chartsneckWidth - Funnel neck widthgapRatio - Space between pyramid segmentsexplode - Point explosion (separation)dataLabel - Data label configuration | API marker - Point marker styling
selectionMode - 'Point', 'Series', or 'None' | API selectionPattern - Chessboard, Dots, DiagonalForward, etc. | API highlightPattern - Highlight pattern on hover | API highlightMode - 'Point', 'Series', or 'None' | API
palette - Color scheme arraytheme - Material, Bootstrap, Fabric, HighContrast, Fluent | API enableSmartLabels - Smart label positioning | API enableAnimation - Animation on load | API animationDuration - Animation duration in milliseconds
accessibility - Accessibility configuration object | API tabIndex - Tab index for keyboard navigationariaLabel - ARIA label for screen readers 