syncfusion-react-3d-chart

What this skill does

# 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 container
- `Chart3DSeriesCollectionDirective` - Series collection wrapper
- `Chart3DSeriesDirective` - Individual series configuration
- `Chart3DAxesDirective` - Multiple axes configuration

**Chart 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
📄 **Read:** [references/api-reference.md](references/api-reference.md)
- Concise list of public props, methods, events, child directives, and a usage snippet. Use this as the canonical in-repo API summary.

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installing @syncfusion/ej2-react-charts package
- Setting up dependencies and CSS themes
- Creating your first 3D chart
- Basic Chart3DComponent usage
- TypeScript configuration

### Chart Types
📄 **Read:** [references/chart-types.md](references/chart-types.md)
- 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
📄 **Read:** [references/working-with-data.md](references/working-with-data.md)
- Data binding approaches
- Data source structure requirements
- Series configuration (xName, yName)
- Multiple series handling
- Dynamic data updates
- Empty points handling

### Category Axis
📄 **Read:** [references/category-axis.md](references/category-axis.md)
- Category axis configuration
- Label formatting and placement
- Category grouping
- Interval settings
- Use cases for categorical data

### Numeric Axis
📄 **Read:** [references/numeric-axis.md](references/numeric-axis.md)
- Numeric axis setup
- Range configuration (minimum, maximum)
- Interval and step size
- Label formatting (decimals, currency)
- Starting from zero vs auto-range

### DateTime Axis
📄 **Read:** [references/datetime-axis.md](references/datetime-axis.md)
- DateTime axis configuration
- Date format options
- Interval types (days, months, years)
- Date range settings
- Skeleton formats
- Timezone considerations

### Logarithmic Axis
📄 **Read:** [references/logarithmic-axis.md](references/logarithmic-axis.md)
- Logarithmic scale overview
- Base configuration (log10, log2, etc.)
- Use cases for exponential data
- Label formatting for log scales
- Range and interval settings

### Axis Customization
📄 **Read:** [references/axis-customization.md](references/axis-customization.md)
- 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
📄 **Read:** [references/multiple-panes.md](references/multiple-panes.md)
- 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
📄 **Read:** [references/data-labels-legend-tooltip.md](references/data-labels-legend-tooltip.md)
- 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
📄 **Read:** [references/selection-interaction.md](references/selection-interaction.md)
- Selection modes (Point, Series, Cluster)
- Single and multi-selection
- Selection events and handlers
- Highlight on hover
- Selection styling
- Interactive features

### Print and Export
📄 **Read:** [references/print-export.md](references/print-export.md)
- 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

```tsx
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
```tsx
<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>
```

### Stacked Column Chart
```tsx
<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)
```tsx
<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
```tsx
<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  legendSettings={{ visible: true }}
>
  <Inject services={[ColumnSeries3D,