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…

+ (args.value / 1000).toFixed(1) + 'K';\n }}\n>\n {/* Series */}\n\u003c/Chart3DComponent>\n```\n\n## Performance Optimization\n\n### Large Datasets\n\nFor datasets with 100+ points:\n\n```tsx\nfunction LargeDataChart() {\n const data = generateLargeDataset(500); // 500 points\n\n return (\n \u003cChart3DComponent\n id='large-chart'\n primaryXAxis={{ valueType: 'Category' }}\n enableAnimation={false} // Disable for better performance\n >\n \u003cInject services={[ColumnSeries3D, Category3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data}\n xName='x'\n yName='y'\n type='Column'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n \u003c/Chart3DComponent>\n );\n}\n\nfunction generateLargeDataset(count) {\n return Array.from({ length: count }, (_, i) => ({\n x: `Item${i}`,\n y: Math.floor(Math.random() * 100)\n }));\n}\n```\n\n**Optimization tips:**\n- Disable animations for >200 points\n- Use memoization for data transformations\n- Implement pagination or data windowing\n- Consider data aggregation for very large datasets\n\n### Memoizing Data\n\n```tsx\nimport { useMemo } from 'react';\n\nfunction OptimizedChart({ rawData }) {\n const processedData = useMemo(() => {\n return rawData.map(item => ({\n category: item.name,\n value: item.amount * 1000\n }));\n }, [rawData]);\n\n return (\n \u003cChart3DComponent id='chart' primaryXAxis={{ valueType: 'Category' }}>\n \u003cInject services={[ColumnSeries3D, Category3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={processedData}\n xName='category'\n yName='value'\n type='Column'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n \u003c/Chart3DComponent>\n );\n}\n```\n\n## Common Data Issues\n\n**Issue: Chart shows no data**\n- Verify `xName` and `yName` match property names exactly (case-sensitive)\n- Check dataSource is not empty, null, or undefined\n- Ensure numeric values are numbers, not strings\n\n**Issue: Categories not appearing**\n- Set `primaryXAxis.valueType = 'Category'` for string categories\n- Verify `xName` points to string property\n\n**Issue: Data updates not reflecting**\n- Create new array reference: `setData([...newData])` instead of mutating\n- Ensure state is properly updated before re-render\n\n---\n\nSee also: [api-reference.md](api-reference.md) | [usage-example.md](usage-example.md)\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":10998,"content_sha256":"2086fbec4408791356632afd444c4d293b0122ef43db9c317b2f8a1545f77265"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Syncfusion React 3D Chart","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use This Skill","type":"text"}]},{"type":"paragraph","content":[{"text":"Use this skill when you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement Syncfusion 3D charts in React applications","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create column, bar, or stacked 3D charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure category, numeric, datetime, or logarithmic axes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bind and manage chart data sources","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customize 3D chart appearance (rotation, depth, walls)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add data labels, legends, or tooltips to 3D charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement chart selection and interaction","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export or print 3D charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Support accessibility in 3D visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Troubleshoot 3D chart rendering or performance issues","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Package:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"@syncfusion/ej2-react-charts","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"paragraph","content":[{"text":"Main Components:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart3DComponent","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Root 3D chart container","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart3DSeriesCollectionDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Series collection wrapper","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart3DSeriesDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Individual series configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart3DAxesDirective","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Multiple axes configuration","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Chart Types:","type":"text","marks":[{"type":"strong"}]},{"text":" Column, Bar, Stacked Column, Stacked Bar, 100% Stacked Column, 100% Stacked Bar","type":"text"}]},{"type":"paragraph","content":[{"text":"Axis Types:","type":"text","marks":[{"type":"strong"}]},{"text":" Category, Numeric, DateTime, Logarithmic","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation and Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"API Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api-reference.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-reference.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Concise list of public props, methods, events, child directives, and a usage snippet. Use this as the canonical in-repo API summary.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Installing @syncfusion/ej2-react-charts package","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Setting up dependencies and CSS themes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating your first 3D chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Basic Chart3DComponent usage","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"TypeScript configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart Types","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/chart-types.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/chart-types.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Column chart (vertical 3D bars)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bar chart (horizontal 3D bars)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Stacked Column chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Stacked Bar chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"100% Stacked Column chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"100% Stacked Bar chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"When to use each chart type","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Series type configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Working with Data","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/working-with-data.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/working-with-data.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data binding approaches","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data source structure requirements","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Series configuration (xName, yName)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple series handling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Dynamic data updates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Empty points handling","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Category Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/category-axis.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/category-axis.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Category axis configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label formatting and placement","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Category grouping","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interval settings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use cases for categorical data","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Numeric Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/numeric-axis.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/numeric-axis.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Numeric axis setup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range configuration (minimum, maximum)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interval and step size","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label formatting (decimals, currency)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Starting from zero vs auto-range","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"DateTime Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/datetime-axis.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/datetime-axis.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DateTime axis configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Date format options","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interval types (days, months, years)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Date range settings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Skeleton formats","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Timezone considerations","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Logarithmic Axis","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/logarithmic-axis.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/logarithmic-axis.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Logarithmic scale overview","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Base configuration (log10, log2, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use cases for exponential data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label formatting for log scales","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Range and interval settings","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Axis Customization","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/axis-customization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/axis-customization.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis titles and labels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple axes (secondary Y-axis)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis line styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Grid lines configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tick marks customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label rotation and formatting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis crossing values","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Inversed axis","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multiple Panes","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/multiple-panes.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/multiple-panes.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple pane overview","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Row configuration and distribution","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Pane height settings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Series assignment to different panes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Axis binding per pane","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use cases for multi-metric comparison","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Data Labels, Legend, and Tooltip","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/data-labels-legend-tooltip.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/data-labels-legend-tooltip.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data labels configuration and positioning","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Label templates and formatting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend position and customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legend toggle visibility","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tooltip enabling and formatting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom tooltip templates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Shared tooltips","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Selection and Interaction","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/selection-interaction.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/selection-interaction.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Selection modes (Point, Series, Cluster)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Single and multi-selection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Selection events and handlers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Highlight on hover","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Selection styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive features","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Print and Export","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/print-export.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/print-export.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Print functionality","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export as PNG, JPEG, SVG","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export as PDF","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export configuration options","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"File naming conventions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export events","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Appearance and Theming","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Built-in themes (Material, Bootstrap, Fluent, Tailwind)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom theme creation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Color palettes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"3D rotation and tilt angles","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"3D depth configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Wall customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart background and borders","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Animation settings","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessibility","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"WCAG 2.1 compliance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard navigation support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ARIA attributes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Screen reader compatibility","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"High contrast mode","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Focus management","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessible color schemes","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start Example","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { \n Chart3DComponent, \n Chart3DSeriesCollectionDirective, \n Chart3DSeriesDirective,\n Inject,\n Category3D,\n ColumnSeries3D,\n Legend3D,\n DataLabel3D,\n Tooltip3D\n} from '@syncfusion/ej2-react-charts';\n\nfunction SalesChart() {\n const data = [\n { month: 'Jan', sales: 35 },\n { month: 'Feb', sales: 28 },\n { month: 'Mar', sales: 34 },\n { month: 'Apr', sales: 32 },\n { month: 'May', sales: 40 }\n ];\n\n return (\n \u003cChart3DComponent\n id='chart'\n title='Monthly Sales'\n primaryXAxis={{ valueType: 'Category' }}\n primaryYAxis={{ title: 'Sales (K)' }}\n enableRotation={true}\n rotation={7}\n tilt={10}\n depth={100}\n >\n \u003cInject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D, Tooltip3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data}\n xName='month'\n yName='sales'\n type='Column'\n name='Sales'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n \u003c/Chart3DComponent>\n );\n}\n\nexport default SalesChart;\nReactDOM.render(\u003cSalesChart />, document.getElementById('charts'));","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Column Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cChart3DComponent primaryXAxis={{ valueType: 'Category' }}>\n \u003cInject services={[ColumnSeries3D, Category3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data}\n xName='category'\n yName='value'\n type='Column'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n\u003c/Chart3DComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Stacked Column Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cChart3DComponent primaryXAxis={{ valueType: 'Category' }}>\n \u003cInject services={[StackingColumnSeries3D, Category3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data1}\n xName='x'\n yName='y'\n type='StackingColumn'\n name='Product A'\n />\n \u003cChart3DSeriesDirective\n dataSource={data2}\n xName='x'\n yName='y'\n type='StackingColumn'\n name='Product B'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n\u003c/Chart3DComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Bar Chart (Horizontal)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cChart3DComponent primaryXAxis={{ valueType: 'Category' }}>\n \u003cInject services={[BarSeries3D, Category3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data}\n xName='category'\n yName='value'\n type='Bar'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n\u003c/Chart3DComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"With Data Labels and Legend","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cChart3DComponent\n primaryXAxis={{ valueType: 'Category' }}\n legendSettings={{ visible: true }}\n>\n \u003cInject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data}\n xName='x'\n yName='y'\n type='Column'\n name='Sales'\n dataLabel={{ visible: true }}\n />\n \u003c/Chart3DSeriesCollectionDirective>\n\u003c/Chart3DComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Custom 3D Rotation","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cChart3DComponent\n primaryXAxis={{ valueType: 'Category' }}\n enableRotation={true}\n rotation={15}\n tilt={5}\n depth={120}\n wallColor='transparent'\n wallSize={1}\n>\n \u003cInject services={[ColumnSeries3D, Category3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data}\n xName='x'\n yName='y'\n type='Column'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n\u003c/Chart3DComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multiple Series with Different Colors","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cChart3DComponent\n primaryXAxis={{ valueType: 'Category' }}\n palettes={['#E94649', '#F6B53F', '#6FAAB0']}\n>\n \u003cInject services={[ColumnSeries3D, Category3D, Legend3D]} />\n \u003cChart3DSeriesCollectionDirective>\n \u003cChart3DSeriesDirective\n dataSource={data1}\n xName='x'\n yName='y'\n type='Column'\n name='Product A'\n />\n \u003cChart3DSeriesDirective\n dataSource={data2}\n xName='x'\n yName='y'\n type='Column'\n name='Product B'\n />\n \u003cChart3DSeriesDirective\n dataSource={data3}\n xName='x'\n yName='y'\n type='Column'\n name='Product C'\n />\n \u003c/Chart3DSeriesCollectionDirective>\n\u003c/Chart3DComponent>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Props Reference","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart3DComponent Props","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Prop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"primaryXAxis","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configuration for X-axis (type, title, labels)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"primaryYAxis","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configuration for Y-axis (range, title, format)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"rotation","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Horizontal rotation angle (0-360)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"tilt","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Vertical tilt angle (0-90)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"depth","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Depth of 3D chart (0-100)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enableRotation","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Enable mouse rotation interaction","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"wallColor","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Color of 3D walls","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"wallSize","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Thickness of wall borders","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart title text","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"legendSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Legend configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Tooltip settings","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"palettes","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string[]","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array of colors for series","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart3DSeriesDirective Props","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Prop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"any[]","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array of data points","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"xName","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Property name for X-axis values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"yName","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Property name for Y-axis values","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Chart type: 'Column', 'Bar', 'StackingColumn', 'StackingBar', 'StackingColumn100', 'StackingBar100'","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"name","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series name (shown in legend)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"dataLabel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data label configuration","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"fill","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series color","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"opacity","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Series opacity (0-1)","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Sales Comparison","type":"text","marks":[{"type":"strong"}]},{"text":": Column charts comparing monthly/quarterly sales across products","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Survey Results","type":"text","marks":[{"type":"strong"}]},{"text":": Bar charts showing survey responses or rankings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Market Share","type":"text","marks":[{"type":"strong"}]},{"text":": Stacked column charts displaying market distribution","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Time Series","type":"text","marks":[{"type":"strong"}]},{"text":": DateTime axis for temporal data visualization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Financial Data","type":"text","marks":[{"type":"strong"}]},{"text":": Logarithmic axis for stock prices or exponential growth","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multi-Metric Dashboards","type":"text","marks":[{"type":"strong"}]},{"text":": Multiple panes showing different KPIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Performance Tracking","type":"text","marks":[{"type":"strong"}]},{"text":": Stacked 100% charts showing percentage contributions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Category Analysis","type":"text","marks":[{"type":"strong"}]},{"text":": Category axis for discrete data grouping","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive Reports","type":"text","marks":[{"type":"strong"}]},{"text":": Selection and export for user-driven exploration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessible Visualizations","type":"text","marks":[{"type":"strong"}]},{"text":": WCAG-compliant charts for all users","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"TypeScript Support","type":"text"}]},{"type":"paragraph","content":[{"text":"All components are fully typed. Import types as needed:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"import { \n Chart3DComponent,\n IChart3DLoadedEventArgs,\n IChart3DPointRenderEventArgs,\n Chart3DModel\n} from '@syncfusion/ej2-react-charts';","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Troubleshooting Quick Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"Chart not rendering?","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Verify @syncfusion/ej2-react-charts is installed","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check CSS theme imports","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Ensure required services are injected","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Data not showing?","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Verify xName/yName match data property names","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check axis valueType matches data type","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Validate data source structure","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Performance issues?","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Reduce data point count (aggregate if needed)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Disable animations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Optimize data structure","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"3D effect not working?","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Set enableRotation={true}","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure rotation, tilt, and depth props","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check if series type supports 3D","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"For detailed troubleshooting, refer to the specific reference files above.","type":"text"}]}]},"metadata":{"date":"2026-06-05","name":"syncfusion-react-3d-chart","author":"@skillopedia","source":{"stars":3,"repo_name":"react-ui-components-skills","origin_url":"https://github.com/syncfusion/react-ui-components-skills/blob/HEAD/skills/syncfusion-react-3d-chart/SKILL.md","repo_owner":"syncfusion","body_sha256":"80cfa79bf3efe9ae571fad5bd06aad559cdd680ad15e9c652b16f1835a5162a5","cluster_key":"642e655f88248975f5a3bbc1025ea03b1ab9292fc70ee25038b4789a358b3b83","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/react-ui-components-skills/skills/syncfusion-react-3d-chart/SKILL.md","attachments":[{"id":"f50c99f9-2ded-52ae-ba5d-e14b56e82ca2","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/f50c99f9-2ded-52ae-ba5d-e14b56e82ca2/attachment.md","path":"references/api-reference.md","size":5580,"sha256":"1a5aec428df8c9b73a682e83ba2ebfcc8847862fbc7c41b794ac918da4329420","contentType":"text/markdown; charset=utf-8"},{"id":"9670c646-8d3d-53a9-8d87-c4e5cfadd0fc","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/9670c646-8d3d-53a9-8d87-c4e5cfadd0fc/attachment.md","path":"references/axis-customization.md","size":10554,"sha256":"20715774352f3118fde2366d281c2f193c3b7c9ff4f793ea1422dfc9b45efbc4","contentType":"text/markdown; charset=utf-8"},{"id":"e1df413f-d676-52cf-a0ff-d51684bd825f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/e1df413f-d676-52cf-a0ff-d51684bd825f/attachment.md","path":"references/category-axis.md","size":6986,"sha256":"2d2a884ad300d112374af378fb36fbce775e46ee4b9d84f3ccd28417f31dce16","contentType":"text/markdown; charset=utf-8"},{"id":"bd19bd71-91a6-54de-9f85-f8623a0819da","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/bd19bd71-91a6-54de-9f85-f8623a0819da/attachment.md","path":"references/chart-types.md","size":11925,"sha256":"5796924992176f9cbf953a977662b6bc56e98ace697f42d1c291578e7e51ce84","contentType":"text/markdown; charset=utf-8"},{"id":"ecf864a0-07ad-5324-956d-e8c96f42a5d4","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/ecf864a0-07ad-5324-956d-e8c96f42a5d4/attachment.md","path":"references/data-labels-legend-tooltip.md","size":13148,"sha256":"760c5a8474978fb2ba4dd0d8dbf84fc036321dee87f2f30dd74a588f186fc4c4","contentType":"text/markdown; charset=utf-8"},{"id":"a5e5fb65-e8cb-54a7-93a7-edf9aa1edc8b","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a5e5fb65-e8cb-54a7-93a7-edf9aa1edc8b/attachment.md","path":"references/datetime-axis.md","size":10830,"sha256":"f96f460d140d86122bd5b648e1c608efbe828857cb3b32230d407483ac95d932","contentType":"text/markdown; charset=utf-8"},{"id":"a15e561a-8033-5ede-9f88-6a921876442d","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a15e561a-8033-5ede-9f88-6a921876442d/attachment.md","path":"references/getting-started.md","size":6025,"sha256":"281ff3b8aeb3b74fafd12822d7bd02c25debf381fa6959c96e6d963207622a6e","contentType":"text/markdown; charset=utf-8"},{"id":"be7e314b-98c3-5c1f-a5d3-9e4197f0e283","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/be7e314b-98c3-5c1f-a5d3-9e4197f0e283/attachment.md","path":"references/logarithmic-axis.md","size":11056,"sha256":"8ad3c64a40dab21b723fc82cb246b2a4bc43db1d934c38e465ff1a0e50d19ac0","contentType":"text/markdown; charset=utf-8"},{"id":"8583de6d-0305-5cd1-baa9-22239f18e2a1","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/8583de6d-0305-5cd1-baa9-22239f18e2a1/attachment.md","path":"references/multiple-panes.md","size":10898,"sha256":"133175dfe86eadab67ff5acf91b579ed78ca696ef3fb9058e2ed31756e8e8588","contentType":"text/markdown; charset=utf-8"},{"id":"cea60cea-f404-5e89-9ab1-ce71a6ef8fa1","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/cea60cea-f404-5e89-9ab1-ce71a6ef8fa1/attachment.md","path":"references/numeric-axis.md","size":9706,"sha256":"97cf0804ad255f5c7f1e270167f8d0f779e201843cac2afc37f3d81fa287197c","contentType":"text/markdown; charset=utf-8"},{"id":"b26f68e6-42e7-5277-a45e-3ff413c65ce8","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b26f68e6-42e7-5277-a45e-3ff413c65ce8/attachment.md","path":"references/print-export.md","size":9592,"sha256":"21cefbe65bfdac6ee064de6ebfbe36baa2925118552d4abd256c80a0017678fd","contentType":"text/markdown; charset=utf-8"},{"id":"fca03452-09cf-5378-8e19-f680afc35406","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/fca03452-09cf-5378-8e19-f680afc35406/attachment.md","path":"references/selection-interaction.md","size":13334,"sha256":"4cd8740c592be581d281c26458067896de79fa0d654529c3d5868b25e3a346ab","contentType":"text/markdown; charset=utf-8"},{"id":"32f9b26f-d28d-52c1-91a2-6a700a0d0df5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/32f9b26f-d28d-52c1-91a2-6a700a0d0df5/attachment.md","path":"references/usage-example.md","size":1755,"sha256":"9a53b23b2b581003b6267734c904f3b56712a1d06171469b2aca154b1ae52671","contentType":"text/markdown; charset=utf-8"},{"id":"55b75742-a8ad-556c-8fdc-2ebf3e17624f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/55b75742-a8ad-556c-8fdc-2ebf3e17624f/attachment.md","path":"references/working-with-data.md","size":10998,"sha256":"2086fbec4408791356632afd444c4d293b0122ef43db9c317b2f8a1545f77265","contentType":"text/markdown; charset=utf-8"}],"bundle_sha256":"bfac423abc63e74b6cf3e2df0508ab3d016a049cf606f7df5b1511b8d3e41d71","attachment_count":14,"text_attachments":14,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/syncfusion-react-3d-chart/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","metadata":{"author":"Syncfusion Inc","version":"33.1.44","category":"Data Visualization"},"import_tag":"clean-skills-v1","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."}},"renderedAt":1782979561341}

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…