syncfusion-javascript-3d-chart

# Implementing 3D Charts in Syncfusion TypeScript and JavaScript The Syncfusion EJ2 3D Chart component visualizes categorical, numeric, and date-based data through three-dimensional Column, Bar, Stacking Column, Stacking Bar, and 100-percent stacking series. This skill covers framework-neutral implementations for: - TypeScript using npm and ES modules. - JavaScript using npm and ES modules. - JavaScript using the complete global EJ2 bundle. - Local and remote data binding. - 3D rotation, tilt, and depth. - Category, numeric, and date-time axes. - Multiple and stacked series. - Tooltips, legends, highlighting, and selection. - Internal Chart3D themes. - Dynamic data updates. - Performance, accessibility, and cleanup. A separate Syncfusion theme stylesheet is not required solely for the focused Chart3D examples. Apply the visual theme internally through the `theme` property. ## Platform Support ### TypeScript Use TypeScript when the application requires: - Type definitions and IDE assistance. - npm package management. - ES module imports. - Explicit feature-module injection. - Compile-time validation. - A bundler or TypeScript build process. Install: ```bash npm install @syncfusion/ej2-charts ``` Import: ```typescript import { Chart3D } from '@syncfusion/ej2-charts'; ``` Import and inject every optional module used by the chart before creating the Chart3D instance. ### JavaScript with npm and ES Modules Use module-based JavaScript when the application uses: - npm. - A module bundler. - ES module imports. - Explicit `Chart3D.Inject(...)` calls. Install: ```bash npm install @syncfusion/ej2-charts ``` Import: ```javascript import { Chart3D } from '@syncfusion/ej2-charts'; ``` ### Global JavaScript Use the global JavaScript approach when the application uses: - A versioned EJ2 global bundle. - Traditional HTML and JavaScript files. - The `ej.charts.Chart3D` global constructor. - No TypeScript compilation. Use the versioned complete bundle: ```html <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script> ``` Do not call `Chart3D.Inject(...)` when using the complete global bundle. Browser compatibility must follow the supported browser matrix of the installed EJ2 version. Do not promise unrestricted legacy-browser compatibility. ## When to Use This Skill Use this skill when a task requires: - Creating a 3D Column Chart. - Creating a 3D Bar Chart. - Creating stacked 3D series. - Creating 100-percent stacked 3D series. - Displaying multiple series in a 3D view. - Configuring category, numeric, or date-time axes. - Enabling interactive rotation. - Setting rotation, tilt, and depth. - Customizing chart walls and backgrounds. - Applying a built-in Chart3D theme. - Adding legends and tooltips. - Enabling highlighting or selection. - Displaying data labels. - Binding local or remote data. - Dynamically updating data or appearance. - Improving accessible interpretation. - Validating performance and cleanup. Use a 3D chart only when depth or interaction adds meaningful context. For precise value comparison, a conventional 2D chart can be easier to interpret. ## Navigation Guide Choose the reference that matches the implementation task. ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) Use this reference for: - Package installation. - TypeScript imports. - Module injection. - JavaScript bundle setup. - Host creation and validation. - Basic 3D Column Chart creation. - Internal theme selection. - Data validation. - Complete TypeScript and JavaScript examples. - Basic troubleshooting. ### 3D Settings and Rotation 📄 **Read:** [references/3d-settings-and-rotation.md](references/3d-settings-and-rotation.md) Use this reference for: - `enableRotation`. - Initial rotation. - Tilt. - Depth. - Wall color. - Perspective and visual readability. - Runtime rotation updates. - Rotation interaction. - Occlusion and label visibility. - Resetting the 3D view. ### Chart Types 📄 **Read:** [references/chart-types-3d.md](references/chart-types-3d.md) Use this reference for: - 3D Column series. - 3D Bar series. - Stacking Column series. - Stacking Bar series. - 100-percent Stacking Column series. - 100-percent Stacking Bar series. - Multi-series charts. - Stacking groups. - Series-specific module injection. - Choosing an appropriate series type. ### Axes Customization 📄 **Read:** [references/axes-customization-3d.md](references/axes-customization-3d.md) Use this reference for: - Category axes. - Numeric axes. - Date-time axes. - Axis titles. - Label formatting. - Axis minimum and maximum. - Intervals. - Label rotation. - Axis data coverage. - Category label placement. - Validated axis modules. ### Interaction Features 📄 **Read:** [references/interaction-features-3d.md](references/interaction-features-3d.md) Use this reference for validated: - Tooltips. - Legends. - Data labels. - Rotation. - Highlighting. - Selection. - Point interaction. - Series interaction. - Interaction events. - Persistent details outside the chart. Do not transfer ordinary 2D Chart interaction APIs to Chart3D without validating the Chart3D-specific module and model. ### Appearance and Styling 📄 **Read:** [references/appearance-and-styling.md](references/appearance-and-styling.md) Use this reference for: - Internal Chart3D themes. - Palettes. - Series colors. - Point colors. - Borders. - Opacity. - Chart background. - Wall color. - Title styles. - Axis fonts. - Application-owned layout CSS. A separate Syncfusion theme stylesheet is not required solely for the focused Chart3D examples. Use the `theme` property for the chart’s built-in visual theme. ### Data Handling and Performance 📄 **Read:** [references/data-and-performance.md](references/data-and-performance.md) Use this reference for: - Local data. - Remote data. - `DataManager`. - Queries and adaptors. - Data normalization. - Runtime validation. - Dynamic updates. - Real-time update considerations. - Large data collections. - Animation and depth performance. - Responsive refresh behavior. - Memory cleanup. ### Accessibility and Export 📄 **Read:** [references/accessibility-export.md](references/accessibility-export.md) Use this reference for: - Semantic chart descriptions. - Persistent text summaries. - Semantic data tables. - Color and contrast. - Focus visibility. - Touch and pointer interaction. - Browser zoom and reflow testing. - Validated Chart3D print functionality. - Validated Chart3D image export. - Validated PDF export. - Right-to-left behavior when confirmed by the installed Chart3D API. Do not copy print or export APIs from the ordinary 2D Chart without validating Chart3D support. ## Feature Module Reference Import and inject only the modules required by the implementation. ```text Column series -> ColumnSeries3D Bar series -> BarSeries3D Stacking Column series -> StackingColumnSeries3D Stacking Bar series -> StackingBarSeries3D 100% Stacking Column -> Validated 100% stacking-column module 100% Stacking Bar -> Validated 100% stacking-bar module Category axis -> Category3D Date-time axis -> Validated DateTime3D module Legend -> Legend3D Tooltip -> Tooltip3D Highlight -> Highlight3D Selection -> Validated Chart3D selection module Data labels -> Validated Chart3D data-label module Print -> Validated Chart3D print module Image export -> Validated Chart3D image-export module PDF export -> Validated Chart3D PDF-export module ``` Validate exact export names against the installed `@syncfusion/ej2-charts` package before adding an optional feature. ## TypeScript Module Injection A 3D Column Chart with a category axis, legend, and tooltip uses: ```typescript import { Category3D, Chart3D, ColumnSeries3D, Legend3D, Tooltip3D } from '@syncfusion/ej2-charts'; Chart3D.Inject( ColumnSeries3D, Category3D, Legend3D, Tooltip3D ); ``` A minimal 3D Column Chart without a legend or tooltip uses: ```typescript import { Category3D, Chart3D, ColumnSeries3D } from '@syncfusion/ej2-charts'; Chart3D.Inject( ColumnSeries3D, Category3D ); ``` Keep imports and injection synchronized. Incorrect: ```typescript import { Chart3D } from '@syncfusion/ej2-charts'; Chart3D.Inject( ColumnSeries3D ); ``` Correct: ```typescript import { Chart3D, ColumnSeries3D } from '@syncfusion/ej2-charts'; Chart3D.Inject( ColumnSeries3D ); ``` ## Host and Dimensions Use a consistent host ID: ```html <div id="chart-container"></div> ``` Provide measurable dimensions: ```css .chart-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } #chart-container { width: 100%; min-height: 600px; } ``` Configure component dimensions: ```typescript const chart: Chart3D = new Chart3D({ width: '100%', height: '600px' }); ``` Validate the host: ```typescript const host: HTMLElement | null = document.getElementById( 'chart-container' ); if (!host) { throw new Error( 'The 3D Chart host "#chart-container" was not found.' ); } ``` Prefer explicit construction followed by `appendTo()`: ```typescript const chart: Chart3D = new Chart3D({ // Configuration }); chart.appendTo( host ); ``` The two-argument constructor is supported: ```typescript const chart: Chart3D = new Chart3D( configuration, '#chart-container' ); ``` Use explicit `appendTo()` for clearer host validation and cleanup. ## Quick Start Example ## TypeScript ```typescript import { Category3D, Chart3D, ColumnSeries3D, Legend3D, Tooltip3D } from '@syncfusion/ej2-charts'; interface MonthlySales { month: string; sales: number; } Chart3D.Inject( ColumnSeries3D, Category3D, Legend3D, Tooltip3D ); const chartData: MonthlySales[] = [ { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, { month: 'May', sales: 40 } ]; const host: HTMLElement | null = document.getElementById( 'chart-container' ); if (!host) { throw new Error( 'The 3D Chart host "#chart-container" was not found.' ); } const chart: Chart3D = new Chart3D({ width: '100%', height: '600px', theme: 'Fluent2', primaryXAxis: { valueType: 'Category', title: 'Month' }, primaryYAxis: { minimum: 0, maximum: 60, interval: 10, title: 'Sales' }, title: 'Monthly Sales in 3D', tooltip: { enable: true }, legendSettings: { visible: true, position: 'Bottom' }, enableRotation: true, rotation: 7, tilt: 10, depth: 100, series: [ { dataSource: chartData, xName: 'month', yName: 'sales', type: 'Column', name: 'Sales' } ] }); chart.appendTo( host ); ``` A separate Syncfusion theme stylesheet is not required for this focused Chart3D example. Apply the built-in visual theme through: ```typescript theme: 'Fluent2' ``` Validate the exact theme value against the installed `Chart3DTheme` type. ## JavaScript with the Complete CDN Bundle ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>EJ2 3D Chart</title> <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script> <style> #chart-container { width: 100%; min-height: 600px; } </style> </head> <body> <div id="chart-container"></div> <script> if ( typeof window.ej === 'undefined' || !window.ej.charts || !window.ej.charts.Chart3D ) { throw new Error( 'The EJ2 3D Chart global bundle was not loaded.' ); } var chartData = [ { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, { month: 'May', sales: 40 } ]; var chart = new ej.charts.Chart3D({ width: '100%', height: '600px', theme: 'Fluent2', primaryXAxis: { valueType: 'Category', title: 'Month' }, primaryYAxis: { minimum: 0, maximum: