Syncfusion React 3d Chart

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

• 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

• 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

• 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

• 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

• Category axis configuration
• Label formatting and placement
• Category grouping
• Interval settings
• Use cases for categorical data

Numeric Axis

📄 Read: 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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 }}
>