OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/react-ui-components-skills --skill 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.
npx skills add syncfusion/react-ui-components-skills --skill 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.
Use this skill when you need to:
Package: @syncfusion/ej2-react-charts
Main Components:
Chart3DComponent - Root 3D chart containerChart3DSeriesCollectionDirective - Series collection wrapperChart3DSeriesDirective - Individual series configurationChart3DAxesDirective - Multiple axes configurationChart Types: Column, Bar, Stacked Column, Stacked Bar, 100% Stacked Column, 100% Stacked Bar
Axis Types: Category, Numeric, DateTime, Logarithmic
📄 Read: references/api-reference.md
📄 Read: references/getting-started.md
📄 Read: references/chart-types.md
📄 Read: references/working-with-data.md
📄 Read: references/category-axis.md
📄 Read: references/numeric-axis.md
📄 Read: references/datetime-axis.md
📄 Read: references/logarithmic-axis.md
📄 Read: references/axis-customization.md
📄 Read: references/multiple-panes.md
📄 Read: references/data-labels-legend-tooltip.md
📄 Read: references/selection-interaction.md
📄 Read: references/print-export.md
| Prop | Type | Description |
|---|---|---|
primaryXAxis | Object | Configuration for X-axis (type, title, labels) |
primaryYAxis | Object | Configuration for Y-axis (range, title, format) |
rotation | number | Horizontal rotation angle (0-360) |
tilt | number | Vertical tilt angle (0-90) |
depth | number | Depth of 3D chart (0-100) |
enableRotation | boolean | Enable mouse rotation interaction |
wallColor | string | Color of 3D walls |
wallSize | number | Thickness of wall borders |
title | string | Chart title text |
legendSettings | Object | Legend configuration |
tooltip | Object | Tooltip settings |
palettes | string[] | Array of colors for series |
| Prop | Type | Description |
|---|---|---|
dataSource | any[] | Array of data points |
xName | string | Property name for X-axis values |
yName | string | Property name for Y-axis values |
type | string | Chart type: 'Column', 'Bar', 'StackingColumn', 'StackingBar', 'StackingColumn100', 'StackingBar100' |
name | string | Series name (shown in legend) |
dataLabel | Object | Data label configuration |
fill | string | Series color |
opacity | number | Series opacity (0-1) |
All components are fully typed. Import types as needed:
Chart not rendering?
Data not showing?
Performance issues?
3D effect not working?
For detailed troubleshooting, refer to the specific reference files above.
<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
<Inject services={[ColumnSeries3D, Category3D]} />
<Chart3DSeriesCollectionDirective>
<Chart3DSeriesDirective
dataSource={data}
xName='category'
yName='value'
type='Column'
/>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent><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><Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
<Inject services={[BarSeries3D, Category3D]} />
<Chart3DSeriesCollectionDirective>
<Chart3DSeriesDirective
dataSource={data}
xName='category'
yName='value'
type='Bar'
/>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent><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><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><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>import {
Chart3DComponent,
IChart3DLoadedEventArgs,
IChart3DPointRenderEventArgs,
Chart3DModel
} from '@syncfusion/ej2-react-charts';