syncfusion-vue-3d-chart

Implementing Syncfusion Vue 3D Chart Component

The Syncfusion Vue 3D Chart component enables developers to create interactive, immersive 3D data visualizations. Perfect for displaying complex datasets with enhanced spatial awareness through 3D columns, bars, and stacked variations.

When to Use This Skill

Use this skill when the user needs to:

Create 3D visualizations: Build interactive 3D column charts, bar charts, or stacked variants
Visualize multidimensional data: Display data across multiple axes with depth perception
Customize appearance: Configure colors, legends, labels, and chart dimensions
Handle user interactions: Implement tooltips, selection, rotation, and perspective controls
Configure axes: Set up category, numeric, date-time, or logarithmic axes with customization
Export or print: Generate PNG, JPEG, SVG, or PDF outputs of 3D charts

Component Overview

The 3D Chart component transforms standard 2D charts into immersive 3D visualizations, providing:

Multiple 3D Chart Types: Column, Bar, and Stacked variants
Advanced Axis Configuration: Category, Numeric, Date-Time, and Logarithmic axes
Rich Customization: Colors, themes, legends, tooltips, labels, and dimensions
User Interactions: Rotation, selection, hover effects, and perspective control
Export Capabilities: Multi-format export (PNG, JPEG, SVG, PDF) and printing

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Package installation and dependencies
Basic 3D chart setup and component registration
Data binding and minimal example
CSS imports and theme setup
When: Start here to set up your first 3D chart

Chart Types

📄 Read: references/chart-types.md

Column 3D, Bar 3D chart implementation
Stacked Column 3D and Stacked Bar 3D variants
Comparing different chart type use cases
Code examples with sample data
When: Need to choose or implement a specific 3D chart type

Axis Configuration

📄 Read: references/axis-configuration.md

Configuring category, numeric, and date-time axes
Adding axis titles and customizing labels
Multiple panes and axis positioning
Logarithmic axis setup
When: Customizing axes for specific data requirements

Appearance and Customization

📄 Read: references/appearance-customization.md

Theming and color schemes
Legend styling and positioning
Chart dimensions and sizing
Label and tooltip formatting
When: Styling the chart appearance and visual behavior

Interactions and Features

📄 Read: references/interactions-features.md

Tooltip configuration and styling
Selection functionality and events
User interaction modes (rotation, perspective)
Handling chart events
When: Implementing user interactions or advanced features

Print and Export

📄 Read: references/print-export.md

Export to image formats (PNG, JPEG, SVG)
PDF export functionality
Print chart directly
When: Users need to export or print chart data

Quick Start Example

Here's a minimal setup to create a 3D Column Chart:

<template>
  <div id="app">
    <ejs-chart3d id="chart">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="chartData" type="Column" xName="month" yName="sales" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>

<script>
import { 
  Chart3DComponent, 
  Chart3DSeriesCollectionDirective, 
  Chart3DSeriesDirective,
  ColumnSeries3D,
  Category3D
} from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  data() {
    return {
      chartData: [
        { month: 'Jan', sales: 35 },
        { month: 'Feb', sales: 28 },
        { month: 'Mar', sales: 34 },
        { month: 'Apr', sales: 32 },
        { month: 'May', sales: 40 }
      ]
    };
  },
  provide: {
    chart3d: [ColumnSeries3D, Category3D]
  }
};
</script>

<style>
#chart {
  width: 100%;
  height: 400px;
}
</style>

Common Patterns

Pattern 1: Multi-Series 3D Column Chart

Display multiple data series in a single 3D chart:

<e-chart3d-series-collection>
  <e-chart3d-series :dataSource="data" type="Column" xName="month" yName="sales" name="Sales"></e-chart3d-series>
  <e-chart3d-series :dataSource="data" type="Column" xName="month" yName="revenue" name="Revenue"></e-chart3d-series>
</e-chart3d-series-collection>

Use when: You need to compare multiple metrics across categories in 3D perspective.

Pattern 2: Stacked Data Visualization

Stack multiple series to show cumulative totals:

<e-chart3d-series type="StackingColumn3D" xName="country" yName="gold"></e-chart3d-series>

Use when: Displaying parts of a whole across categories (e.g., medal counts by type).

Pattern 3: Custom Axis Configuration

Configure axes to match specific data ranges and labels:

<ejs-chart3d :primaryXAxis="xAxis" :primaryYAxis="yAxis">
  <!-- series collection -->
</ejs-chart3d>

data() {
  return {
    xAxis: { valueType: 'Category', labelFormat: '{value}' },
    yAxis: { labelFormat: '{value}K', minimum: 0, maximum: 100 }
  };
}

Use when: Custom axis ranges, formatting, or label positioning is needed.

Pattern 4: Dynamic Tooltip Display

Show contextual information on hover:

<ejs-chart3d :tooltip="tooltip">
  <!-- series collection -->
</ejs-chart3d>

data() {
  return {
    tooltip: { enable: true, format: '${point.x}: $${point.y}K' }
  };
}

Use when: Users need contextual data on interaction (hover over data points).

Key Props

Prop	Type	Purpose	Example
`type`	String	Series chart type (Column, Bar, StackingColumn3D, StackingBar3D)	`type="Column"`
`xName`	String	Maps x-axis data from data source	`xName="month"`
`yName`	String	Maps y-axis data from data source	`yName="sales"`
`dataSource`	Array	Chart data array	`:dataSource="chartData"`
`name`	String	Series display name in legend	`name="Sales"`
`:tooltip`	Object	Tooltip configuration	`:tooltip="{ enable: true }"`
`:primaryXAxis`	Object	X-axis configuration	`:primaryXAxis="xAxisConfig"`
`:primaryYAxis`	Object	Y-axis configuration	`:primaryYAxis="yAxisConfig"`

Common Use Cases

Use Case 1: Sales Performance Dashboard Create a 3D stacked column chart showing revenue breakdown by product category and month. Users interact via tooltips and rotate the chart for better perspective.

Use Case 2: Analytics Comparison Compare metrics across multiple dimensions using 3D column charts with custom axes, legends, and export capability for reports.

Use Case 3: Financial Data Visualization Display financial trends with date-time axes on 3D charts, enabling users to identify patterns through rotation and perspective.

Use Case 4: Quality Metrics Visualize quality metrics stacked by defect type, with tooltips showing detailed breakdown and export-to-PDF for compliance documentation.

Next Steps

Start here: Read references/getting-started.md to set up your first 3D chart
Choose chart type: Review references/chart-types.md for available options
Customize as needed: Check other references based on your specific requirements
Export: Use references/print-export.md when ready to generate outputs