references/accessibility.md
# Accessibility
Build accessible 3D charts that comply with WCAG 2.1 standards and support all users.
## Table of Contents
- [WCAG 2.1 Compliance](#wcag-21-compliance)
- [Compliance Levels](#compliance-levels)
- [Keyboard Navigation](#keyboard-navigation)
- [Enable Keyboard Support](#enable-keyboard-support)
- [Keyboard Shortcuts](#keyboard-shortcuts)
- [Navigation Example](#navigation-example)
- [ARIA Attributes](#aria-attributes)
- [Add ARIA Labels](#add-aria-labels)
- [ARIA Roles](#aria-roles)
- [Screen Reader Support](#screen-reader-support)
- [Provide Text Alternatives](#provide-text-alternatives)
- [Summary for Screen Readers](#summary-for-screen-readers)
- [Color Contrast](#color-contrast)
- [Ensure Sufficient Contrast](#ensure-sufficient-contrast)
- [Color-Blind Friendly Palettes](#color-blind-friendly-palettes)
- [Focus Indicators](#focus-indicators)
- [Visible Focus States](#visible-focus-states)
- [Motion and Animation](#motion-and-animation)
- [Respect Prefers-Reduced-Motion](#respect-prefers-reduced-motion)
- [Accessible Data Labels](#accessible-data-labels)
- [Large Readable Labels](#large-readable-labels)
- [Accessibility Checklist](#accessibility-checklist)
- [Pre-Implementation](#pre-implementation)
- [Implementation](#implementation)
- [Testing](#testing)
- [Common Issues](#common-issues)
- [Testing Tools](#testing-tools)
- [Resources](#resources)
- [Accessibility Statement Example](#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
```typescript
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
| Key | Action |
|-----|--------|
| `Tab` | Focus chart |
| `Arrow Keys` | Navigate between points |
| `Enter` | Select point |
| `Escape` | Clear selection |
| `Ctrl+G` | Focus legend |
| `Ctrl+Shift+E` | Export chart |
### Navigation Example
```typescript
@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:
```typescript
@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
```html
<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:
```typescript
@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
```typescript
@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):
```typescript
@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:
```typescript
// 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
```typescript
@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
```typescript
@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
```typescript
@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
| Issue | Solution |
|-------|----------|
| Can't navigate via keyboard | Add `tabindex="0"` and event handlers |
| Colors hard to distinguish | Use colorblind-friendly palette |
| Text too small | Use font-size ≥ 12px |
| Legend not labeled | Add `aria-label` to legend |
| No alternative text | Provide data table alongside chart |
## 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
```html
<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>
```
references/api-reference.md
# 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](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#background)
- `backgroundImage` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#backgroundimage)
- `border` — [BorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/bordermodel)
- `columns` — [Chart3DColumnModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dcolumnmodel)
- `dataLabel3DModule` — [DataLabel3D](https://ej2.syncfusion.com/angular/documentation/api/chart3d/datalabel3d)
- `dataSource` — [Object | DataManager](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#datasource)
- `depth` — [number](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#depth)
- `description` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#description)
- `enableExport` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#enableexport)
- `enablePersistence` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#enablepersistence)
- `enableRotation` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#enablerotation)
- `enableRtl` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#enablertl)
- `enableSideBySidePlacement` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#enablesidebysideplacement)
- `export3DModule` — [Export3D](https://ej2.syncfusion.com/angular/documentation/api/chart3d/export3d)
- `height` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#height)
- `highlight3DModule` — [Highlight3D](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#highlight3dmodule)
- `highlightColor` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#highlightcolor)
- `highlightMode` — [HighlightMode](https://ej2.syncfusion.com/angular/documentation/api/chart3d/highlightmode)
- `highlightPattern` — [SelectionPattern](https://ej2.syncfusion.com/angular/documentation/api/chart3d/selectionpattern)
- `isMultiSelect` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#ismultiselect)
- `isTransposed` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#istransposed)
- `legendSettings` — [Chart3DLegendSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dlegendsettingsmodel)
- `locale` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#locale)
- `margin` — [MarginModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginmodel)
- `palettes` — [string[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#palettes)
- `perspectiveAngle` — [number](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#perspectiveangle)
- `primaryXAxis` / `primaryYAxis` — [Chart3DAxisModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3daxismodel)
- `rotation` — [number](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#rotation)
- `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](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dselectionmode)
- `selectionPattern` — [SelectionPattern](https://ej2.syncfusion.com/angular/documentation/api/chart3d/selectionpattern)
- `series` — [Chart3DSeriesModel[]](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesmodel)
- `subTitle` / `subTitleStyle` — string / [TitleSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titlesettingsmodel)
- `theme` — [ChartTheme](https://ej2.syncfusion.com/angular/documentation/api/chart3d/charttheme)
- `tilt` — number
- `title` / `titleStyle` — string / [TitleSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titlesettingsmodel)
- `tooltip` — [Chart3DTooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dtooltipsettingsmodel)
- `tooltip3DModule` — [Tooltip3D](https://ej2.syncfusion.com/angular/documentation/api/chart3d/tooltip3d)
- `useGroupingSeparator` — [boolean](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#usegroupingseparator)
- `wallColor` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#wallcolor)
- `wallSize` — [number](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#wallsize)
- `width` — [string](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#width)
## Methods
- `addSeries(seriesCollection: Chart3DSeriesModel[])` — Adds new series to the chart - [Refer link](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#addseries)
- `createChartSvg()` — Create SVG element for the chart - [Refer link](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#createchartsvg)
- `destroy()` — Destroy the widget - [Refer link](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#destroy)
- `export(type: ExportType, fileName: string)` — Export chart - [Refer link](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#export)
- `print(id?: string[])` — Print chart element(s) - [Refer link](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#print)
- `removeSeries(index: number)` — Removes a series from the chart - [Refer link](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#removeseries)
## Events
- `afterExport` — [EmitType<IAfterExportEventArgs>](https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default#afterexport)
- `axisLabelRender` — [Chart3DAxisLabelRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3daxislabelrendereventargs)
- `beforeExport` — [Chart3DExportEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dexporteventargs)
- `beforePrint` — [Chart3DPrintEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dprinteventargs)
- `beforeResize` — [Chart3DBeforeResizeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dbeforeresizeeventargs)
- `chart3DMouseClick` / `chart3DMouseDown` / `chart3DMouseLeave` / `chart3DMouseMove` / `chart3DMouseUp` — [Chart3DMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dmouseeventargs)
- `legendClick` / `legendRender` — [Chart3DLegend*EventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dlegendsettingsmodel)
- `load` / `loaded` — [Chart3DLoadedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dloadedeventargs)
- `pointClick` / `pointMove` — [Chart3DPointEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dpointeventargs)
- `pointRender` — [Chart3DPointRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dpointrendereventargs)
- `resized` — [Chart3DResizeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dresizeeventargs)
- `selectionComplete` — [Chart3DSelectionCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dselectioncompleteeventargs)
- `seriesRender` — [Chart3DSeriesRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesrendereventargs)
- `textRender` — [Chart3DTextRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dtextrendereventargs)
- `tooltipRender` — [Chart3DTooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dtooltiprendereventargs)
---
Generated from: https://ej2.syncfusion.com/angular/documentation/api/chart3d/index-default
references/appearance.md
# Appearance and Styling
## Table of Contents
- [Overview](#overview)
- [Custom Color Palettes](#custom-color-palettes)
- [Default Palettes](#default-palettes)
- [Multiple Palette Options](#multiple-palette-options)
- [Apply Palettes to Specific Series](#apply-palettes-to-specific-series)
- [Point Color Customization](#point-color-customization)
- [Color by Property](#color-by-property)
- [Conditional Point Colors](#conditional-point-colors)
- [Series Styling](#series-styling)
- [Border and Fill](#border-and-fill)
- [Opacity and Transparency](#opacity-and-transparency)
- [Marker Styling](#marker-styling)
- [Theme Application](#theme-application)
- [Built-in Themes](#built-in-themes)
- [Dark Mode Theme](#dark-mode-theme)
- [Chart Area Styling](#chart-area-styling)
- [Background Color](#background-color)
- [Border Styling](#border-styling)
- [Chart Wall](#chart-wall)
- [Common Styling Patterns](#common-styling-patterns)
- [Pattern 1 Corporate Branding](#pattern-1-corporate-branding)
- [Pattern 2 Heatmap-Style Colors](#pattern-2-heatmap-style-colors)
- [Pattern 3 Accessibility-Compliant Colors](#pattern-3-accessibility-compliant-colors)
- [Pattern 4 Dark Theme Support](#pattern-4-dark-theme-support)
- [CSS Styling](#css-styling)
[Override Styles](#override-styles)
- [Accessibility Considerations](#accessibility-considerations)
- [Performance Notes](#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
```typescript
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
```typescript
// 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
```typescript
@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:
```typescript
@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:
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
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:
```typescript
@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
```typescript
@Component({
template: `
<ejs-chart3d [theme]="'MaterialDark'">
...
</ejs-chart3d>
`
})
export class DarkModeComponent { }
```
## Chart Area Styling
### Background Color
```typescript
@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
```typescript
@Component({
template: `
<ejs-chart3d [chartBorder]="border">
...
</ejs-chart3d>
`
})
export class BorderComponent {
border = {
color: '#999',
width: 2
};
}
```
### Chart Wall
Customize the 3D chart wall appearance:
```typescript
@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:
```typescript
colors = ['#003366', '#0066cc', '#00cc99', '#cccc00', '#ff6600'];
border = {
color: '#003366',
width: 2
};
```
### Pattern 2: Heatmap-Style Colors
Use gradient-like colors for value representation:
```typescript
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:
```typescript
colors = [
'#0173B2', // Blue
'#DE8F05', // Orange
'#CC78BC', // Purple
'#CA9161', // Brown
'#949494' // Gray
];
```
### Pattern 4: Dark Theme Support
```typescript
@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:
```css
.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
references/axis-customization.md
# Axis Customization
## Table of Contents
- [Overview](#overview)
- [API Reference](#api-reference)
- [Category Axis](#category-axis)
- [Basic Category Axis](#basic-category-axis)
- [Category Axis with Label Rotation](#category-axis-with-label-rotation)
- [Category Axis with Custom Range](#category-axis-with-custom-range)
- [Numeric Axis](#numeric-axis)
- [Basic Numeric Axis](#basic-numeric-axis)
- [Numeric Axis with Fixed Range](#numeric-axis-with-fixed-range)
- [Numeric Axis with Logarithmic Scale](#numeric-axis-with-logarithmic-scale)
- [DateTime Axis](#datetime-axis)
- [Basic DateTime Axis](#basic-datetime-axis)
- [DateTime Axis with Custom Interval](#datetime-axis-with-custom-interval)
- [Logarithmic Axis](#logarithmic-axis)
- [Basic Logarithmic Axis](#basic-logarithmic-axis)
- [Logarithmic Axis with Custom Base](#logarithmic-axis-with-custom-base)
- [Multi-Pane Configuration](#multi-pane-configuration)
- [Basic Multi-Pane](#basic-multi-pane)
- [Axis Common Properties](#axis-common-properties)
- [Title Configuration](#title-configuration)
- [Label Formatting](#label-formatting)
- [Grid Lines and Ticks](#grid-lines-and-ticks)
- [Axis Range and Intervals](#axis-range-and-intervals)
- [Axis Visibility and Position](#axis-visibility-and-position)
- [Common Axis Patterns](#common-axis-patterns)
- [Pattern: Multiple Time Series](#pattern-multiple-time-series)
- [Pattern: Percentage Comparison](#pattern-percentage-comparison)
- [Pattern: Scientific Data](#pattern-scientific-data)
- [Selection Guidelines](#selection-guidelines)
## Overview
### API Reference
📄 **Read:** [references/api-reference.md](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
```typescript
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:
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]="xAxis">
...
</ejs-chart3d>
`
})
export class RotatedCategoryAxisComponent {
xAxis = {
valueType: 'Category',
labelRotationAngle: 45,
title: 'Products'
};
}
```
### Category Axis with Custom Range
```typescript
xAxis = {
valueType: 'Category',
startAngle: 0,
endAngle: 360
};
```
## Numeric Axis
Numeric axis displays numerical values with automatic scaling.
### Basic Numeric Axis
```typescript
@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
```typescript
yAxis = {
valueType: 'Double',
minimum: 0,
maximum: 50000,
interval: 10000,
title: 'Amount'
};
```
### Numeric Axis with Logarithmic Scale
For large value ranges, use logarithmic scale:
```typescript
yAxis = {
valueType: 'Double',
isInversed: false,
majorGridLines: { width: 1 }
};
```
## DateTime Axis
DateTime axis handles date and time values.
### Basic DateTime Axis
```typescript
@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
```typescript
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
```typescript
@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
```typescript
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
```typescript
@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
```typescript
xAxis = {
title: 'Category Label',
titleStyle: {
fontFamily: 'Arial',
fontStyle: 'Normal',
fontWeight: '600',
size: '16px',
color: '#0066cc'
}
};
```
### Label Formatting
```typescript
yAxis = {
labelFormat: '${value}K', // Custom format
// OR
labelFormat: '{value:N2}' // Decimal places
};
```
### Grid Lines and Ticks
```typescript
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
```typescript
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
```typescript
xAxis = {
visible: true,
opposedPosition: false, // Position below chart
placeNextToAxisLine: true
};
```
## Common Axis Patterns
### Pattern: Multiple Time Series
When displaying trend data over time:
```typescript
xAxis = { valueType: 'DateTime', intervalType: 'Months' };
yAxis = { valueType: 'Double', labelFormat: '${value}' };
```
### Pattern: Percentage Comparison
When showing percentages:
```typescript
yAxis = {
valueType: 'Double',
minimum: 0,
maximum: 100,
interval: 20,
labelFormat: '{value}%'
};
```
### Pattern: Scientific Data
When showing exponential growth:
```typescript
yAxis = { valueType: 'Logarithmic', logBase: 10 };
```
## Selection Guidelines
| Data Type | Axis Type | Use When |
|-----------|-----------|----------|
| Product names, regions | Category | Data are discrete text labels |
| Quantity, price, percentage | Numeric | Data are numerical values |
| Daily, monthly, yearly | DateTime | Data points across time periods |
| 1, 10, 100, 1000 | Logarithmic | Values span multiple orders of magnitude |
references/axis-labels.md
# Axis Labels
This guide covers formatting, positioning, and customizing axis labels in 3D charts.
## Table of Contents
- [Label Formatting](#label-formatting)
- [Basic Label Format](#basic-label-format)
- [Label Format Patterns](#label-format-patterns)
- [Decimal Places](#decimal-places)
- [Percentage Format](#percentage-format)
- [Currency Format](#currency-format)
- [Label Positioning](#label-positioning)
- [Label Rotation](#label-rotation)
- [Label Positioning Options](#label-positioning-options)
- [Vertical Positioning](#vertical-positioning)
- [Custom Label Templates](#custom-label-templates)
- [Template-based Labels](#template-based-labels)
- [DateTime Label Formats](#datetime-label-formats)
- [Label Styling](#label-styling)
- [Color and Font](#color-and-font)
- [Grid Line Styling](#grid-line-styling)
- [Label Display Options](#label-display-options)
- [Hide Labels](#hide-labels)
- [Label Count](#label-count)
- [Interval Control](#interval-control)
- [Common Label Patterns](#common-label-patterns)
- [Pattern Currency Display](#pattern-currency-display)
- [Pattern Percentage Display](#pattern-percentage-display)
- [Pattern Abbreviated Large Numbers](#pattern-abbreviated-large-numbers)
- [Pattern Date Range on Category Axis](#pattern-date-range-on-category-axis)
- [Accessibility Considerations](#accessibility-considerations)
- [Performance Tips](#performance-tips)
## Label Formatting
### Basic Label Format
Format axis labels with custom patterns:
```typescript
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
| Pattern | Example | Result |
|---------|---------|--------|
| `${value}` | 1000 | $1000 |
| `{value}%` | 50 | 50% |
| `{value}K` | 1000 | 1000K |
| `{value:N2}` | 1000 | 1000.00 |
| `Value: {value}` | 500 | Value: 500 |
### Decimal Places
```typescript
yAxis = {
labelFormat: '{value:N2}' // 2 decimal places
};
```
### Percentage Format
```typescript
yAxis = {
labelFormat: '{value}%',
minimum: 0,
maximum: 100,
interval: 20
};
```
### Currency Format
```typescript
yAxis = {
labelFormat: '${value}' // Dollar symbol
// OR
labelFormat: '€{value}' // Euro symbol
};
```
## Label Positioning
### Label Rotation
Rotate labels to avoid overlap (useful for long category names):
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]="xAxis">
...
</ejs-chart3d>
`
})
export class RotatedLabelsComponent {
xAxis = {
valueType: 'Category',
labelRotationAngle: 45, // Degrees
title: 'Categories'
};
}
```
### Label Positioning Options
```typescript
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:
```typescript
xAxis = {
labelPosition: 'Inside', // Inside the chart
// OR
labelPosition: 'Outside' // Outside the chart
};
```
## Custom Label Templates
### Template-based Labels
```typescript
@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
| Format | Result |
|--------|--------|
| `MMM` | Jan |
| `MMMM` | January |
| `dd` | 01 |
| `dd/MM/yyyy` | 01/01/2024 |
| `MMM yyyy` | Jan 2024 |
| `yyyy-MM-dd` | 2024-01-01 |
## Label Styling
### Color and Font
```typescript
@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
```typescript
yAxis = {
majorGridLines: {
width: 1,
color: '#d3d3d3',
dashArray: '5,5' // Dashed lines
},
minorGridLines: {
width: 1,
color: '#f0f0f0'
}
};
```
## Label Display Options
### Hide Labels
```typescript
xAxis = {
visible: true,
labelVisible: false // Hide all labels
};
```
### Label Count
Control how many labels display:
```typescript
xAxis = {
desiredIntervals: 5, // Approximate number of labels
valueType: 'Category'
};
```
### Interval Control
```typescript
yAxis = {
valueType: 'Double',
interval: 10, // Major label interval
minorTicksPerInterval: 4 // Minor ticks between labels
};
```
## Common Label Patterns
### Pattern: Currency Display
For financial data:
```typescript
yAxis = {
labelFormat: '${value}',
title: 'Amount'
};
```
### Pattern: Percentage Display
For ratio/proportion data:
```typescript
yAxis = {
labelFormat: '{value}%',
minimum: 0,
maximum: 100
};
```
### Pattern: Abbreviated Large Numbers
For millions/billions:
```typescript
yAxis = {
labelFormat: '{value}M', // Millions
// OR
labelFormat: '{value}B' // Billions
};
```
### Pattern: Date Range on Category Axis
For time-based categories:
```typescript
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
references/chart-types.md
# Chart Types and Configuration
## Table of Contents
- [Overview](#overview)
- [API Reference](#api-reference)
- [Column Chart](#column-chart)
- [Basic Column Chart](#basic-column-chart)
- [Column Chart with Multiple Series](#column-chart-with-multiple-series)
- [Bar Chart](#bar-chart)
- [Basic Bar Chart](#basic-bar-chart)
- [Bar Chart with Multiple Series](#bar-chart-with-multiple-series)
- [Stacked Column Chart](#stacked-column-chart)
- [Basic Stacked Column](#basic-stacked-column)
- [Stacked Column with Percentage](#stacked-column-with-percentage)
- [Stacked Bar Chart](#stacked-bar-chart)
- [Basic Stacked Bar](#basic-stacked-bar)
- [Stacked Bar 100% Normalized](#stacked-bar-100-normalized)
- [Switching Chart Types](#switching-chart-types)
- [Series Configuration](#series-configuration)
- [Named Series](#named-series)
- [Series with Custom Colors](#series-with-custom-colors)
- [Common Patterns](#common-patterns)
- [Pattern: Comparative Analysis with Multiple Series](#pattern-comparative-analysis-with-multiple-series)
- [Pattern: Composition Analysis](#pattern-composition-analysis)
- [Pattern: Trend Comparison](#pattern-trend-comparison)
- [Selection Guidelines](#selection-guidelines)
- [Performance Notes](#performance-notes)
## Overview
### API Reference
📄 **Read:** [references/api-reference.md](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
```typescript
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:
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
@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:
```typescript
@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
```typescript
@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)
```typescript
@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:
```typescript
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:
```typescript
@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
```typescript
@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:
```typescript
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:
```typescript
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
| Use Case | Recommended Type |
|----------|-----------------|
| Compare values across categories | Column |
| Long category labels | Bar |
| Show composition (parts of whole) | Stacking Column |
| Show composition horizontally | Stacking Bar |
| Multiple trends side-by-side | Column with multiple series |
| Budget vs. Actual | Stacking Column |
| Market share over time | Stacking Column 100% |
## 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
references/data-labels.md
# Data Labels
## Table of Contents
- [Overview](#overview)
- [API Reference](#api-reference)
- [Enable Data Labels](#enable-data-labels)
- [Basic Data Labels](#basic-data-labels)
- [Data Label Configuration](#data-label-configuration)
- [Label Positioning](#label-positioning)
- [Position Options](#position-options)
- [Example Top-Positioned Labels](#example-top-positioned-labels)
- [Example Auto-Positioned Labels](#example-auto-positioned-labels)
- [Label Formatting](#label-formatting)
- [Format Numeric Values](#format-numeric-values)
- [Decimal Places](#decimal-places)
- [Custom Templates](#custom-templates)
- [HTML Template](#html-template)
- [Conditional Formatting](#conditional-formatting)
- [Visibility Control](#visibility-control)
- [Hide Specific Labels](#hide-specific-labels)
- [Show Labels Only for MaxMin Values](#show-labels-only-for-maxmin-values)
- [Data Label Styling](#data-label-styling)
- [Font and Color](#font-and-color)
- [Background and Border](#background-and-border)
- [Common Patterns](#common-patterns)
- [Pattern 1 Simple Value Labels](#pattern-1-simple-value-labels)
- [Pattern 2 Currency Values](#pattern-2-currency-values)
- [Pattern 3 Percentage Labels](#pattern-3-percentage-labels)
- [Pattern 4 Combined Labels](#pattern-4-combined-labels)
- [Performance Considerations](#performance-considerations)
- [Accessibility Notes](#accessibility-notes)
## Overview
### API Reference
📄 **Read:** [references/api-reference.md](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:
```typescript
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
```typescript
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
```typescript
marker = {
dataLabel: {
visible: true,
position: 'Top'
}
};
```
### Example: Auto-Positioned Labels
```typescript
marker = {
dataLabel: {
visible: true,
position: 'Auto' // Optimally placed to avoid overlap
}
};
```
## Label Formatting
### Format Numeric Values
```typescript
@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
```typescript
marker = {
dataLabel: {
visible: true,
format: '{value:N2}' // 2 decimal places
}
};
```
## Custom Templates
### HTML Template
Create custom label appearance:
```typescript
@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:
```typescript
marker = {
dataLabel: {
visible: true,
format: '{value}',
// Only show labels for values > 50
textMappingName: 'category'
}
};
```
## Visibility Control
### Hide Specific Labels
```typescript
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
```typescript
@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
```typescript
marker = {
dataLabel: {
visible: true,
font: {
fontFamily: 'Arial',
fontStyle: 'Normal',
fontWeight: '600',
size: '14px',
color: '#0066cc'
}
}
};
```
### Background and Border
```typescript
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:
```typescript
marker = {
dataLabel: {
visible: true,
position: 'Top',
format: '{value}'
}
};
```
### Pattern 2: Currency Values
For financial data:
```typescript
marker = {
dataLabel: {
visible: true,
position: 'Top',
format: '${value}',
font: { size: '12px' }
}
};
```
### Pattern 3: Percentage Labels
For composition charts:
```typescript
marker = {
dataLabel: {
visible: true,
position: 'Middle',
format: '{value}%'
}
};
```
### Pattern 4: Combined Labels
Show both category and value:
```typescript
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
references/dimensions.md
# 3D Chart Dimensions
Configure 3D perspective, depth, rotation, and chart dimensions.
## Table of Contents
- [Chart Size](#chart-size)
- [Set Chart Width and Height](#set-chart-width-and-height)
- [Responsive Sizing](#responsive-sizing)
- [3D Perspective Controls](#3d-perspective-controls)
- [Rotation](#rotation)
- [Tilt](#tilt)
- [Depth](#depth)
- [Perspective Projection](#perspective-projection)
- [Field of View](#field-of-view)
- [Wall Styling](#wall-styling)
- [Wall Properties](#wall-properties)
- [Isometric View](#isometric-view)
- [Set Isometric Angles](#set-isometric-angles)
- [Common 3D Configurations](#common-3d-configurations)
- [Configuration 1 Standard 3D View](#configuration-1-standard-3d-view)
- [Configuration 2 Front View Nearly 2D](#configuration-2-front-view-nearly-2d)
- [Configuration 3 Isometric View](#configuration-3-isometric-view)
- [Configuration 4 High-Angle View](#configuration-4-high-angle-view)
- [Dynamically Adjust 3D Settings](#dynamically-adjust-3d-settings)
- [Aspect Ratio Control](#aspect-ratio-control)
- [Maintain Aspect Ratio](#maintain-aspect-ratio)
- [Performance Optimization](#performance-optimization)
- [Accessibility Considerations](#accessibility-considerations)
## Chart Size
### Set Chart Width and Height
```typescript
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
```typescript
@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:
```typescript
@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:
```typescript
@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:
```typescript
@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:
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
rotation = 45;
tilt = 15;
depth = 100;
```
### Configuration 2: Front View (Nearly 2D)
```typescript
rotation = 0;
tilt = 0;
depth = 20;
```
### Configuration 3: Isometric View
```typescript
rotation = 45;
tilt = 45;
depth = 100;
```
### Configuration 4: High-Angle View
```typescript
rotation = 30;
tilt = 60;
depth = 80;
```
## Dynamically Adjust 3D Settings
```typescript
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
```typescript
@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.
references/getting-started.md
# Getting Started with Angular 3D Chart
This guide walks through setting up a Syncfusion 3D Chart in an Angular application.
## Table of Contents
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Step 1: Install Syncfusion Charts Package](#step-1-install-syncfusion-charts-package)
- [Step 2: Import Required Modules](#step-2-import-required-modules)
- [Step 3: Import Styles](#step-3-import-styles)
- [Create Your First 3D Chart](#create-your-first-3d-chart)
- [Basic Column Chart](#basic-column-chart)
- [Component Configuration](#component-configuration)
- [Adding Axis Labels](#adding-axis-labels)
- [Adding a Title](#adding-a-title)
- [CSS Imports by Theme](#css-imports-by-theme)
- [Minimal Working Example](#minimal-working-example)
- [Common Setup Issues](#common-setup-issues)
## Prerequisites
- Angular 21+ (standalone architecture)
- Node.js and npm installed
- Basic Angular knowledge
## Installation
### Step 1: Install Syncfusion Charts Package
```bash
npm install @syncfusion/ej2-angular-charts
```
### Step 2: Import Required Modules
In your component file, import the Chart3D component and related directives:
```typescript
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`:
```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:
```typescript
@Component({
selector: 'app-root',
standalone: true,
styleUrls: ['./app.component.css'],
imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
template: ``
})
```
## Create Your First 3D Chart
### Basic Column Chart
```typescript
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:
```typescript
@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:
```typescript
@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):**
```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/material.css';
```
**Bootstrap Theme:**
```css
@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/bootstrap.css';
```
**Tailwind Theme:**
```css
@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:
```typescript
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
references/legend.md
# Legend
Configure and customize chart legends for series identification.
## Table of Contents
- [Enable Legend](#enable-legend)
- [Basic Legend](#basic-legend)
- [Disable Legend](#disable-legend)
- [Legend Positioning](#legend-positioning)
- [Position Options](#position-options)
- [Example Positions](#example-positions)
- [Legend Customization](#legend-customization)
- [Custom Legend Height and Width](#custom-legend-height-and-width)
- [Legend Padding and Margin](#legend-padding-and-margin)
- [Legend Styling](#legend-styling)
- [Background and Border](#background-and-border)
- [Shape and Icon Customization](#shape-and-icon-customization)
- [Legend Label Formatting](#legend-label-formatting)
- [Custom Labels](#custom-labels)
- [Legend Interactions](#legend-interactions)
- [Enable Legend Selection](#enable-legend-selection)
- [Legend with Multiple Series](#legend-with-multiple-series)
- [Multi-Series Chart](#multi-series-chart)
- [Legend Wrapping](#legend-wrapping)
- [Arrange Legend Items in Columns](#arrange-legend-items-in-columns)
- [Common Legend Patterns](#common-legend-patterns)
- [Pattern 1 Top Legend with Multiple Series](#pattern-1-top-legend-with-multiple-series)
- [Pattern 2 Right Legend Default](#pattern-2-right-legend-default)
- [Pattern 3 Bottom Legend with Horizontal Layout](#pattern-3-bottom-legend-with-horizontal-layout)
- [Accessibility Considerations](#accessibility-considerations)
- [Performance Notes](#performance-notes)
- [Legend with Data Labels](#legend-with-data-labels)
## Enable Legend
### Basic Legend
```typescript
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
```typescript
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
```typescript
// 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
```typescript
@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
```typescript
legend = {
visible: true,
padding: 10,
margin: { left: 10, right: 10, top: 10, bottom: 10 }
};
```
## Legend Styling
### Background and Border
```typescript
@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
```typescript
legend = {
visible: true,
shape: 'Rectangle', // Circle, Rectangle, Triangle, Diamond
shapeWidth: 10,
shapeHeight: 10
};
```
## Legend Label Formatting
### Custom Labels
```typescript
@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:
```typescript
<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:
```typescript
@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
```typescript
@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
```typescript
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:
```typescript
legend = {
visible: true,
position: 'Top'
};
```
### Pattern 2: Right Legend (Default)
Standard layout:
```typescript
legend = {
visible: true,
position: 'Right'
};
```
### Pattern 3: Bottom Legend with Horizontal Layout
For dashboard layouts:
```typescript
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:
```typescript
@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 } };
}
```
references/print-export.md
# Print and Export
Export 3D charts as images or PDFs, and enable printing functionality.
## Table of Contents
- [Export Formats](#export-formats)
- [Export as Image](#export-as-image)
- [Export Configuration](#export-configuration)
- [Export with Custom Filename](#export-with-custom-filename)
- [Export with Size Options](#export-with-size-options)
- [Print Functionality](#print-functionality)
- [Basic Print](#basic-print)
- [Print with Title](#print-with-title)
- [Export Events](#export-events)
- [Handle Export Completion](#handle-export-completion)
- [Common Export Patterns](#common-export-patterns)
- [Pattern 1: Export with Multiple Formats](#pattern-1-export-with-multiple-formats)
- [Pattern 2: Batch Export Multiple Charts](#pattern-2-batch-export-multiple-charts)
- [Pattern 3: Export with Metadata](#pattern-3-export-with-metadata)
- [Export Format Guidelines](#export-format-guidelines)
- [PNG Export](#png-export)
- [SVG Export](#svg-export)
- [PDF Export](#pdf-export)
- [Print Considerations](#print-considerations)
- [Print-Friendly Styling](#print-friendly-styling)
- [Print Multiple Pages](#print-multiple-pages)
- [Mobile Export Considerations](#mobile-export-considerations)
- [Performance Notes](#performance-notes)
- [Accessibility in Exports](#accessibility-in-exports)
## Export Formats
### Export as Image
Export chart as PNG, SVG, or PDF:
```typescript
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
```typescript
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
```typescript
@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
```typescript
printChart() {
this.chart.print();
}
```
### Print with Title
```typescript
@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
```typescript
@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:
```typescript
@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
```typescript
@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:
```typescript
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
| Format | Use Case | Quality |
|--------|----------|---------|
| **PNG** | Web, presentations | Raster, lossy |
| **SVG** | Web, scaling | Vector, lossless |
| **PDF** | Reports, printing | Document, portable |
### 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
```css
@media print {
.no-print {
display: none;
}
.e-chart3d {
page-break-inside: avoid;
}
}
```
### Print Multiple Pages
```typescript
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
references/selection.md
# Selection
Enable and configure point and series selection in 3D charts.
## Table of Contents
- [Enable Selection](#enable-selection)
- [Basic Point Selection](#basic-point-selection)
- [Selection Modes](#selection-modes)
- [Single Point Selection](#single-point-selection)
- [Series Selection](#series-selection)
- [Cluster Selection](#cluster-selection)
- [Multiple Point Selection](#multiple-point-selection)
- [Selection Examples](#selection-examples)
- [Point Selection with Styling](#point-selection-with-styling)
- [Series Selection](#series-selection)
- [Selection Styling](#selection-styling)
- [Custom Selection Colors](#custom-selection-colors)
- [Selection Events](#selection-events)
- [Handle Selection Changes](#handle-selection-changes)
- [Track Selected Items](#track-selected-items)
- [Highlight on Hover](#highlight-on-hover)
- [Enable Highlight](#enable-highlight)
- [Programmatic Selection](#programmatic-selection)
- [Select by Index](#select-by-index)
- [Common Selection Patterns](#common-selection-patterns)
- [Pattern 1: Single Selection with Details](#pattern-1-single-selection-with-details)
- [Pattern 2: Multi-Selection for Comparison](#pattern-2-multi-selection-for-comparison)
- [Pattern 3: Series-Level Actions](#pattern-3-series-level-actions)
- [Accessibility Considerations](#accessibility-considerations)
- [Performance Notes](#performance-notes)
## Enable Selection
### Basic Point Selection
```typescript
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:
```typescript
selectionMode = 'Point'
```
### Series Selection
Select entire series:
```typescript
selectionMode = 'Series'
```
### Cluster Selection
Select all points in a cluster:
```typescript
selectionMode = 'Cluster'
```
### Multiple Point Selection
Select multiple points (Ctrl+Click):
```typescript
selectionMode = 'MultiPointSelect'
```
## Selection Examples
### Point Selection with Styling
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
@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
```typescript
@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:
```typescript
selectionMode = 'Point';
onSelect(args: any) {
this.selectedData = args.data;
this.showDetailsPanel = true;
}
```
### Pattern 2: Multi-Selection for Comparison
Allow selecting multiple points:
```typescript
selectionMode = 'MultiPointSelect';
selectedPoints: any[] = [];
onSelect(args: any) {
if (args.selected) {
this.selectedPoints.push(args.data);
}
}
```
### Pattern 3: Series-Level Actions
Act on entire series:
```typescript
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
references/tool-tip.md
# Tooltips
Enable and customize interactive tooltips for 3D charts.
## Table of Contents
- [Overview](#overview)
- [API Reference](#api-reference)
- [Enable Tooltips](#enable-tooltips)
- [Basic Tooltip](#basic-tooltip)
- [Disable Tooltips](#disable-tooltips)
- [Tooltip Formatting](#tooltip-formatting)
- [Default Format](#default-format)
- [Custom Format Patterns](#custom-format-patterns)
- [Example Formats](#example-formats)
- [Tooltip Templates](#tooltip-templates)
- [HTML Template](#html-template)
- [Dynamic Template](#dynamic-template)
- [Tooltip Styling](#tooltip-styling)
- [Background and Border](#background-and-border)
- [Tooltip Offset](#tooltip-offset)
- [Tooltip Behavior](#tooltip-behavior)
- [Shared Tooltip](#shared-tooltip)
- [Persistent Tooltip](#persistent-tooltip)
- [Show Delay](#show-delay)
- [Tooltip Events](#tooltip-events)
- [Show Tooltip on Click](#show-tooltip-on-click)
- [Common Tooltip Patterns](#common-tooltip-patterns)
- [Pattern 1: Currency Display](#pattern-1-currency-display)
- [Pattern 2: Category and Value](#pattern-2-category-and-value)
- [Pattern 3: Multi-Series Comparison](#pattern-3-multi-series-comparison)
- [Pattern 4: Rich Information](#pattern-4-rich-information)
- [Accessibility Considerations](#accessibility-considerations)
- [Performance Tips](#performance-tips)
## Overview
### API Reference
📄 **Read:** [references/api-reference.md](references/api-reference.md)
## Enable Tooltips
### Basic Tooltip
```typescript
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
```typescript
tooltip = {
enable: false
};
```
## Tooltip Formatting
### Default Format
```typescript
tooltip = {
enable: true,
format: '${series.name} - ${point.x} : ${point.y}'
};
```
### Custom Format Patterns
| Pattern | Result |
|---------|--------|
| `${series.name}` | Series name |
| `${point.x}` | X-axis value |
| `${point.y}` | Y-axis value |
| `${point.text}` | Data point text |
### Example Formats
```typescript
// 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:
```typescript
@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
```typescript
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
```typescript
@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
```typescript
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:
```typescript
tooltip = {
enable: true,
shared: true
};
```
### Persistent Tooltip
```typescript
tooltip = {
enable: true,
duration: 3000 // Display for 3 seconds
};
```
### Show Delay
```typescript
tooltip = {
enable: true,
showDelay: 500 // Wait 500ms before showing
};
```
## Tooltip Events
### Show Tooltip on Click
```typescript
@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:
```typescript
tooltip = {
enable: true,
format: '<b>${point.x}</b><br>Amount: $${point.y}K'
};
```
### Pattern 2: Category and Value
For simple data display:
```typescript
tooltip = {
enable: true,
format: '${point.x}<br>Value: ${point.y}'
};
```
### Pattern 3: Multi-Series Comparison
Show all series values:
```typescript
tooltip = {
enable: true,
shared: true,
format: '<b>${point.x}</b><br>${series.name}: ${point.y}'
};
```
### Pattern 4: Rich Information
Include additional context:
```typescript
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
references/working-with-data.md
# Working with Data
## Table of Contents
- [Overview](#overview)
- [Data Binding Approaches](#data-binding-approaches)
- [Local Array Binding](#local-array-binding)
- [Array of Objects](#array-of-objects)
- [Typed Data Model](#typed-data-model)
- [Category Data](#category-data)
- [Text Category Binding](#text-category-binding)
- [Numeric Category](#numeric-category)
- [DateTime Categories](#datetime-categories)
- [Remote Data Loading](#remote-data-loading)
- [Load from HTTP API](#load-from-http-api)
- [Load with Error Handling](#load-with-error-handling)
- [Load with Loading State](#load-with-loading-state)
- [Data Updates](#data-updates)
- [Update Series Data](#update-series-data)
- [Add New Data Points](#add-new-data-points)
- [Remove Data Points](#remove-data-points)
- [Data Refresh Patterns](#data-refresh-patterns)
- [Auto-Refresh Pattern](#auto-refresh-pattern)
- [Sliding Window Pattern](#sliding-window-pattern)
- [Common Data Patterns](#common-data-patterns)
- [Pattern 1 Simple Sales Data](#pattern-1-simple-sales-data)
- [Pattern 2 Multi-Series Comparison](#pattern-2-multi-series-comparison)
- [Pattern 3 Filtering Data](#pattern-3-filtering-data)
- [Pattern 4 Grouping Data](#pattern-4-grouping-data)
- [Performance Optimization](#performance-optimization)
- [Type-Safe Data Handling](#type-safe-data-handling)
## Overview
The 3D Chart component supports multiple data binding approaches to handle various data scenarios.
## Data Binding Approaches
### Local Array Binding
Bind chart to a local TypeScript array:
```typescript
import { Component } from '@angular/core';
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';
@Component({
selector: 'app-working-with-data',
standalone: true,
imports: [Chart3DAllModule],
template: `
<ejs-chart3d [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 LocalDataComponent {
primaryXAxis = {
valueType: 'Category'
}
data = [
{ month: 'Jan', sales: 40 },
{ month: 'Feb', sales: 50 },
{ month: 'Mar', sales: 45 }
];
}
```
### Array of Objects
Structure data with multiple properties:
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]='primaryXAxis'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="salesData" xName="product" yName="revenue" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class ObjectArrayComponent {
salesData = [
{ product: 'Laptop', revenue: 45000, units: 150, category: 'Electronics' },
{ product: 'Monitor', revenue: 28000, units: 320, category: 'Electronics' },
{ product: 'Keyboard', revenue: 15000, units: 800, category: 'Accessories' }
];
primaryXAxis = {
valueType: 'Category'
}
}
```
### Typed Data Model
Use TypeScript interfaces for type safety:
```typescript
interface SalesData {
month: string;
sales: number;
forecast: number;
}
@Component({
template: `
<ejs-chart3d [primaryXAxis]='primaryXAxis'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="salesData" xName="month" yName="sales" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class TypedDataComponent {
salesData: SalesData[] = [
{ month: 'Jan', sales: 40, forecast: 45 },
{ month: 'Feb', sales: 50, forecast: 48 }
];
primaryXAxis = {
valueType: 'Category'
}
}
```
## Category Data
### Text Category Binding
Bind text values to X-axis:
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]="xAxis">
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="categoryData" xName="region" yName="sales" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class CategoryComponent {
categoryData = [
{ region: 'North America', sales: 125 },
{ region: 'Europe', sales: 89 },
{ region: 'Asia Pacific', sales: 156 }
];
xAxis = { valueType: 'Category' };
}
```
### Numeric Category
Use numbers as categories:
```typescript
categoryData = [
{ id: 1, value: 40 },
{ id: 2, value: 50 },
{ id: 3, value: 45 }
];
xAxis = { valueType: 'Category', title: 'ID' };
```
### DateTime Categories
Use dates as categories:
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]="xAxis">
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="dateData" xName="date" yName="temperature" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class DateCategoryComponent {
dateData = [
{ date: new Date(2024, 0, 1), temperature: 15 },
{ date: new Date(2024, 0, 2), temperature: 18 },
{ date: new Date(2024, 0, 3), temperature: 20 }
];
xAxis = {
valueType: 'DateTime',
intervalType: 'Days',
labelFormat: 'MMM dd'
};
}
```
## Remote Data Loading
### Load from HTTP API
```typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-remote-data',
standalone: true,
imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
template: `
<ejs-chart3d>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="remoteData" xName="month" yName="sales" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class RemoteDataComponent implements OnInit {
remoteData: any[] = [];
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get<any[]>('/api/sales')
.subscribe(data => {
this.remoteData = data;
});
}
}
```
### Load with Error Handling
```typescript
ngOnInit() {
this.http.get<any[]>('/api/sales')
.subscribe({
next: (data) => {
this.remoteData = data;
},
error: (error) => {
console.error('Error loading data:', error);
this.remoteData = []; // Default empty
}
});
}
```
### Load with Loading State
```typescript
@Component({
template: `
<div>
<div *ngIf="isLoading">Loading...</div>
<ejs-chart3d *ngIf="!isLoading">
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="remoteData" xName="x" yName="y" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
</div>
`
})
export class LoadingStateComponent implements OnInit {
remoteData: any[] = [];
isLoading = false;
constructor(private http: HttpClient) {}
ngOnInit() {
this.isLoading = true;
this.http.get<any[]>('/api/sales')
.subscribe({
next: (data) => {
this.remoteData = data;
this.isLoading = false;
},
error: () => {
this.isLoading = false;
}
});
}
}
```
## Data Updates
### Update Series Data
Modify data after binding:
```typescript
@Component({
template: `
<div>
<button (click)="updateData()">Update Data</button>
<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 DataUpdateComponent {
data = [
{ x: 'A', y: 40 },
{ x: 'B', y: 50 }
];
primaryXAxis = {
valueType: 'Category'
}
updateData() {
this.data = [
{ x: 'A', y: 45 },
{ x: 'B', y: 55 }
];
}
}
```
### Add New Data Points
```typescript
addDataPoint() {
this.data = [
...this.data,
{ x: 'C', y: 60 }
];
}
```
### Remove Data Points
```typescript
removeLastPoint() {
this.data = this.data.slice(0, -1);
}
```
## Data Refresh Patterns
### Auto-Refresh Pattern
Update chart at intervals:
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]='primaryXAxis'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="liveData" xName="time" yName="value" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class LiveDataComponent implements OnInit {
liveData: any[] = [];
primaryXAxis = {
valueType: 'Category'
}
constructor(private http: HttpClient) {}
ngOnInit() {
this.loadData();
// Refresh every 5 seconds
setInterval(() => this.loadData(), 5000);
}
loadData() {
this.http.get<any[]>('/api/live-data')
.subscribe(data => {
this.liveData = data;
});
}
}
```
### Sliding Window Pattern
Keep only recent data:
```typescript
ngOnInit() {
setInterval(() => {
this.http.get<any>('/api/latest-value')
.subscribe(newPoint => {
this.liveData.push(newPoint);
// Keep only last 10 points
if (this.liveData.length > 10) {
this.liveData = this.liveData.slice(-10);
}
});
}, 1000);
}
```
## Common Data Patterns
### Pattern 1: Simple Sales Data
```typescript
data = [
{ month: 'Jan', sales: 4000 },
{ month: 'Feb', sales: 3000 },
{ month: 'Mar', sales: 2000 }
];
```
### Pattern 2: Multi-Series Comparison
```typescript
@Component({
template: `
<ejs-chart3d [primaryXAxis]='primaryXAxis'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]="data" xName="month" yName="sales2023" name="2023" type="Column">
</e-chart3d-series>
<e-chart3d-series [dataSource]="data" xName="month" yName="sales2024" name="2024" type="Column">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>
`
})
export class MultiSeriesComponent {
primaryXAxis = {
valueType: 'Category'
}
data = [
{ month: 'Jan', sales2023: 40, sales2024: 50 },
{ month: 'Feb', sales2023: 35, sales2024: 48 }
];
}
```
### Pattern 3: Filtering Data
```typescript
get filteredData() {
return this.allData.filter(d => d.region === this.selectedRegion);
}
```
### Pattern 4: Grouping Data
```typescript
groupByCategory() {
const grouped = this.data.reduce((acc, item) => {
if (!acc[item.category]) {
acc[item.category] = [];
}
acc[item.category].push(item);
return acc;
}, {});
return grouped;
}
```
## Performance Optimization
- **Batch updates:** Group multiple data changes
- **Virtual scrolling:** For large datasets (100k+ points)
- **Sampling:** Show representative data instead of all points
- **Lazy loading:** Load data on demand
## Type-Safe Data Handling
```typescript
interface ChartData {
category: string;
value: number;
metadata?: Record<string, any>;
}
data: ChartData[] = [
{ category: 'A', value: 40 },
{ category: 'B', value: 50 }
];
```
SKILL.md
---
name: syncfusion-angular-3d-chart
description: Implement interactive 3D charts in Angular applications using Syncfusion. Guide covers setup, chart types (bar, column, stacked variants), customization, data binding, axis configuration, legends, tooltips, selection, data labels, appearance styling, dimensions, print/export, and accessibility. Use this skill whenever a user needs to create, configure, or customize 3D chart visualizations.
metadata:
author: "Syncfusion Inc"
version: "34.1.29"
category: "Data Visualization"
---
# 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](references/api-reference.md)
### Getting Started
📄 **Read:** [references/getting-started.md](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](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](references/axis-customization.md)
- Category axis setup
- Numeric axis configuration
- DateTime axis setup
- Logarithmic axis support
- Multi-pane configurations
📄 **Read:** [references/axis-labels.md](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](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](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](references/appearance.md)
- Custom color palettes
- Point color customization
- Series styling options
- Theme application
📄 **Read:** [references/dimensions.md](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](references/tool-tip.md)
- Enable and configure tooltips
- Tooltip templates and formatting
- Custom styling options
- Tooltip events and interactions
📄 **Read:** [references/selection.md](references/selection.md)
- Point selection modes
- Multiple selection configurations
- Selection styling
- Selection events
📄 **Read:** [references/legend.md](references/legend.md)
- Enable and position legends
- Legend customization
- Custom legend items
- Legend interactions
### Advanced Features
📄 **Read:** [references/print-export.md](references/print-export.md)
- Export as PNG, SVG, PDF
- Print functionality
- Export configuration options
- File naming and paths
📄 **Read:** [references/accessibility.md](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:
```typescript
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:
```typescript
@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:
```typescript
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:
```typescript
@Component({
template: `
<ejs-chart3d [palettes]="customPalette">
...
</ejs-chart3d>
`
})
export class CustomPaletteComponent {
customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
}
```
---
## Key Props Reference
| Prop | Type | Purpose |
|------|------|---------|
| `primaryXAxis` | AxisModel | Configures X-axis (type, labels, range) |
| `primaryYAxis` | AxisModel | Configures Y-axis (type, labels, range) |
| `dataSource` | any[] | Array of data objects for chart |
| `xName` | string | Data property for X values |
| `yName` | string | Data property for Y values |
| `type` | string | Chart type (Column, Bar, StackedColumn, StackedBar) |
| `name` | string | Series name for legend |
| `palettes` | string[] | Custom color array for series |
| `enableTooltip` | boolean | Show tooltips on hover |
| `legendSettings` | LegendSettings | Configure legend appearance and behavior |
| `tooltip` | TooltipSettings | Customize tooltip template and styling |
| `marker` | MarkerSettings | Configure data point markers |
| `dataLabel` | DataLabelSettings | Enable and format data labels |
---
## 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](https://ej2.syncfusion.com/angular/documentation/chart-3d/chart-types/).