Syncfusion Angular 3d Chart

Implementing Syncfusion Angular 3D Chart

When to Use This Skill

Use this skill when you need to:

• Create a 3D chart from scratch in an Angular application
• Display data in interactive 3D visualizations (bar, column, stacked variants)
• Customize chart appearance, colors, and styling
• Configure axes with different types (category, numeric, datetime, logarithmic)
• Add interactive features like tooltips, selection, data labels, and legends
• Implement data binding with local or remote data
• Export or print charts as images or PDFs
• Ensure accessibility for screen readers and keyboard navigation
• Work with dimensions and 3D perspective settings

---

Component Overview

The Syncfusion Angular 3D Chart component provides a comprehensive solution for creating interactive three-dimensional data visualizations. It supports multiple chart types (bar, column, stacked configurations), advanced customization options, and robust data binding capabilities. The component is designed for Angular 21+ with standalone architecture and includes accessibility features, keyboard navigation, and multiple export formats.

Key Capabilities

• Multiple Chart Types: Bar, Column, Stacked Bar, Stacked Column
• Axis Types: Category, Numeric, DateTime, Logarithmic
• Interactive Features: Tooltips, selection modes, data labels, legends
• Customization: Colors, themes, styling, 3D dimensions
• Data Binding: Local arrays, remote data sources, dynamic updates
• Export/Print: PNG, SVG, PDF formats
• Accessibility: WCAG compliance, ARIA attributes, keyboard support

---

Documentation and Navigation Guide

API Reference

📄 Read: references/api-reference.md

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Create your first 3D chart
• Basic component configuration
• CSS and theme imports
• Minimal working example

Chart Types & Configuration

📄 Read: references/chart-types.md

• Bar chart implementation
• Column chart implementation
• Stacked column configuration
• Stacked bar configuration
• Switching between chart types
• Series configuration

Axis & Data Setup

📄 Read: references/axis-customization.md

• Category axis setup
• Numeric axis configuration
• DateTime axis setup
• Logarithmic axis support
• Multi-pane configurations

📄 Read: references/axis-labels.md

• Label formatting and display
• Label positioning and rotation
• Custom label templates
• Label appearance customization

Data & Labels

📄 Read: references/data-labels.md

• Enable and position data labels
• Label formatting options
• Custom data label templates
• Conditional label display

📄 Read: references/working-with-data.md

• Data binding approaches (arrays, objects)
• Category data configuration
• Remote data loading
• Real-time data updates
• Data refresh patterns

Appearance & Styling

📄 Read: references/appearance.md

• Custom color palettes
• Point color customization
• Series styling options
• Theme application

📄 Read: references/dimensions.md

• 3D depth and perspective control
• Chart width and height configuration
• Rotation and tilt settings
• Wall and corner customization

Interactive Features

📄 Read: references/tool-tip.md

• Enable and configure tooltips
• Tooltip templates and formatting
• Custom styling options
• Tooltip events and interactions

📄 Read: references/selection.md

• Point selection modes
• Multiple selection configurations
• Selection styling
• Selection events

📄 Read: references/legend.md

• Enable and position legends
• Legend customization
• Custom legend items
• Legend interactions

Advanced Features

📄 Read: references/print-export.md

• Export as PNG, SVG, PDF
• Print functionality
• Export configuration options
• File naming and paths

📄 Read: references/accessibility.md

• WCAG 2.1 compliance guidelines
• Keyboard navigation support
• ARIA attributes and labels
• Screen reader optimization
• Color contrast and visual accessibility

---

Quick Start Example

Here's a minimal example to get you started:

import { Component } from '@angular/core';
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis" [primaryYAxis]="yAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="chartData" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AppComponent {
  chartData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  xAxis = { valueType: 'Category' };
  yAxis = { labelFormat: '{value}%' };
}

---

Common Patterns

Pattern 1: Dynamic Data Binding

When user needs real-time updates, bind data to a property and use change detection:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="dynamicData" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DynamicChartComponent {
  dynamicData: any[] = [];

  constructor() {
    this.loadData();
    setInterval(() => this.loadData(), 5000); // Update every 5 seconds
  }

  loadData() {
    this.dynamicData = this.generateData();
  }

  private generateData() {
    return [
      { x: 'A', y: Math.random() * 100 },
      { x: 'B', y: Math.random() * 100 }
    ];
  }
}

Pattern 2: Multiple Chart Types

When user needs to switch between visualization types:

export class MultiTypeChartComponent {
  chartType: string = 'Column';

  switchChartType(type: string) {
    this.chartType = type; // Changes 'type' in series
  }
}

Pattern 3: Custom Color Palette

When user wants brand-specific colors:

@Component({
  template: `
    <ejs-chart3d [palettes]="customPalette">
      ...
    </ejs-chart3d>
  `
})
export class CustomPaletteComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
}

---

Key Props Reference

---

Common Use Cases

1. Sales Dashboard: Display monthly sales by region using stacked columns 2. Inventory Analytics: Compare stock levels across warehouses using bar charts 3. Performance Tracking: Visualize KPIs over time with multiple series 4. Comparative Analysis: Side-by-side data comparison using grouped columns 5. Trend Analysis: Track changes across categories with animated transitions 6. Budget vs. Actual: Compare planned vs. actual spending using stacked configurations

---

For more information, visit the Syncfusion Angular 3D Chart Documentation.

Accessibility

Build accessible 3D charts that comply with WCAG 2.1 standards and support all users.

Table of Contents

• WCAG 2.1 Compliance
• Compliance Levels
• Keyboard Navigation
• Enable Keyboard Support
• Keyboard Shortcuts
• Navigation Example
• ARIA Attributes
• Add ARIA Labels
• ARIA Roles
• Screen Reader Support
• Provide Text Alternatives
• Summary for Screen Readers
• Color Contrast
• Ensure Sufficient Contrast
• Color-Blind Friendly Palettes
• Focus Indicators
• Visible Focus States
• Motion and Animation
• Respect Prefers-Reduced-Motion
• Accessible Data Labels
• Large Readable Labels
• Accessibility Checklist
• Pre-Implementation
• Implementation
• Testing
• Common Issues
• Testing Tools
• Resources
• Accessibility Statement Example

WCAG 2.1 Compliance

Compliance Levels

• Level A: Basic compliance (minimal)
• Level AA: Recommended standard
• Level AAA: Enhanced accessibility (optional)

The Syncfusion 3D Chart aims for WCAG 2.1 Level AA compliance.

Keyboard Navigation

Enable Keyboard Support

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-accessibility',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AccessibilityComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];
}

Keyboard Shortcuts

Navigation Example

@Component({
  template: `
    <ejs-chart3d 
      tabindex="0" [primaryXAxis]='primaryXAxis'
      (keydown)="handleKeyboard($event)">
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          selectionMode="Point">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class KeyboardNavComponent {
  primaryXAxis = {
            valueType: 'Category'
  }
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  handleKeyboard(event: KeyboardEvent) {
    if (event.key === 'ArrowRight') {
      // Select next point
    } else if (event.key === 'ArrowLeft') {
      // Select previous point
    }
  }
}

ARIA Attributes

Add ARIA Labels

Provide meaningful labels for screen readers:

@Component({
  template: `
    <div role="img" attr.aria-label="3D Chart showing sales by month">
      <ejs-chart3d 
        title="Monthly Sales"
        aria-label="Sales chart from January to December 2024">
        <e-chart3d-series-collection>
          <e-chart3d-series 
            [dataSource]="data" 
            xName="month" 
            yName="sales" 
            type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
      <p id="chart-desc">
        This chart displays monthly sales figures for 2024. 
        Total revenue across all months: $500,000.
      </p>
    </div>
  `
})
export class AriaLabelsComponent {
  data = [
    { month: 'Jan', sales: 40 },
    { month: 'Feb', sales: 50 }
  ];
}

ARIA Roles

<ejs-chart3d role="img" aria-label="Sales Chart"></ejs-chart3d>

<!-- Legend -->
<nav role="navigation" aria-label="Chart Legend">
  <!-- Legend items -->
</nav>

<!-- Data Points -->
<div role="button" tabindex="0" aria-label="January sales: $40,000"></div>

Screen Reader Support

Provide Text Alternatives

Create accessible data table alongside chart:

@Component({
  template: `
    <div>
      <!-- Chart -->
      <ejs-chart3d #chart title="Sales Data" [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="month" yName="sales" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
      
      <!-- Accessible Data Table -->
      <table role="presentation" [attr.aria-label]="'Data used in sales chart'">
        <caption>Monthly Sales Data</caption>
        <thead>
          <tr>
            <th scope="col">Month</th>
            <th scope="col">Sales ($)</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of data">
            <td>{{ item.month }}</td>
            <td>{{ item.sales | currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  `
})
export class ScreenReaderComponent {
  data = [
    { month: 'Jan', sales: 40000 },
    { month: 'Feb', sales: 50000 }
  ];
  primaryXAxis = {
    valueType: 'Category'
  }
}

Summary for Screen Readers

@Component({
  template: `
    <div>
      <ejs-chart3d [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
      
      <div class="sr-only" role="region" aria-live="polite">
        Sales chart showing 5 data points. 
        Highest value: 80 in May. 
        Lowest value: 40 in January.
      </div>
    </div>
  `,
  styles: [`
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  `]
})
export class SummaryComponent {
  data = [{ x: 'A', y: 40 }];
  primaryXAxis = {
    valueType: 'Category'
  }
}

Color Contrast

Ensure Sufficient Contrast

Text and backgrounds must meet WCAG AA requirements (4.5:1 minimum):

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'
      [background]="'#ffffff'"
      [theme]="'Material'">
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [fill]="'#0066cc'">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ContrastComponent {
  data = [{ x: 'A', y: 40 }];
  primaryXAxis = {
    valueType: 'Category'
  }
  
}

Color-Blind Friendly Palettes

Use colors distinguishable by colorblind users:

// Recommended palette (Protanopia-safe)
colors = [
  '#0173B2',  // Blue
  '#DE8F05',  // Orange
  '#CC78BC',  // Purple
  '#CA9161',  // Brown
  '#949494'   // Gray
];

// Avoid red-green contrast alone
// Add patterns or additional visual cues

Focus Indicators

Visible Focus States

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `,
  styles: [`
    :host ::ng-deep .e-chart3d:focus {
      outline: 3px solid #4A90E2;
      outline-offset: 2px;
    }
    
    :host ::ng-deep .e-data-point:focus {
      stroke: #333;
      stroke-width: 2px;
    }
  `]
})
export class FocusIndicatorComponent {
  data = [{ x: 'A', y: 40 }];
  primaryXAxis = {
    valueType: 'Category'
  }
}

Motion and Animation

Respect Prefers-Reduced-Motion

@Component({
  template: `
    <ejs-chart3d >
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column" [animation]="shouldAnimate">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `,
  styles: [`
    @media (prefers-reduced-motion: reduce) {
      .e-chart3d {
        animation: none !important;
        transition: none !important;
      }
    }
  `]
})
export class MotionComponent implements OnInit {
  shouldAnimate = true;

  ngOnInit() {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    this.shouldAnimate = !mediaQuery.matches;
  }
}

Accessible Data Labels

Large Readable Labels

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [marker]="marker">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AccessibleLabelsComponent {
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
    valueType: 'Category'
  }

  marker = {
    dataLabel: {
      visible: true,
      font: {
        size: '14px',  // Min 12px
        color: '#333'  // High contrast
      }
    }
  };
}

Accessibility Checklist

Pre-Implementation

• [ ] Define WCAG target level (AA recommended)
• [ ] Plan keyboard navigation
• [ ] Design color palette (colorblind-safe)
• [ ] Create data summary

Implementation

• [ ] Add ARIA labels and roles
• [ ] Implement keyboard shortcuts
• [ ] Ensure 4.5:1 contrast ratio
• [ ] Test focus indicators
• [ ] Respect prefers-reduced-motion

Testing

• [ ] Test with keyboard only (no mouse)
• [ ] Test with screen reader (NVDA, JAWS)
• [ ] Check contrast ratios (WebAIM)
• [ ] Test with colorblind simulator
• [ ] Verify on mobile (touch + keyboard)

Common Issues

Testing Tools

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• WAVE Accessibility Tool: Browser extension for testing
• Axe DevTools: Chrome DevTools extension
• Screen Readers: NVDA (free), JAWS, VoiceOver
• Colorblind Simulator: Chrome DevTools

Resources

• WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
• ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/
• Accessible Data Visualizations: https://www.perceptualedge.com/

Accessibility Statement Example

<p>
  This 3D chart is designed to be accessible. It includes:
  - Keyboard navigation support
  - Screen reader compatible labels
  - High contrast color scheme
  - WCAG 2.1 Level AA compliance
  
  A data table alternative is provided below the chart.
  For accessibility issues, contact: accessibility@example.com
</p>

3D Chart API Reference

This document summarizes key properties, methods, and events for the Chart3DComponent with direct links to the official Syncfusion Angular API anchors.

• Base URL: https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default

Properties

• axes — [Chart3DAxisModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3daxismodel)
• background — string
• backgroundImage — string
• border — BorderModel
• columns — [Chart3DColumnModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dcolumnmodel)
• dataLabel3DModule — DataLabel3D
• dataSource — Object | DataManager
• depth — number
• description — string
• enableExport — boolean
• enablePersistence — boolean
• enableRotation — boolean
• enableRtl — boolean
• enableSideBySidePlacement — boolean
• export3DModule — Export3D
• height — string
• highlight3DModule — Highlight3D
• highlightColor — string
• highlightMode — HighlightMode
• highlightPattern — SelectionPattern
• isMultiSelect — boolean
• isTransposed — boolean
• legendSettings — Chart3DLegendSettingsModel
• locale — string
• margin — MarginModel
• palettes — [string[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#palettes)
• perspectiveAngle — number
• primaryXAxis / primaryYAxis — Chart3DAxisModel
• rotation — number
• rows — [Chart3DRowModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3drowmodel)
• selectedDataIndexes — [IndexesModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/indexesmodel)
• selection3DModule — Selection3D
• selectionMode — Chart3DSelectionMode
• selectionPattern — SelectionPattern
• series — [Chart3DSeriesModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesmodel)
• subTitle / subTitleStyle — string / TitleSettingsModel
• theme — ChartTheme
• tilt — number
• title / titleStyle — string / TitleSettingsModel
• tooltip — Chart3DTooltipSettingsModel
• tooltip3DModule — Tooltip3D
• useGroupingSeparator — boolean
• wallColor — string
• wallSize — number
• width — string

Methods

• addSeries(seriesCollection: Chart3DSeriesModel[]) — Adds new series to the chart - Refer link
• createChartSvg() — Create SVG element for the chart - Refer link
• destroy() — Destroy the widget - Refer link
• export(type: ExportType, fileName: string) — Export chart - Refer link
• print(id?: string[]) — Print chart element(s) - Refer link
• removeSeries(index: number) — Removes a series from the chart - Refer link

Events

• afterExport — EmitType<IAfterExportEventArgs>
• axisLabelRender — Chart3DAxisLabelRenderEventArgs
• beforeExport — Chart3DExportEventArgs
• beforePrint — Chart3DPrintEventArgs
• beforeResize — Chart3DBeforeResizeEventArgs
• chart3DMouseClick / chart3DMouseDown / chart3DMouseLeave / chart3DMouseMove / chart3DMouseUp — Chart3DMouseEventArgs
• legendClick / legendRender — Chart3DLegend*EventArgs
• load / loaded — Chart3DLoadedEventArgs
• pointClick / pointMove — Chart3DPointEventArgs
• pointRender — Chart3DPointRenderEventArgs
• resized — Chart3DResizeEventArgs
• selectionComplete — Chart3DSelectionCompleteEventArgs
• seriesRender — Chart3DSeriesRenderEventArgs
• textRender — Chart3DTextRenderEventArgs
• tooltipRender — Chart3DTooltipRenderEventArgs

--- Generated from: https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default

Appearance and Styling

Table of Contents

• Overview
• Custom Color Palettes
• Default Palettes
• Multiple Palette Options
• Apply Palettes to Specific Series
• Point Color Customization
• Color by Property
• Conditional Point Colors
• Series Styling
• Border and Fill
• Opacity and Transparency
• Marker Styling
• Theme Application
• Built-in Themes
• Dark Mode Theme
• Chart Area Styling
• Background Color
• Border Styling
• Chart Wall
• Common Styling Patterns
• Pattern 1 Corporate Branding
• Pattern 2 Heatmap-Style Colors
• Pattern 3 Accessibility-Compliant Colors
• Pattern 4 Dark Theme Support
• CSS Styling

Override Styles

• Accessibility Considerations
• Performance Notes

Overview

The 3D Chart component offers extensive styling options to match your application's design and brand guidelines.

Custom Color Palettes

Default Palettes

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-appearance',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [palettes]="colors" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AppearanceComponent {
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  primaryXAxis = {
        valueType: 'Category'
  }

  colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
}

Multiple Palette Options

// Modern palette
colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'];

// Pastel palette
colors = ['#FFB3B3', '#B3D9FF', '#B3FFB3', '#FFFFB3', '#FFD9B3'];

// Brand colors
colors = ['#0066cc', '#00cc66', '#cc0066', '#66cc00', '#cc6600'];

Apply Palettes to Specific Series

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="series1" 
          type="Column"
          fill="#FF6B6B">
        </e-chart3d-series>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="series2" 
          type="Column"
          fill="#4ECDC4">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class MultiSeriesColorComponent {
  data = [
    { x: 'A', series1: 40, series2: 35 }
  ];

  primaryXAxis = {
        valueType: 'Category'
  }
}

Point Color Customization

Color by Property

Map data property to colors:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="product" 
          yName="sales" 
          type="Column"
          pointColorMapping="color">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class PointColorComponent {
  data = [
    { product: 'A', sales: 40, color: '#FF6B6B' },
    { product: 'B', sales: 50, color: '#4ECDC4' },
    { product: 'C', sales: 45, color: '#45B7D1' }
  ];

  primaryXAxis = {
        valueType: 'Category'
  }
}

Conditional Point Colors

Color based on value ranges:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="processedData" 
          xName="month" 
          yName="sales" 
          type="Column"
          pointColorMapping="color">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ConditionalColorComponent {
  rawData = [
    { month: 'Jan', sales: 40 },
    { month: 'Feb', sales: 80 },
    { month: 'Mar', sales: 35 }
  ];

  primaryXAxis = {
        valueType: 'Category'
  }

  get processedData() {
    return this.rawData.map(item => ({
      ...item,
      color: item.sales > 50 ? '#00cc66' : '#ff6b6b'
    }));
  }
}

Series Styling

Border and Fill

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [fill]="'#4ECDC4'"
          [border]="border">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class BorderSeriesComponent {
  data = [{ x: 'A', y: 40 }];

  border = {
    color: '#333',
    width: 2
  };

  primaryXAxis = {
        valueType: 'Category'
  }
}

Opacity and Transparency

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [fill]="'#4ECDC4'"
          [opacity]="0.7">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class OpacityComponent {
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
        valueType: 'Category'
  }
}

Marker Styling

marker = {
  height: 10,
  width: 10,
  border: { color: '#333', width: 2 },
  fill: '#fff',
  shape: 'Circle',  // Circle, Rectangle, Triangle, Diamond
  visible: true
};

Theme Application

Built-in Themes

Apply Syncfusion themes:

@Component({
  template: `
    <ejs-chart3d theme="Material" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ThemedComponent {
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
        valueType: 'Category'
  }
}

Available Themes:

• 'Material' (default)
• 'MaterialDark'
• 'Bootstrap'
• 'BootstrapDark'
• 'Tailwind'
• 'TailwindDark'
• 'Fabric'
• 'FabricDark'
• 'HighContrast'

Dark Mode Theme

@Component({
  template: `
    <ejs-chart3d [theme]="'MaterialDark'">
      ...
    </ejs-chart3d>
  `
})
export class DarkModeComponent { }

Chart Area Styling

Background Color

@Component({
  template: `
    <ejs-chart3d background="#f5f5f5" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ChartBackgroundComponent {
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
        valueType: 'Category'
  }
}

Border Styling

@Component({
  template: `
    <ejs-chart3d [chartBorder]="border">
      ...
    </ejs-chart3d>
  `
})
export class BorderComponent {
  border = {
    color: '#999',
    width: 2
  };
}

Chart Wall

Customize the 3D chart wall appearance:

@Component({
  template: `
    <ejs-chart3d wallColor="#f9f9f9" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class WallColorComponent {
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
        valueType: 'Category'
  }
}

Common Styling Patterns

Pattern 1: Corporate Branding

Apply company colors:

colors = ['#003366', '#0066cc', '#00cc99', '#cccc00', '#ff6600'];

border = {
  color: '#003366',
  width: 2
};

Pattern 2: Heatmap-Style Colors

Use gradient-like colors for value representation:

data = [
  { month: 'Jan', sales: 20, color: '#0066cc' },   // Low
  { month: 'Feb', sales: 50, color: '#ffcc00' },   // Medium
  { month: 'Mar', sales: 80, color: '#ff0000' }    // High
];

Pattern 3: Accessibility-Compliant Colors

Use high-contrast, colorblind-friendly colors:

colors = [
  '#0173B2',  // Blue
  '#DE8F05',  // Orange
  '#CC78BC',  // Purple
  '#CA9161',  // Brown
  '#949494'   // Gray
];

Pattern 4: Dark Theme Support

@Component({
  template: `
    <ejs-chart3d [theme]="isDarkMode ? 'MaterialDark' : 'Material'">
      ...
    </ejs-chart3d>
  `
})
export class ThemeSwitchComponent {
  isDarkMode = false;
}

CSS Styling

Override Styles

Add custom CSS for additional styling:

.e-chart3d {
  font-family: 'Segoe UI', sans-serif;
}

.e-chart3d .e-series {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}

.e-chart3d .e-data-label {
  font-weight: bold;
}

Accessibility Considerations

Color choices should:

• Contrast: Min 4.5:1 ratio for text
• Colorblind-friendly: Avoid red-green only distinction
• Intent support: Don't rely on color alone to convey meaning

Performance Notes

• Use theme-based styling over custom colors when possible
• Limit custom colors to 8-10 for optimal rendering
• Cache color mappings for large datasets

Axis Customization

Table of Contents

• Overview
• API Reference
• Category Axis
• Basic Category Axis
• Category Axis with Label Rotation
• Category Axis with Custom Range
• Numeric Axis
• Basic Numeric Axis
• Numeric Axis with Fixed Range
• Numeric Axis with Logarithmic Scale
• DateTime Axis
• Basic DateTime Axis
• DateTime Axis with Custom Interval
• Logarithmic Axis
• Basic Logarithmic Axis
• Logarithmic Axis with Custom Base
• Multi-Pane Configuration
• Basic Multi-Pane
• Axis Common Properties
• Title Configuration
• Label Formatting
• Grid Lines and Ticks
• Axis Range and Intervals
• Axis Visibility and Position
• Common Axis Patterns
• Pattern: Multiple Time Series
• Pattern: Percentage Comparison
• Pattern: Scientific Data
• Selection Guidelines

Overview

API Reference

📄 Read: references/api-reference.md

The 3D Chart supports multiple axis types to handle different data scenarios. Choose the appropriate axis type based on your data:

• Category: Text labels (products, regions, months)
• Numeric: Numerical values (quantities, prices)
• DateTime: Date/time values (trends over time)
• Logarithmic: Scientific/large range data (exponential growth)

Category Axis

Category axis displays text labels for each data point.

Basic Category Axis

import { Component } from '@angular/core';
import {Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-category-axis',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="product" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class CategoryAxisComponent {
  data = [
    { product: 'Laptop', sales: 45 },
    { product: 'Desktop', sales: 38 },
    { product: 'Monitor', sales: 52 }
  ];

  xAxis = { valueType: 'Category', title: 'Products' };
}

Category Axis with Label Rotation

Rotate labels to avoid overlap:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      ...
    </ejs-chart3d>
  `
})
export class RotatedCategoryAxisComponent {
  xAxis = {
    valueType: 'Category',
    labelRotationAngle: 45,
    title: 'Products'
  };
}

Category Axis with Custom Range

xAxis = {
  valueType: 'Category',
  startAngle: 0,
  endAngle: 360
};

Numeric Axis

Numeric axis displays numerical values with automatic scaling.

Basic Numeric Axis

@Component({
  template: `
    <ejs-chart3d [primaryYAxis]="yAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="revenue" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class NumericAxisComponent {
  data = [
    { month: 'Jan', revenue: 10000 },
    { month: 'Feb', revenue: 15000 },
    { month: 'Mar', revenue: 12000 }
  ];

  yAxis = {
    valueType: 'Double',
    title: 'Revenue ($)',
    labelFormat: '${value}'
  };
}

Numeric Axis with Fixed Range

yAxis = {
  valueType: 'Double',
  minimum: 0,
  maximum: 50000,
  interval: 10000,
  title: 'Amount'
};

Numeric Axis with Logarithmic Scale

For large value ranges, use logarithmic scale:

yAxis = {
  valueType: 'Double',
  isInversed: false,
  majorGridLines: { width: 1 }
};

DateTime Axis

DateTime axis handles date and time values.

Basic DateTime Axis

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="date" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DateTimeAxisComponent {
  data = [
    { date: new Date(2024, 0, 1), sales: 40 },
    { date: new Date(2024, 1, 1), sales: 50 },
    { date: new Date(2024, 2, 1), sales: 55 }
  ];

  xAxis = {
    valueType: 'DateTime',
    intervalType: 'Months',
    interval: 1,
    labelFormat: 'MMM'
  };
}

DateTime Axis with Custom Interval

xAxis = {
  valueType: 'DateTime',
  intervalType: 'Days',
  interval: 5,
  labelFormat: 'dd/MM/yyyy'
};

IntervalType Options: Years, Months, Weeks, Days, Hours, Minutes, Seconds

Logarithmic Axis

Logarithmic axis is ideal for data with exponential growth or large value ranges.

Basic Logarithmic Axis

@Component({
  template: `
    <ejs-chart3d [primaryYAxis]="yAxis" [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="value" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class LogarithmicAxisComponent {
  data = [
    { month: 'Jan', value: 100 },
    { month: 'Feb', value: 1000 },
    { month: 'Mar', value: 10000 },
    { month: 'Apr', value: 100000 }
  ];

  xAxis = {
    valueType: 'Category'
  };

  yAxis = {
    valueType: 'Logarithmic',
    logBase: 10,
    title: 'Value (log scale)'
  };
}

Logarithmic Axis with Custom Base

yAxis = {
  valueType: 'Logarithmic',
  logBase: 2,  // Binary logarithm
  minimum: 0,
  maximum: 8
};

Multi-Pane Configuration

Display multiple axes and series in separate panes.

Basic Multi-Pane

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <!-- First pane with primary Y axis -->
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="series1Data" xName="x" yName="y1" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
      
      <!-- Second pane with secondary Y axis -->
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="series2Data" xName="x" yName="y2" yAxisName="secondary" type="Bar">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class MultiPaneComponent {
  series1Data = [{ x: 'A', y1: 40 }];
  series2Data = [{ x: 'A', y2: 50 }];

  xAxis = {
    valueType: 'Category'
  };
}

Axis Common Properties

Title Configuration

xAxis = {
  title: 'Category Label',
  titleStyle: {
    fontFamily: 'Arial',
    fontStyle: 'Normal',
    fontWeight: '600',
    size: '16px',
    color: '#0066cc'
  }
};

Label Formatting

yAxis = {
  labelFormat: '${value}K',  // Custom format
  // OR
  labelFormat: '{value:N2}'   // Decimal places
};

Grid Lines and Ticks

xAxis = {
  majorGridLines: { width: 1, color: '#d3d3d3' },
  minorGridLines: { width: 1, color: '#f0f0f0' },
  majorTickLines: { width: 2, color: '#333' },
  minorTickLines: { width: 1, color: '#999' }
};

Axis Range and Intervals

yAxis = {
  valueType: 'Double',
  minimum: 0,           // Start value
  maximum: 100,         // End value
  interval: 10,         // Major tick interval
  minorTicksPerInterval: 4  // Minor ticks between majors
};

Axis Visibility and Position

xAxis = {
  visible: true,
  opposedPosition: false,  // Position below chart
  placeNextToAxisLine: true
};

Common Axis Patterns

Pattern: Multiple Time Series

When displaying trend data over time:

xAxis = { valueType: 'DateTime', intervalType: 'Months' };
yAxis = { valueType: 'Double', labelFormat: '${value}' };

Pattern: Percentage Comparison

When showing percentages:

yAxis = {
  valueType: 'Double',
  minimum: 0,
  maximum: 100,
  interval: 20,
  labelFormat: '{value}%'
};

Pattern: Scientific Data

When showing exponential growth:

yAxis = { valueType: 'Logarithmic', logBase: 10 };

Selection Guidelines

Axis Labels

This guide covers formatting, positioning, and customizing axis labels in 3D charts.

Table of Contents

• Label Formatting
• Basic Label Format
• Label Format Patterns
• Decimal Places
• Percentage Format
• Currency Format
• Label Positioning
• Label Rotation
• Label Positioning Options
• Vertical Positioning
• Custom Label Templates
• Template-based Labels
• DateTime Label Formats
• Label Styling
• Color and Font
• Grid Line Styling
• Label Display Options
• Hide Labels
• Label Count
• Interval Control
• Common Label Patterns
• Pattern Currency Display
• Pattern Percentage Display
• Pattern Abbreviated Large Numbers
• Pattern Date Range on Category Axis
• Accessibility Considerations
• Performance Tips

Label Formatting

Basic Label Format

Format axis labels with custom patterns:

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-axis-labels',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [primaryYAxis]="yAxis" [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AxisLabelsComponent {
  data = [
    { month: 'Jan', sales: 1000 },
    { month: 'Feb', sales: 1500 }
  ];

  yAxis = {
    labelFormat: '${value}',  // Add currency symbol
    title: 'Sales'
  };

  xAxis = {
    valueType: 'Category'
  };
}

Label Format Patterns

Decimal Places

yAxis = {
  labelFormat: '{value:N2}'  // 2 decimal places
};

Percentage Format

yAxis = {
  labelFormat: '{value}%',
  minimum: 0,
  maximum: 100,
  interval: 20
};

Currency Format

yAxis = {
  labelFormat: '${value}'  // Dollar symbol
  // OR
  labelFormat: '€{value}'  // Euro symbol
};

Label Positioning

Label Rotation

Rotate labels to avoid overlap (useful for long category names):

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      ...
    </ejs-chart3d>
  `
})
export class RotatedLabelsComponent {
  xAxis = {
    valueType: 'Category',
    labelRotationAngle: 45,  // Degrees
    title: 'Categories'
  };
}

Label Positioning Options

xAxis = {
  labelRotationAngle: 45,      // Rotation angle
  labelIntersectAction: 'Trim', // How to handle overlap
  placeNextToAxisLine: true     // Position next to axis
};

labelIntersectAction Options:

• 'Trim': Trim labels
• 'Rotate': Automatically rotate
• 'Hide': Hide overlapping labels
• 'Wrap': Wrap text to multiple lines
• 'MultipleRows': Show in multiple rows

Vertical Positioning

Position labels above or below the axis:

xAxis = {
  labelPosition: 'Inside',   // Inside the chart
  // OR
  labelPosition: 'Outside'   // Outside the chart
};

Custom Label Templates

Template-based Labels

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="date" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class CustomLabelsComponent {
  data = [
    { date: new Date(2024, 0, 1), sales: 40 },
    { date: new Date(2024, 1, 1), sales: 50 }
  ];

  xAxis = {
    valueType: 'DateTime',
    intervalType: 'Months',
    labelFormat: 'MMM yyyy',  // January 2024 style
    title: 'Time Period'
  };
}

DateTime Label Formats

Label Styling

Color and Font

@Component({
  template: `
    <ejs-chart3d [primaryYAxis]="yAxis">
      ...
    </ejs-chart3d>
  `
})
export class StyledLabelsComponent {
  yAxis = {
    labelStyle: {
      fontFamily: 'Arial',
      fontStyle: 'Normal',
      fontWeight: '600',
      size: '14px',
      color: '#0066cc'
    }
  };
}

Grid Line Styling

yAxis = {
  majorGridLines: {
    width: 1,
    color: '#d3d3d3',
    dashArray: '5,5'  // Dashed lines
  },
  minorGridLines: {
    width: 1,
    color: '#f0f0f0'
  }
};

Label Display Options

Hide Labels

xAxis = {
  visible: true,
  labelVisible: false  // Hide all labels
};

Label Count

Control how many labels display:

xAxis = {
  desiredIntervals: 5,  // Approximate number of labels
  valueType: 'Category'
};

Interval Control

yAxis = {
  valueType: 'Double',
  interval: 10,           // Major label interval
  minorTicksPerInterval: 4 // Minor ticks between labels
};

Common Label Patterns

Pattern: Currency Display

For financial data:

yAxis = {
  labelFormat: '${value}',
  title: 'Amount'
};

Pattern: Percentage Display

For ratio/proportion data:

yAxis = {
  labelFormat: '{value}%',
  minimum: 0,
  maximum: 100
};

Pattern: Abbreviated Large Numbers

For millions/billions:

yAxis = {
  labelFormat: '{value}M',  // Millions
  // OR
  labelFormat: '{value}B'   // Billions
};

Pattern: Date Range on Category Axis

For time-based categories:

xAxis = {
  valueType: 'DateTime',
  intervalType: 'Months',
  interval: 1,
  labelFormat: 'MMM yyyy'
};

Accessibility Considerations

Labels should be:

• Clear: Use descriptive, readable text
• Contrasted: Ensure sufficient color contrast
• Readable: Font size ≥ 12px
• Meaningful: Format numbers appropriately for context

Performance Tips

• Reduce label count for dense data using desiredIntervals
• Use labelIntersectAction to prevent overlap
• Avoid long custom templates
• Use simple number formats over complex processing

Chart Types and Configuration

Table of Contents

• Overview
• API Reference
• Column Chart
• Basic Column Chart
• Column Chart with Multiple Series
• Bar Chart
• Basic Bar Chart
• Bar Chart with Multiple Series
• Stacked Column Chart
• Basic Stacked Column
• Stacked Column with Percentage
• Stacked Bar Chart
• Basic Stacked Bar
• Stacked Bar 100% Normalized
• Switching Chart Types
• Series Configuration
• Named Series
• Series with Custom Colors
• Common Patterns
• Pattern: Comparative Analysis with Multiple Series
• Pattern: Composition Analysis
• Pattern: Trend Comparison
• Selection Guidelines
• Performance Notes

Overview

API Reference

📄 Read: references/api-reference.md

The 3D Chart component supports multiple visualization types to represent data in different ways. Each type is optimized for specific use cases:

• Column: Vertical bars, ideal for comparing values across categories
• Bar: Horizontal bars, good for long category names
• Stacked Column: Multiple series stacked vertically, shows composition
• Stacked Bar: Multiple series stacked horizontally, shows composition

Column Chart

The column chart displays vertical bars for each data point. Best for comparing values across categories.

Basic Column Chart

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-column-chart',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [title]="'Quarterly Sales'" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="quarter" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ColumnChartComponent {

  primaryXAxis = {
            valueType: 'Category'
  }
  data = [
    { quarter: 'Q1', sales: 50 },
    { quarter: 'Q2', sales: 65 },
    { quarter: 'Q3', sales: 72 },
    { quarter: 'Q4', sales: 88 }
  ];
}

Column Chart with Multiple Series

Display multiple data series side by side:

@Component({
  template: `
    <ejs-chart3d [title]="'Sales by Region'" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="northSales" name="North" type="Column">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="month" yName="southSales" name="South" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class MultiSeriesColumnComponent {
  data = [
    { month: 'Jan', northSales: 35, southSales: 28 },
    { month: 'Feb', northSales: 28, southSales: 35 },
    { month: 'Mar', northSales: 34, southSales: 32 }
  ];

  primaryXAxis = {
            valueType: 'Category'
  }
}

Bar Chart

Bar charts display horizontal bars, useful when category names are long or you prefer horizontal orientation.

Basic Bar Chart

@Component({
  template: `
    <ejs-chart3d [title]="'Product Sales'" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="product" yName="units" type="Bar">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class BarChartComponent {
  data = [
    { product: 'Laptop', units: 45 },
    { product: 'Desktop', units: 38 },
    { product: 'Monitor', units: 52 },
    { product: 'Keyboard', units: 61 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Bar Chart with Multiple Series

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="product" yName="q1" name="Q1" type="Bar">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="product" yName="q2" name="Q2" type="Bar">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="product" yName="q3" name="Q3" type="Bar">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class MultiSeriesBarComponent {
  data = [
    { product: 'A', q1: 20, q2: 25, q3: 30 },
    { product: 'B', q1: 18, q2: 22, q3: 28 },
    { product: 'C', q1: 25, q2: 28, q3: 32 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Stacked Column Chart

Stacked columns display multiple series on top of each other, showing both individual values and totals.

Basic Stacked Column

@Component({
  template: `
    <ejs-chart3d [title]="'Revenue Composition'" >
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="licensing" name="Licensing" type="StackingColumn">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="month" [primaryXAxis]='primaryXAxis'yName="support" name="Support" type="StackingColumn">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="month" yName="consulting" name="Consulting" type="StackingColumn">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class StackedColumnComponent {
  data = [
    { month: 'Jan', licensing: 40, support: 30, consulting: 20 },
    { month: 'Feb', licensing: 45, support: 35, consulting: 25 },
    { month: 'Mar', licensing: 50, support: 38, consulting: 28 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Stacked Column with Percentage

Display values as percentages of total:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="category" yName="value1" name="Series1" type="StackingColumn100">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="category" yName="value2" name="Series2" type="StackingColumn100">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class StackedColumn100Component {
  data = [
    { category: 'A', value1: 60, value2: 40 },
    { category: 'B', value1: 70, value2: 30 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Stacked Bar Chart

Stacked bars display multiple series side by side (horizontally), showing composition.

Basic Stacked Bar

@Component({
  template: `
    <ejs-chart3d [title]="'Department Budget'" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="department" yName="salaries" name="Salaries" type="StackingBar">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="department" yName="equipment" name="Equipment" type="StackingBar">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="department" yName="training" name="Training" type="StackingBar">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class StackedBarComponent {
  data = [
    { department: 'Engineering', salaries: 60, equipment: 20, training: 10 },
    { department: 'Marketing', salaries: 40, equipment: 30, training: 15 },
    { department: 'Sales', salaries: 50, equipment: 25, training: 12 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Stacked Bar 100% (Normalized)

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="dept" yName="v1" type="StackingBar100">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="dept" yName="v2" type="StackingBar100">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class StackedBar100Component {
  data = [
    { dept: 'A', v1: 30, v2: 70 },
    { dept: 'B', v1: 50, v2: 50 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Switching Chart Types

Allow users to change chart type dynamically:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-chart-type-switcher',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <div>
      <div style="margin-bottom: 20px;">
        <button (click)="changeType('Column')">Column</button>
        <button (click)="changeType('Bar')">Bar</button>
        <button (click)="changeType('StackingColumn')">Stacked Column</button>
        <button (click)="changeType('StackingBar')">Stacked Bar</button>
      </div>
      
      <ejs-chart3d [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" [type]="currentType">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class ChartTypeSwitcherComponent {
  currentType = 'Column';
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 },
    { x: 'C', y: 60 }
  ];

  changeType(type: string) {
    this.currentType = type;
  }

  primaryXAxis = {
    valueType: 'Category'
  }
}

Series Configuration

Named Series

Assign names to series for legend display:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="sales" name="2023 Sales" type="Column">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="month" yName="forecast" name="2024 Forecast" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class NamedSeriesComponent {
  data = [
    { month: 'Jan', sales: 40, forecast: 45 },
    { month: 'Feb', sales: 35, forecast: 42 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Series with Custom Colors

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [fill]="'#FF6B6B'">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ColoredSeriesComponent {
  data = [{ x: 'A', y: 50 }];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Common Patterns

Pattern: Comparative Analysis with Multiple Series

When comparing multiple datasets across categories:

data = [
  { month: 'Jan', product1: 35, product2: 28, product3: 40 },
  { month: 'Feb', product1: 28, product2: 35, product3: 38 }
];

Use Column or Bar type for easy side-by-side comparison.

Pattern: Composition Analysis

When showing how parts make up a whole:

data = [
  { quarter: 'Q1', revenue: 40, expenses: 30, profit: 20 }
];

Use StackingColumn or StackingBar to show composition stacked.

Pattern: Trend Comparison

When showing trends of multiple series:

Use regular Column or Bar with multiple series, not stacked, so you can see each trend clearly.

Selection Guidelines

Performance Notes

• Column/Bar: Efficient for 100+ data points
• Stacking Types: Use with 3-5 series maximum for clarity
• Many Series: Consider grouping or filtering data

Data Labels

Table of Contents

• Overview
• API Reference
• Enable Data Labels
• Basic Data Labels
• Data Label Configuration
• Label Positioning
• Position Options
• Example Top-Positioned Labels
• Example Auto-Positioned Labels
• Label Formatting
• Format Numeric Values
• Decimal Places
• Custom Templates
• HTML Template
• Conditional Formatting
• Visibility Control
• Hide Specific Labels
• Show Labels Only for MaxMin Values
• Data Label Styling
• Font and Color
• Background and Border
• Common Patterns
• Pattern 1 Simple Value Labels
• Pattern 2 Currency Values
• Pattern 3 Percentage Labels
• Pattern 4 Combined Labels
• Performance Considerations
• Accessibility Notes

Overview

API Reference

📄 Read: references/api-reference.md

Data labels display values directly on chart points, making exact values immediately visible without hovering.

Enable Data Labels

Basic Data Labels

Enable labels for all data points:

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-data-labels',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="month" 
          yName="sales" 
          type="Column"
          [marker]="marker">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DataLabelsComponent {
  data = [
    { month: 'Jan', sales: 40 },
    { month: 'Feb', sales: 50 },
    { month: 'Mar', sales: 45 }
  ];

  marker = {
    dataLabel: { visible: true }
  };

  primaryXAxis = {
    valueType: 'Category'
  }
}

Data Label Configuration

marker = {
  dataLabel: {
    visible: true,
    position: 'Top',      // Position
    font: { size: '14px' } // Font size
  }
};

Label Positioning

Position Options

Available positions for data labels:

• `'Top'`: Above the point
• `'Bottom'`: Below the point
• `'Left'`: Left of the point
• `'Right'`: Right of the point
• `'Middle'`: Center of the point
• `'Auto'`: Automatically chosen

Example: Top-Positioned Labels

marker = {
  dataLabel: {
    visible: true,
    position: 'Top'
  }
};

Example: Auto-Positioned Labels

marker = {
  dataLabel: {
    visible: true,
    position: 'Auto'  // Optimally placed to avoid overlap
  }
};

Label Formatting

Format Numeric Values

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [marker]="marker">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class FormattedLabelsComponent {
  data = [
    { x: 'A', y: 1000 },
    { x: 'B', y: 1500 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }

  marker = {
    dataLabel: {
      visible: true,
      format: '${value}',  // Currency
      // OR
      format: '{value}%',  // Percentage
      // OR
      format: '{value}K'   // Thousands
    }
  };
}

Decimal Places

marker = {
  dataLabel: {
    visible: true,
    format: '{value:N2}'  // 2 decimal places
  }
};

Custom Templates

HTML Template

Create custom label appearance:

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [marker]="marker">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class TemplateLabelsComponent {
  data = [
    { x: 'A', y: 100, category: 'High' },
    { x: 'B', y: 50, category: 'Medium' }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }

  marker = {
    dataLabel: {
      visible: true,
      template: '<div><b>${x}</b>: ${y}</div>'
    }
  };
}

Conditional Formatting

Display labels only for specific values:

marker = {
  dataLabel: {
    visible: true,
    format: '{value}',
    // Only show labels for values > 50
    textMappingName: 'category'
  }
};

Visibility Control

Hide Specific Labels

data = [
  { month: 'Jan', sales: 40, showLabel: true },
  { month: 'Feb', sales: 50, showLabel: false },
  { month: 'Mar', sales: 45, showLabel: true }
];

marker = {
  dataLabel: {
    visible: true
  }
};

Show Labels Only for Max/Min Values

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="month" 
          yName="sales" 
          type="Column"
          [marker]="marker">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class MinMaxLabelsComponent {
  data = [
    { month: 'Jan', sales: 40 },
    { month: 'Feb', sales: 80 },  // Max
    { month: 'Mar', sales: 45 },
    { month: 'Apr', sales: 20 }   // Min
  ];

  primaryXAxis = {
    valueType: 'Category'
  }

  marker = {
    dataLabel: {
      visible: true,
      format: '{value}',
      name: 'sales'
    }
  };
}

Data Label Styling

Font and Color

marker = {
  dataLabel: {
    visible: true,
    font: {
      fontFamily: 'Arial',
      fontStyle: 'Normal',
      fontWeight: '600',
      size: '14px',
      color: '#0066cc'
    }
  }
};

Background and Border

marker = {
  dataLabel: {
    visible: true,
    border: {
      color: '#999',
      width: 1
    },
    fill: '#fff9e6',
    opacity: 0.8
  }
};

Common Patterns

Pattern 1: Simple Value Labels

For bar and column charts showing quantities:

marker = {
  dataLabel: {
    visible: true,
    position: 'Top',
    format: '{value}'
  }
};

Pattern 2: Currency Values

For financial data:

marker = {
  dataLabel: {
    visible: true,
    position: 'Top',
    format: '${value}',
    font: { size: '12px' }
  }
};

Pattern 3: Percentage Labels

For composition charts:

marker = {
  dataLabel: {
    visible: true,
    position: 'Middle',
    format: '{value}%'
  }
};

Pattern 4: Combined Labels

Show both category and value:

marker = {
  dataLabel: {
    visible: true,
    format: '${x}: ${value}',
    position: 'Top'
  }
};

Performance Considerations

• Many Points: Hide labels or use sparse positioning
• Small Charts: Use smaller font sizes
• Dense Data: Use Auto position for collision avoidance
• Mobile: Consider label visibility at smaller screen sizes

Accessibility Notes

Data labels improve readability by:

• Eliminating need to read axis values
• Making exact values clear
• Supporting users with vision challenges

Ensure:

• Sufficient contrast ratio (4.5:1 minimum)
• Font size readable (12px minimum)
• Labels don't overlap critically

3D Chart Dimensions

Configure 3D perspective, depth, rotation, and chart dimensions.

Table of Contents

• Chart Size
• Set Chart Width and Height
• Responsive Sizing
• 3D Perspective Controls
• Rotation
• Tilt
• Depth
• Perspective Projection
• Field of View
• Wall Styling
• Wall Properties
• Isometric View
• Set Isometric Angles
• Common 3D Configurations
• Configuration 1 Standard 3D View
• Configuration 2 Front View Nearly 2D
• Configuration 3 Isometric View
• Configuration 4 High-Angle View
• Dynamically Adjust 3D Settings
• Aspect Ratio Control
• Maintain Aspect Ratio
• Performance Optimization
• Accessibility Considerations

Chart Size

Set Chart Width and Height

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-dimensions',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis' [width]="'800px'" [height]="'600px'">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DimensionsComponent {
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  primaryXAxis = {
    valueType: 'Category'
  }
}

Responsive Sizing

@Component({
  template: `
    <div style="width: 100%; height: 500px;">
      <ejs-chart3d [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class ResponsiveChartComponent {
  primaryXAxis = {
    valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];
}

3D Perspective Controls

Rotation

Rotate the 3D chart along different axes:

@Component({
  template: `
    <ejs-chart3d [rotation]="45" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class RotationComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Tilt

Adjust vertical perspective:

@Component({
  template: `
    <ejs-chart3d [tilt]="30" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class TiltComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Depth

Control the depth/thickness of 3D elements:

@Component({
  template: `
    <ejs-chart3d [depth]="100" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DepthComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Perspective Projection

Field of View

Control the perspective angle:

@Component({
  template: `
    <ejs-chart3d [perspectiveAngle]="50" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class PerspectiveComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Wall Styling

Wall Properties

@Component({
  template: `
    <ejs-chart3d [wallSize]="1" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class WallComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Isometric View

Set Isometric Angles

@Component({
  template: `
    <ejs-chart3d [rotation]="45" [tilt]="45" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class IsometricComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Common 3D Configurations

Configuration 1: Standard 3D View

rotation = 45;
tilt = 15;
depth = 100;

Configuration 2: Front View (Nearly 2D)

rotation = 0;
tilt = 0;
depth = 20;

Configuration 3: Isometric View

rotation = 45;
tilt = 45;
depth = 100;

Configuration 4: High-Angle View

rotation = 30;
tilt = 60;
depth = 80;

Dynamically Adjust 3D Settings

import { Component, ViewChild } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-dynamic-3d',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <div>
      <label>
        Rotation: 
        <input type="range" min="0" max="360" [(ngModel)]="rotation" (change)="updateChart()">
        {{ rotation }}°
      </label>
      
      <label>
        Tilt: 
        <input type="range" min="-90" max="90" [(ngModel)]="tilt" (change)="updateChart()">
        {{ tilt }}°
      </label>
      
      <label>
        Depth: 
        <input type="range" min="10" max="200" [(ngModel)]="depth" (change)="updateChart()">
        {{ depth }}
      </label>
      
      <ejs-chart3d 
        #chart [primaryXAxis]='primaryXAxis'
        [rotation]="rotation" 
        [tilt]="tilt" 
        [depth]="depth">
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class Dynamic3DComponent {
  @ViewChild('chart') chart!: Chart3DComponent;
  
  rotation = 45;
  tilt = 15;
  depth = 100;

  primaryXAxis = {
    valueType: 'Category'
  }
  
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  updateChart() {
    if (this.chart) {
      this.chart.refresh();
    }
  }
}

Aspect Ratio Control

Maintain Aspect Ratio

@Component({
  template: `
    <div style="aspect-ratio: 16 / 9; width: 100%;">
      <ejs-chart3d [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class AspectRatioComponent {
  primaryXAxis = {
    valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];
}

Performance Optimization

• Keep depth reasonable: 50-150 for balance
• Simplify rotation/tilt: Avoid rapid changes
• Disable shadows: For better performance
• Reduce data points: With complex 3D settings

Accessibility Considerations

3D perspectives can be challenging for:

• Screen reader users (provide data summary)
• Colorblind users (use patterns, not color alone)
• Motion-sensitive users (avoid rapid rotation)

Consider providing a 2D alternative or summary.

Getting Started with Angular 3D Chart

This guide walks through setting up a Syncfusion 3D Chart in an Angular application.

Table of Contents

• Prerequisites
• Installation
• Step 1: Install Syncfusion Charts Package
• Step 2: Import Required Modules
• Step 3: Import Styles
• Create Your First 3D Chart
• Basic Column Chart
• Component Configuration
• Adding Axis Labels
• Adding a Title
• CSS Imports by Theme
• Minimal Working Example
• Common Setup Issues

Prerequisites

• Angular 21+ (standalone architecture)
• Node.js and npm installed
• Basic Angular knowledge

Installation

Step 1: Install Syncfusion Charts Package

npm install @syncfusion/ej2-angular-charts

Step 2: Import Required Modules

In your component file, import the Chart3D component and related directives:

import { Component } from '@angular/core';
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
  template: ``
})
export class AppComponent {}

Step 3: Import Styles

Add the Syncfusion Chart3D styles to your global styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/material.css';

Alternatively, import in your component's styles array:

@Component({
  selector: 'app-root',
  standalone: true,
  styleUrls: ['./app.component.css'],
  imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
  template: ``
})

Create Your First 3D Chart

Basic Column Chart

import { Component, ViewEncapsulation } from '@angular/core';
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [Chart3DAllModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]='data' xName="x" yName="y" type='Column'>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ChartComponent {
  public primaryXAxis = {
        valueType: 'Category'
    }
  public data = [
    { x: 'USA', y: 46 },
    { x: 'GBR', y: 27 },
    { x: 'CHN', y: 26 }
  ];
}

This creates a basic 3D column chart displaying three data points.

Component Configuration

Adding Axis Labels

Configure X and Y axes to display labels:

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [Chart3DAllModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis" [primaryYAxis]="yAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="country" yName="gold" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ChartComponent {
  data = [
    { country: 'USA', gold: 46 },
    { country: 'GBR', gold: 27 },
    { country: 'CHN', gold: 26 }
  ];

  xAxis = { valueType: 'Category', title: 'Countries' };
  yAxis = { title: 'Gold Medals' };
}

Adding a Title

Add a title to your chart:

@Component({
  template: `
    <ejs-chart3d [title]="Olympic Gold Medals">
      ...
    </ejs-chart3d>
  `
})
export class ChartComponent { }

CSS Imports by Theme

Choose your preferred Syncfusion theme:

Material Theme (default):

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/material.css';

Bootstrap Theme:

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/bootstrap.css';

Tailwind Theme:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/tailwind.css';

Minimal Working Example

Create a new component with this complete example:

import { Component } from '@angular/core';
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-minimal-chart',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <div style="width: 100%; height: 500px;">
      <ejs-chart3d [title]="Sales by Quarter" [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="sales" xName="quarter" yName="amount" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class MinimalChartComponent {
    primaryXAxis = {
        valueType: 'Category'
    }
  sales = [
    { quarter: 'Q1', amount: 18 },
    { quarter: 'Q2', amount: 28 },
    { quarter: 'Q3', amount: 30 },
    { quarter: 'Q4', amount: 35 }
  ];
}

Add this to your app component, and you'll see a working 3D column chart.

Common Setup Issues

Issue: Chart not displaying

• Solution: Ensure styles are imported in styles.css or component styles
• Check: Data source is not empty
• Verify: xName and yName properties match data object keys

Issue: "Chart3DComponent not found"

• Solution: Import in component's imports array: imports: [Chart3DComponent, ...]
• Ensure: Package is installed: npm install @syncfusion/ej2-angular-charts

Issue: Styling looks broken

• Solution: Import theme CSS before Syncfusion CSS
• Try: Material theme as default for testing

Legend

Configure and customize chart legends for series identification.

Table of Contents

• Enable Legend
• Basic Legend
• Disable Legend
• Legend Positioning
• Position Options
• Example Positions
• Legend Customization
• Custom Legend Height and Width
• Legend Padding and Margin
• Legend Styling
• Background and Border
• Shape and Icon Customization
• Legend Label Formatting
• Custom Labels
• Legend Interactions
• Enable Legend Selection
• Legend with Multiple Series
• Multi-Series Chart
• Legend Wrapping
• Arrange Legend Items in Columns
• Common Legend Patterns
• Pattern 1 Top Legend with Multiple Series
• Pattern 2 Right Legend Default
• Pattern 3 Bottom Legend with Horizontal Layout
• Accessibility Considerations
• Performance Notes
• Legend with Data Labels

Enable Legend

Basic Legend

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-legend',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [legendSettings]="legend" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="series1" xName="x" yName="y" name="Series 1" type="Column">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="series2" xName="x" yName="y" name="Series 2" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class LegendComponent {
  series1 = [{ x: 'A', y: 40 }];
  series2 = [{ x: 'A', y: 35 }];

  legend = {
    visible: true
  };

  primaryXAxis = {
        valueType: 'Category'
  }
}

Disable Legend

legend = {
  visible: false
};

Legend Positioning

Position Options

Available positions for the legend:

• `'Right'`: Right side (default)
• `'Left'`: Left side
• `'Top'`: Top
• `'Bottom'`: Bottom
• `'Custom'`: Custom position

Example Positions

// Right side (default)
legend = {
  visible: true,
  position: 'Right'
};

// Top side
legend = {
  visible: true,
  position: 'Top'
};

// Bottom side
legend = {
  visible: true,
  position: 'Bottom'
};

// Left side
legend = {
  visible: true,
  position: 'Left'
};

Legend Customization

Custom Legend Height and Width

@Component({
  template: `
    <ejs-chart3d [legendSettings]="legend" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" name="Data" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class CustomLegendComponent {
  primaryXAxis = {
        valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];

  legend = {
    visible: true,
    width: '200px',
    height: '100px',
    position: 'Right'
  };
}

Legend Padding and Margin

legend = {
  visible: true,
  padding: 10,
  margin: { left: 10, right: 10, top: 10, bottom: 10 }
};

Legend Styling

Background and Border

@Component({
  template: `
    <ejs-chart3d [legendSettings]="legend" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" name="Series" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class StyledLegendComponent {
  primaryXAxis = {
        valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];

  legend = {
    visible: true,
    background: '#f9f9f9',
    border: { color: '#999', width: 1 },
    textStyle: {
      fontFamily: 'Arial',
      fontStyle: 'Normal',
      fontWeight: '400',
      size: '14px',
      color: '#333'
    }
  };
}

Shape and Icon Customization

legend = {
  visible: true,
  shape: 'Rectangle',  // Circle, Rectangle, Triangle, Diamond
  shapeWidth: 10,
  shapeHeight: 10
};

Legend Label Formatting

Custom Labels

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="series1" xName="x" yName="y" name="Q1 Sales" type="Column">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="series2" xName="x" yName="y" name="Q2 Sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class CustomLabelComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  series1 = [{ x: 'A', y: 40 }];
  series2 = [{ x: 'A', y: 35 }];
}

The series name property is used as the legend label. To change, update the name:

<e-chart3d-series 
  [dataSource]="series1" 
  xName="x" 
  yName="y" 
  name="First Quarter" 
  type="Column">
</e-chart3d-series>

Legend Interactions

Enable Legend Selection

Click legend items to toggle series visibility:

@Component({
  template: `
    <ejs-chart3d [legendSettings]="legend" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="series1" 
          xName="x" 
          yName="y" 
          name="Series 1" 
          type="Column">
        </e-chart3d-series>
        <e-chart3d-series 
          [dataSource]="series2" 
          xName="x" 
          yName="y" 
          name="Series 2" 
          type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class InteractiveLegendComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  series1 = [{ x: 'A', y: 40 }];
  series2 = [{ x: 'A', y: 35 }];

  legend = {
    visible: true,
    toggleVisibility: true  // Click to toggle series
  };
}

Legend with Multiple Series

Multi-Series Chart

@Component({
  template: `
    <ejs-chart3d [legendSettings]="legend" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="sales2023" name="2023 Sales" type="Column">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="month" yName="sales2024" name="2024 Sales" type="Column">
        </e-chart3d-series>
        <e-chart3d-series [dataSource]="data" xName="month" yName="forecast" name="Forecast" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class MultiSeriesLegendComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [
    { month: 'Jan', sales2023: 40, sales2024: 45, forecast: 50 },
    { month: 'Feb', sales2023: 35, sales2024: 42, forecast: 48 }
  ];

  legend = {
    visible: true,
    position: 'Bottom'
  };
}

Legend Wrapping

Arrange Legend Items in Columns

legend = {
  visible: true,
  position: 'Right',
  width: '150px'  // Wrap items when width is limited
};

Common Legend Patterns

Pattern 1: Top Legend with Multiple Series

For wide charts:

legend = {
  visible: true,
  position: 'Top'
};

Pattern 2: Right Legend (Default)

Standard layout:

legend = {
  visible: true,
  position: 'Right'
};

Pattern 3: Bottom Legend with Horizontal Layout

For dashboard layouts:

legend = {
  visible: true,
  position: 'Bottom'
};

Accessibility Considerations

Legend should:

• Be labeled: Clear series names
• Have contrast: 4.5:1 minimum ratio
• Be interactive: Keyboard accessible
• Be positioned: Logically near chart

Performance Notes

• Keep legend labels concise
• Limit number of series (8-10 maximum for clarity)
• Use simple shapes and styling
• Consider hiding legend on mobile with toggle

Legend with Data Labels

Show both legend and data labels for clarity:

@Component({
  template: `
    <ejs-chart3d [legendSettings]="legend" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          name="Series" 
          type="Column"
          [marker]="marker">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class CombinedLegendComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];

  legend = { visible: true };
  marker = { dataLabel: { visible: true } };
}

Print and Export

Export 3D charts as images or PDFs, and enable printing functionality.

Table of Contents

• Export Formats
• Export as Image
• Export Configuration
• Export with Custom Filename
• Export with Size Options
• Print Functionality
• Basic Print
• Print with Title
• Export Events
• Handle Export Completion
• Common Export Patterns
• Pattern 1: Export with Multiple Formats
• Pattern 2: Batch Export Multiple Charts
• Pattern 3: Export with Metadata
• Export Format Guidelines
• PNG Export
• SVG Export
• PDF Export
• Print Considerations
• Print-Friendly Styling
• Print Multiple Pages
• Mobile Export Considerations
• Performance Notes
• Accessibility in Exports

Export Formats

Export as Image

Export chart as PNG, SVG, or PDF:

import { Component, ViewChild } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-print-export',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <div>
      <button (click)="exportPNG()">Export as PNG</button>
      <button (click)="exportSVG()">Export as SVG</button>
      <button (click)="exportPDF()">Export as PDF</button>
      <button (click)="printChart()">Print</button>
      
      <ejs-chart3d #chart [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class PrintExportComponent {
  @ViewChild('chart') chart!: Chart3DComponent;

  primaryXAxis = {
        valueType: 'Category'
  }

  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  exportPNG() {
    this.chart.export('PNG', 'chart');
  }

  exportSVG() {
    this.chart.export('SVG', 'chart');
  }

  exportPDF() {
    this.chart.export('PDF', 'chart');
  }

  printChart() {
    this.chart.print();
  }
}

Export Configuration

Export with Custom Filename

exportPNG() {
  this.chart.export('PNG', 'sales-chart-2024');  // Creates 'sales-chart-2024.png'
}

exportPDF() {
  this.chart.export('PDF', 'quarterly-report');  // Creates 'quarterly-report.pdf'
}

Export with Size Options

@Component({
  template: `
    <ejs-chart3d #chart [width]="'1000px'" [height]="'600px'" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class CustomSizeExportComponent {
  @ViewChild('chart') chart!: Chart3DComponent;

  primaryXAxis = {
        valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];

  exportHighResolution() {
    // Export at current size
    this.chart.export('PNG', 'chart-hires');
  }
}

Print Functionality

Basic Print

printChart() {
  this.chart.print();
}

Print with Title

@Component({
  template: `
    <div #printArea>
      <h2>Sales Report - Q1 2024</h2>
      <ejs-chart3d #chart [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
    <button (click)="printWithTitle()">Print Report</button>
  `
})
export class PrintWithTitleComponent {
  @ViewChild('chart') chart!: Chart3DComponent;
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
        valueType: 'Category'
  }

  printWithTitle() {
    this.chart.print();
  }
}

Export Events

Handle Export Completion

@Component({
  template: `
    <ejs-chart3d 
      #chart [primaryXAxis]='primaryXAxis'
      (beforePrint)="onBeforeExport($event)"
      (afterExport)="onAfterExport($event)">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class ExportEventComponent {
  @ViewChild('chart') chart!: Chart3DComponent;
  primaryXAxis = {
        valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];

  onBeforeExport(args: any) {
    console.log('Export starting...', args);
  }

  onAfterExport(args: any) {
    console.log('Export completed!', args);
  }
}

Common Export Patterns

Pattern 1: Export with Multiple Formats

Create buttons for different formats:

@Component({
  template: `
    <div>
      <div style="margin-bottom: 20px;">
        <button (click)="exportPNG()">📥 PNG Image</button>
        <button (click)="exportSVG()">📥 SVG Vector</button>
        <button (click)="exportPDF()">📥 PDF Document</button>
        <button (click)="printChart()">🖨️ Print</button>
      </div>
      
      <ejs-chart3d #chart [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class ExportButtonsComponent {
  @ViewChild('chart') chart!: Chart3DComponent;
  data = [{ x: 'A', y: 40 }];

  primaryXAxis = {
        valueType: 'Category'
  }

  exportPNG() {
    const timestamp = new Date().toISOString().split('T')[0];
    this.chart.export('PNG', `chart-${timestamp}`);
  }

  exportSVG() {
    this.chart.export('SVG', `chart-${Date.now()}`);
  }

  exportPDF() {
    this.chart.export('PDF', `chart-report`);
  }

  printChart() {
    this.chart.print();
  }
}

Pattern 2: Batch Export Multiple Charts

@Component({
  template: `
    <div>
      <button (click)="exportAll()">Export All Charts</button>
      
      <div>
        <h3>Chart 1</h3>
        <ejs-chart3d #chart1 [primaryXAxis]='primaryXAxis'>
          <e-chart3d-series-collection>
            <e-chart3d-series [dataSource]="data1" xName="x" yName="y" type="Column">
            </e-chart3d-series>
          </e-chart3d-series-collection>
        </ejs-chart3d>
      </div>
      
      <div>
        <h3>Chart 2</h3>
        <ejs-chart3d #chart2 [primaryXAxis]='primaryXAxis'>
          <e-chart3d-series-collection>
            <e-chart3d-series [dataSource]="data2" xName="x" yName="y" type="Column">
            </e-chart3d-series>
          </e-chart3d-series-collection>
        </ejs-chart3d>
      </div>
    </div>
  `
})
export class BatchExportComponent {
  @ViewChild('chart1') chart1!: Chart3DComponent;
  @ViewChild('chart2') chart2!: Chart3DComponent;

  primaryXAxis = {
        valueType: 'Category'
  }

  data1 = [{ x: 'A', y: 40 }];
  data2 = [{ x: 'B', y: 50 }];

  exportAll() {
    this.chart1.export('PNG', 'chart-1');
    setTimeout(() => {
      this.chart2.export('PNG', 'chart-2');
    }, 500);
  }
}

Pattern 3: Export with Metadata

Add context when exporting:

exportWithMetadata() {
  const timestamp = new Date().toLocaleString();
  const filename = `sales-chart-${timestamp.split(' ')[0]}`;
  this.chart.export('PDF', filename);
  
  // Log export
  console.log(`Exported: ${filename}`);
}

Export Format Guidelines

PNG Export

• Best for: Web display, screenshots
• Quality: Good for most uses
• Size: Smaller file size

SVG Export

• Best for: Scaling to any size
• Quality: Crisp at any resolution
• Size: Larger file size, scalable

PDF Export

• Best for: Reports, documents
• Quality: High quality, printable
• Size: Depends on complexity

Print Considerations

Print-Friendly Styling

@media print {
  .no-print {
    display: none;
  }
  
  .e-chart3d {
    page-break-inside: avoid;
  }
}

Print Multiple Pages

printMultipleCharts() {
  const printWindow = window.open('', '', 'height=600,width=800');
  if (printWindow) {
    printWindow.document.write('<html><body>');
    printWindow.document.write('<h1>Report</h1>');
    
    // Add charts
    this.chart1.print();
    this.chart2.print();
    
    printWindow.document.write('</body></html>');
    printWindow.print();
  }
}

Mobile Export Considerations

• SVG: Best for responsive scaling
• PNG: Ensure sufficient resolution
• PDF: May be constrained by screen size

Performance Notes

• Export operations are CPU-intensive
• Disable animations before export for faster processing
• Large charts may take longer to export
• Consider compression for PNG files

Accessibility in Exports

• Exported files should maintain readability
• Use high contrast for printing
• Include alt text in PDFs when possible
• Test exported files for accessibility

Selection

Enable and configure point and series selection in 3D charts.

Table of Contents

• Enable Selection
• Basic Point Selection
• Selection Modes
• Single Point Selection
• Series Selection
• Cluster Selection
• Multiple Point Selection
• Selection Examples
• Point Selection with Styling
• Series Selection
• Selection Styling
• Custom Selection Colors
• Selection Events
• Handle Selection Changes
• Track Selected Items
• Highlight on Hover
• Enable Highlight
• Programmatic Selection
• Select by Index
• Common Selection Patterns
• Pattern 1: Single Selection with Details
• Pattern 2: Multi-Selection for Comparison
• Pattern 3: Series-Level Actions
• Accessibility Considerations
• Performance Notes

Enable Selection

Basic Point Selection

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-selection',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column" [selectionMode]="'Point'">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class SelectionComponent {
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];
}

Selection Modes

Single Point Selection

Select one point at a time:

selectionMode = 'Point'

Series Selection

Select entire series:

selectionMode = 'Series'

Cluster Selection

Select all points in a cluster:

selectionMode = 'Cluster'

Multiple Point Selection

Select multiple points (Ctrl+Click):

selectionMode = 'MultiPointSelect'

Selection Examples

Point Selection with Styling

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [selectionMode]="'Point'"
          [selectedDataIndexes]="selectedIndices">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class PointSelectionComponent {
  primaryXAxis = {
        valueType: 'Category'
  }

  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 },
    { x: 'C', y: 60 }
  ];

  selectedIndices = [{ series: 0, point: 1 }];  // Select point B
}

Series Selection

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="series1" 
          xName="x" 
          yName="y" 
          type="Column"
          name="Series 1"
          [selectionMode]="'Series'">
        </e-chart3d-series>
        <e-chart3d-series 
          [dataSource]="series2" 
          xName="x" 
          yName="y" 
          type="Column"
          name="Series 2"
          [selectionMode]="'Series'">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class SeriesSelectionComponent {
  series1 = [{ x: 'A', y: 40 }];
  series2 = [{ x: 'A', y: 35 }];
  primaryXAxis = {
        valueType: 'Category'
  }
}

Selection Styling

Custom Selection Colors

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [selectionMode]="'Point'"
          [selectionStyle]="selectionStyle">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class SelectionStyleComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  selectionStyle = {
    fill: '#ff0000',      // Selected color
    opacity: 0.8,
    border: { color: '#333', width: 2 }
  };
}

Selection Events

Handle Selection Changes

@Component({
  template: `
    <ejs-chart3d (pointRender)="onPointSelect($event)" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [selectionMode]="'Point'">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class SelectionEventComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 }
  ];

  onPointSelect(args: any) {
    console.log('Selected point:', args);
  }
}

Track Selected Items

@Component({
  template: `
    <div>
      <div>Selected: {{ selectedItems }}</div>
      <ejs-chart3d (pointRender)="trackSelection($event)" [primaryXAxis]='primaryXAxis'>
        <e-chart3d-series-collection>
          <e-chart3d-series 
            [dataSource]="data" 
            xName="x" 
            yName="y" 
            type="Column"
            [selectionMode]="'MultiPointSelect'">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class TrackSelectionComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 },
    { x: 'C', y: 60 }
  ];

  selectedItems = '';

  trackSelection(args: any) {
    if (args.selected) {
      this.selectedItems = `Point ${args.data.x}: ${args.data.y}`;
    }
  }
}

Highlight on Hover

Enable Highlight

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Column"
          [highlight]="highlight">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class HighlightComponent {
  primaryXAxis = {
        valueType: 'Category'
  }
  data = [{ x: 'A', y: 40 }];

  highlight = {
    enable: true,
    color: 'rgba(200, 200, 200, 0.5)'  // Highlight color on hover
  };
}

Programmatic Selection

Select by Index

@Component({
  template: `
    <div>
      <button (click)="selectPoint(1)">Select Point B</button>
      <button (click)="clearSelection()">Clear Selection</button>
      
      <ejs-chart3d #chart>
        <e-chart3d-series-collection>
          <e-chart3d-series 
            [dataSource]="data" 
            xName="x" 
            yName="y" 
            type="Column"
            [selectionMode]="'Point'">
          </e-chart3d-series>
        </e-chart3d-series-collection>
      </ejs-chart3d>
    </div>
  `
})
export class ProgrammaticSelectionComponent {
  @ViewChild('chart') chart!: Chart3DComponent;

  primaryXAxis = {
        valueType: 'Category'
  }

  data = [
    { x: 'A', y: 40 },
    { x: 'B', y: 50 },
    { x: 'C', y: 60 }
  ];

  selectPoint(index: number) {
    if (this.chart) {
      this.chart.selection([{ series: 0, point: index }]);
    }
  }

  clearSelection() {
    if (this.chart) {
      this.chart.selection([]);
    }
  }
}

Common Selection Patterns

Pattern 1: Single Selection with Details

Show details for selected point:

selectionMode = 'Point';

onSelect(args: any) {
  this.selectedData = args.data;
  this.showDetailsPanel = true;
}

Pattern 2: Multi-Selection for Comparison

Allow selecting multiple points:

selectionMode = 'MultiPointSelect';
selectedPoints: any[] = [];

onSelect(args: any) {
  if (args.selected) {
    this.selectedPoints.push(args.data);
  }
}

Pattern 3: Series-Level Actions

Act on entire series:

selectionMode = 'Series';

onSeriesSelect(args: any) {
  console.log(`Series ${args.series.name} selected`);
}

Accessibility Considerations

Selection should be:

• Keyboard accessible: Tab/Arrow keys to navigate
• Visible: Clear visual feedback
• Announced: Screen reader compatible
• Intuitive: Follow standard UI patterns

Performance Notes

• Keep selection styling simple
• Avoid complex calculations on selection
• Cache selected indices
• Consider debouncing selection events for large datasets

Tooltips

Enable and customize interactive tooltips for 3D charts.

Table of Contents

• Overview
• API Reference
• Enable Tooltips
• Basic Tooltip
• Disable Tooltips
• Tooltip Formatting
• Default Format
• Custom Format Patterns
• Example Formats
• Tooltip Templates
• HTML Template
• Dynamic Template
• Tooltip Styling
• Background and Border
• Tooltip Offset
• Tooltip Behavior
• Shared Tooltip
• Persistent Tooltip
• Show Delay
• Tooltip Events
• Show Tooltip on Click
• Common Tooltip Patterns
• Pattern 1: Currency Display
• Pattern 2: Category and Value
• Pattern 3: Multi-Series Comparison
• Pattern 4: Rich Information
• Accessibility Considerations
• Performance Tips

Overview

API Reference

📄 Read: references/api-reference.md

Enable Tooltips

Basic Tooltip

import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-tooltip',
  standalone: true,
  imports: [Chart3DAllModule],
  template: `
    <ejs-chart3d [tooltip]="tooltip">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class TooltipComponent {
  data = [
    { month: 'Jan', sales: 40 },
    { month: 'Feb', sales: 50 }
  ];

  tooltip = {
    enable: true
  };
}

Disable Tooltips

tooltip = {
  enable: false
};

Tooltip Formatting

Default Format

tooltip = {
  enable: true,
  format: '${series.name} - ${point.x} : ${point.y}'
};

Custom Format Patterns

Example Formats

// Simple value tooltip
tooltip = {
  enable: true,
  format: '${point.y}'
};

// Category and value
tooltip = {
  enable: true,
  format: '${point.x}: ${point.y}'
};

// Currency format
tooltip = {
  enable: true,
  format: '${point.x}: ${point.y}K'
};

// Multi-line format
tooltip = {
  enable: true,
  format: '<b>${point.x}</b><br>Sales: ${point.y}'
};

Tooltip Templates

HTML Template

Create rich-formatted tooltips:

@Component({
  template: `
    <ejs-chart3d [tooltip]="tooltip" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class TemplateTooltipComponent {

  primaryXAxis = {
        valueType: 'Category'
  }

  data = [
    { month: 'Jan', sales: 40 },
    { month: 'Feb', sales: 50 }
  ];

  tooltip = {
    enable: true,
    template: '<div><strong>${point.x}</strong><br>Sales: $${point.y}K</div>'
  };
}

Dynamic Template

tooltip = {
  enable: true,
  template: '<div style="background: #f0f0f0; padding: 8px; border-radius: 4px;">' +
            '<b>${point.x}</b><br>' +
            '<span style="color: #0066cc;">Revenue: $${point.y}K</span><br>' +
            '<span style="color: #999;">Click to see details</span>' +
            '</div>'
};

Tooltip Styling

Background and Border

@Component({
  template: `
    <ejs-chart3d [tooltip]="tooltip" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class StyledTooltipComponent {

  primaryXAxis = {
        valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];

  tooltip = {
    enable: true,
    fill: '#f9f9f9',
    border: { color: '#999', width: 1 },
    textStyle: {
      fontFamily: 'Arial',
      fontStyle: 'Normal',
      fontWeight: '400',
      size: '14px',
      color: '#333'
    }
  };
}

Tooltip Offset

tooltip = {
  enable: true,
  shared: false,
  duration: 200,
  offset: 10  // Distance from pointer
};

Tooltip Behavior

Shared Tooltip

Show one tooltip for all series at same X value:

tooltip = {
  enable: true,
  shared: true
};

Persistent Tooltip

tooltip = {
  enable: true,
  duration: 3000  // Display for 3 seconds
};

Show Delay

tooltip = {
  enable: true,
  showDelay: 500  // Wait 500ms before showing
};

Tooltip Events

Show Tooltip on Click

@Component({
  template: `
    <ejs-chart3d [tooltip]="tooltip" (pointRender)="onPointRender($event)" [primaryXAxis]='primaryXAxis'>
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="data" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class TooltipEventComponent {
  primaryXAxis = {
        valueType: 'Category'
  }

  data = [{ x: 'A', y: 40 }];

  tooltip = {
    enable: true
  };

  onPointRender(args: any) {
    // Customize tooltip on render
    if (args.data.y > 50) {
      args.tooltip.template = '<strong>High Value: ${point.y}</strong>';
    }
  }
}

Common Tooltip Patterns

Pattern 1: Currency Display

For financial data:

tooltip = {
  enable: true,
  format: '<b>${point.x}</b><br>Amount: $${point.y}K'
};

Pattern 2: Category and Value

For simple data display:

tooltip = {
  enable: true,
  format: '${point.x}<br>Value: ${point.y}'
};

Pattern 3: Multi-Series Comparison

Show all series values:

tooltip = {
  enable: true,
  shared: true,
  format: '<b>${point.x}</b><br>${series.name}: ${point.y}'
};

Pattern 4: Rich Information

Include additional context:

tooltip = {
  enable: true,
  template: '<div style="padding: 10px; background: white; border-radius: 4px;">' +
            '<strong style="font-size: 14px;">${point.x}</strong><br>' +
            '<span style="color: #0066cc; font-size: 12px;">Sales: $${point.y}K</span><br>' +
            '<span style="color: #666; font-size: 11px;">Updated: Today</span>' +
            '</div>'
};

Accessibility Considerations

Tooltips should:

• Be readable: Font size ≥ 12px
• Have contrast: 4.5:1 minimum ratio
• Be dismissible: ESC key or clicking away
• Not obscure: Don't cover critical data

Performance Tips

• Avoid complex HTML in templates
• Use simple format strings
• Limit template rendering for large datasets
• Consider lazy loading tooltip data