Skip to main content Home Creators syncfusion react-ui-components-skills syncfusion-react-3d-chart
syncfusion-react-3d-chart Implement Syncfusion React 3D Chart component from the @syncfusion/ej2-react-charts package. Use this skill when users need 3D column, bar, stacked column, stacked bar, or 100% stacked chart variations. Covers Chart3DComponent, axis configuration (category, numeric, datetime, logarithmic), data binding, multiple panes, data labels, legends, tooltips, selection, print/export, theming, and accessibility.
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/react-ui-components-skills --skill syncfusion-react-3d-chartThe 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... More from this repository syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-breadcrumb Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-react-3d-chart description Implement Syncfusion React 3D Chart component from the @syncfusion/ej2-react-charts package. Use this skill when users need 3D column, bar, stacked column, stacked bar, or 100% stacked chart variations. Covers Chart3DComponent, axis configuration (category, numeric, datetime, logarithmic), data binding, multiple panes, data labels, legends, tooltips, selection, print/export, theming, and accessibility. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Syncfusion React 3D Chart
A comprehensive skill for implementing and customizing Syncfusion's 3D Chart component in React applications. This skill helps you create interactive 3D visualizations with column, bar, and stacked chart types.
When to Use This Skill
Use this skill when you need to:
Implement Syncfusion 3D charts in React applications
Create column, bar, or stacked 3D charts
Configure category, numeric, datetime, or logarithmic axes
Bind and manage chart data sources
Customize 3D chart appearance (rotation, depth, walls)
Add data labels, legends, or tooltips to 3D charts
Implement chart selection and interaction
Export or print 3D charts
Support accessibility in 3D visualizations
Troubleshoot 3D chart rendering or performance issues
Component Overview
Package: @syncfusion/ej2-react-charts
Main Components:
Chart3DComponent - Root 3D chart containerChart3DSeriesCollectionDirective - Series collection wrapper
Chart3DSeriesDirective - Individual series configuration
Chart3DAxesDirective - Multiple axes configurationChart Types: Column, Bar, Stacked Column, Stacked Bar, 100% Stacked Column, 100% Stacked Bar
Axis Types: Category, Numeric, DateTime, Logarithmic
Documentation and Navigation Guide
API Reference
Concise list of public props, methods, events, child directives, and a usage snippet. Use this as the canonical in-repo API summary.
Getting Started
Installing @syncfusion/ej2-react-charts package
Setting up dependencies and CSS themes
Creating your first 3D chart
Basic Chart3DComponent usage
TypeScript configuration
Chart Types
Column chart (vertical 3D bars)
Bar chart (horizontal 3D bars)
Stacked Column chart
Stacked Bar chart
100% Stacked Column chart
100% Stacked Bar chart
When to use each chart type
Series type configuration
Working with Data
Data binding approaches
Data source structure requirements
Series configuration (xName, yName)
Multiple series handling
Dynamic data updates
Empty points handling
Category Axis
Category axis configuration
Label formatting and placement
Category grouping
Interval settings
Use cases for categorical data
Numeric Axis
Numeric axis setup
Range configuration (minimum, maximum)
Interval and step size
Label formatting (decimals, currency)
Starting from zero vs auto-range
DateTime Axis
DateTime axis configuration
Date format options
Interval types (days, months, years)
Date range settings
Skeleton formats
Timezone considerations
Logarithmic Axis
Logarithmic scale overview
Base configuration (log10, log2, etc.)
Use cases for exponential data
Label formatting for log scales
Range and interval settings
Axis Customization
Axis titles and labels
Multiple axes (secondary Y-axis)
Axis line styling
Grid lines configuration
Tick marks customization
Label rotation and formatting
Axis crossing values
Inversed axis
Multiple Panes
Multiple pane overview
Row configuration and distribution
Pane height settings
Series assignment to different panes
Axis binding per pane
Use cases for multi-metric comparison
Data Labels, Legend, and Tooltip
Data labels configuration and positioning
Label templates and formatting
Legend position and customization
Legend toggle visibility
Tooltip enabling and formatting
Custom tooltip templates
Shared tooltips
Selection and Interaction
Selection modes (Point, Series, Cluster)
Single and multi-selection
Selection events and handlers
Highlight on hover
Selection styling
Interactive features
Print and Export
Print functionality
Export as PNG, JPEG, SVG
Export as PDF
Export configuration options
File naming conventions
Export events
Appearance and Theming
Built-in themes (Material, Bootstrap, Fluent, Tailwind)
Custom theme creation
Color palettes
3D rotation and tilt angles
3D depth configuration
Wall customization
Chart background and borders
Animation settings
Accessibility
WCAG 2.1 compliance
Keyboard navigation support
ARIA attributes
Screen reader compatibility
High contrast mode
Focus management
Accessible color schemes
Quick Start Example import * as React from 'react' ;
import * as ReactDOM from 'react-dom' ;
import {
Chart3DComponent ,
Chart3DSeriesCollectionDirective ,
Chart3DSeriesDirective ,
Inject ,
Category3D ,
ColumnSeries3D ,
Legend3D ,
DataLabel3D ,
Tooltip3D
} from '@syncfusion/ej2-react-charts' ;
function SalesChart (const data = [
{ month : 'Jan' , sales : 35 },
{ month : 'Feb' , sales : 28 },
{ month : 'Mar' , sales : 34 },
{ month : 'Apr' , sales : 32 },
{ month : 'May' , sales : 40 }
];
return (
<Chart3DComponent
id ='chart'
title ='Monthly Sales'
primaryXAxis ={{ valueType: 'Category ' }}
primaryYAxis ={{ title: 'Sales (K )' }}
enableRotation ={true}
rotation ={7}
tilt ={10}
depth ={100}
>
<Inject services ={[ColumnSeries3D, Category3D , Legend3D , DataLabel3D , Tooltip3D ]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data}
xName ='month'
yName ='sales'
type ='Column'
name ='Sales'
/>
</Chart3DSeriesCollectionDirective >
</Chart3DComponent > export default SalesChart ;
ReactDOM .render (<SalesChart /> document .getElementById ('charts' ));
Common Patterns
Basic Column Chart <Chart3DComponent primaryXAxis={{ valueType : 'Category' }}>
<Inject services ={[ColumnSeries3D, Category3D ]} /> <Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data}
xName ='category'
yName ='value'
type ='Column'
/>
</Chart3DSeriesCollectionDirective > Chart3DComponent >
Stacked Column Chart <Chart3DComponent primaryXAxis={{ valueType : 'Category' }}>
<Inject services ={[StackingColumnSeries3D, Category3D ]} /> <Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data1}
xName ='x'
yName ='y'
type ='StackingColumn'
name ='Product A'
/>
<Chart3DSeriesDirective
dataSource ={data2}
xName ='x'
yName ='y'
type ='StackingColumn'
name ='Product B'
/>
</Chart3DSeriesCollectionDirective > Chart3DComponent >
Bar Chart (Horizontal) <Chart3DComponent primaryXAxis={{ valueType : 'Category' }}>
<Inject services ={[BarSeries3D, Category3D ]} /> <Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data}
xName ='category'
yName ='value'
type ='Bar'
/>
</Chart3DSeriesCollectionDirective > Chart3DComponent >
With Data Labels and Legend <Chart3DComponent
primaryXAxis={{ valueType : 'Category' }}
legendSettings={{ visible : true }}
>
<Inject services ={[ColumnSeries3D, Category3D , Legend3D , DataLabel3D ]} /> <Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data}
xName ='x'
yName ='y'
type ='Column'
name ='Sales'
dataLabel ={{ visible: true }}
/>
</Chart3DSeriesCollectionDirective > Chart3DComponent >
Custom 3D Rotation <Chart3DComponent
primaryXAxis={{ valueType : 'Category' }}
enableRotation={true }
rotation={15 }
tilt={5 }
depth={120 }
wallColor='transparent'
wallSize={1 }
>
<Inject services ={[ColumnSeries3D, Category3D ]} /> <Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data}
xName ='x'
yName ='y'
type ='Column'
/>
</Chart3DSeriesCollectionDirective > Chart3DComponent >
Multiple Series with Different Colors <Chart3DComponent
primaryXAxis={{ valueType : 'Category' }}
palettes={['#E94649' , '#F6B53F' , '#6FAAB0' ]}
>
<Inject services ={[ColumnSeries3D, Category3D , Legend3D ]} /> <Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective
dataSource ={data1}
xName ='x'
yName ='y'
type ='Column'
name ='Product A'
/>
<Chart3DSeriesDirective
dataSource ={data2}
xName ='x'
yName ='y'
type ='Column'
name ='Product B'
/>
<Chart3DSeriesDirective
dataSource ={data3}
xName ='x'
yName ='y'
type ='Column'
name ='Product C'
/>
</Chart3DSeriesCollectionDirective > Chart3DComponent >
Key Props Reference
Chart3DComponent Props Prop Type Description primaryXAxisObject Configuration for X-axis (type, title, labels) primaryYAxisObject Configuration for Y-axis (range, title, format) rotationnumber Horizontal rotation angle (0-360) tiltnumber Vertical tilt angle (0-90) depthnumber Depth of 3D chart (0-100) enableRotationboolean Enable mouse rotation interaction wallColorstring Color of 3D walls wallSizenumber Thickness of wall borders titlestring Chart title text legendSettingsObject Legend configuration tooltipObject Tooltip settings palettesstring[] Array of colors for series
Chart3DSeriesDirective Props Prop Type Description dataSourceany[] Array of data points xNamestring Property name for X-axis values yNamestring Property name for Y-axis values typestring Chart type: 'Column', 'Bar', 'StackingColumn', 'StackingBar', 'StackingColumn100', 'StackingBar100' namestring Series name (shown in legend) dataLabelObject Data label configuration fillstring Series color opacitynumber Series opacity (0-1)
Common Use Cases
Sales Comparison : Column charts comparing monthly/quarterly sales across productsSurvey Results : Bar charts showing survey responses or rankingsMarket Share : Stacked column charts displaying market distributionTime Series : DateTime axis for temporal data visualizationFinancial Data : Logarithmic axis for stock prices or exponential growthMulti-Metric Dashboards : Multiple panes showing different KPIsPerformance Tracking : Stacked 100% charts showing percentage contributionsCategory Analysis : Category axis for discrete data groupingInteractive Reports : Selection and export for user-driven explorationAccessible Visualizations : WCAG-compliant charts for all users
TypeScript Support All components are fully typed. Import types as needed:
import {
Chart3DComponent ,
IChart3DLoadedEventArgs ,
IChart3DPointRenderEventArgs ,
Chart3DModel
} from '@syncfusion/ej2-react-charts' ;
Troubleshooting Quick Reference
Verify @syncfusion/ej2-react-charts is installed
Check CSS theme imports
Ensure required services are injected
Verify xName/yName match data property names
Check axis valueType matches data type
Validate data source structure
Reduce data point count (aggregate if needed)
Disable animations
Optimize data structure
Set enableRotation={true}
Configure rotation, tilt, and depth props
Check if series type supports 3D
For detailed troubleshooting, refer to the specific reference files above.
