Implementing Syncfusion Angular Chart Component A comprehensive guide for implementing the Syncfusion Angular Chart component, a high-performance, interactive data visualization library supporting 25+ chart types including line, bar, area, column, pie, financial, and specialized series. Optimized for responsive rendering, smooth interactions, and large datasets. When to Use This Skill Use this skill when you need to: - Visualize Data: Display numerical data as charts, graphs, or plots in Angular applications - Trend Analysis: Show data trends over time using line, spline, or area charts - Com…

+ parseFloat(args.text).toLocaleString();\n \n // Conditional styling\n if (parseFloat(args.text) \u003c 0) {\n args.color = '#FF0000';\n args.text = '(' + Math.abs(parseFloat(args.text)) + ')';\n }\n \n // Hide labels for small values\n if (parseFloat(args.text) \u003c 10) {\n args.text = '';\n }\n}\n```\n\n**axisLabelRender Event:**\nTriggered before axis labels render.\n\n```typescript\nimport { IAxisLabelRenderEventArgs } from '@syncfusion/ej2-charts';\n\nonAxisLabelRender(args: IAxisLabelRenderEventArgs): void {\n // Abbreviate large numbers\n if (args.axis.name === 'primaryYAxis') {\n if (args.value >= 1000000) {\n args.text = (args.value / 1000000).toFixed(1) + 'M';\n } else if (args.value >= 1000) {\n args.text = (args.value / 1000).toFixed(0) + 'K';\n }\n }\n \n // Custom date formatting\n if (args.axis.valueType === 'DateTime') {\n let date = new Date(args.value);\n args.text = date.toLocaleDateString('en-US', { month: 'short' });\n }\n}\n```\n\n**tooltipRender Event:**\nTriggered before tooltip displays.\n\n```typescript\nimport { ITooltipRenderEventArgs } from '@syncfusion/ej2-charts';\n\nonTooltipRender(args: ITooltipRenderEventArgs): void {\n // Custom tooltip content\n args.text = `\n \u003cdiv style=\"padding: 10px;\">\n \u003cstrong>${args.point.x}\u003c/strong>\u003cbr/>\n Sales: ${args.point.y.toLocaleString()}\u003cbr/>\n Growth: ${this.calculateGrowth(args.point)}%\n \u003c/div>\n `;\n \n // Custom styling\n args.headerText = '\u003cstrong>Sales Data\u003c/strong>';\n args.textStyle.color = '#FFFFFF';\n}\n```\n\n### Animation Events\n\n**animationComplete Event:**\nTriggered when series animation completes.\n\n```typescript\nimport { IAnimationCompleteEventArgs } from '@syncfusion/ej2-charts';\n\nonAnimationComplete(args: IAnimationCompleteEventArgs): void {\n console.log('Animation completed for series:', args.series.name);\n \n // Enable interactions after animation\n this.enableUserInteractions();\n \n // Start next animation\n if (this.animationQueue.length > 0) {\n this.startNextAnimation();\n }\n}\n```\n\n## Export Functionality\n\n### Image Export\n\nExport chart as PNG, JPEG, or SVG:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { ChartComponent, ExportType } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cbutton (click)=\"exportChart('PNG')\">Export PNG\u003c/button>\n \u003cbutton (click)=\"exportChart('JPEG')\">Export JPEG\u003c/button>\n \u003cbutton (click)=\"exportChart('SVG')\">Export SVG\u003c/button>\n \n \u003cejs-chart #chart \n [title]='title'\n (beforeExport)='onBeforeExport($event)'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='data'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ExportChartComponent {\n @ViewChild('chart') chart: ChartComponent;\n \n exportChart(type: ExportType): void {\n this.chart.export(type, 'ChartExport');\n }\n \n onBeforeExport(args: IExportEventArgs): void {\n // Customize export\n args.width = 1920;\n args.height = 1080;\n }\n}\n```\n\n**Custom Export Settings:**\n\n```typescript\nexportWithSettings(): void {\n this.chart.export('PNG', 'SalesChart', null, [this.chart], 1920, 1080);\n // type fileName orientation controls width height\n}\n```\n\n### PDF Export\n\nExport chart to PDF with custom settings:\n\n```typescript\nexportToPDF(): void {\n this.chart.export('PDF', 'ChartReport', 'Portrait');\n}\n\nexportWithHeaderFooter(): void {\n this.chart.export(\n 'PDF',\n 'MonthlyReport',\n 'Landscape',\n [this.chart],\n null,\n null,\n true, // allowDownload\n {\n header: {\n fromTop: 0,\n height: 130,\n contents: [\n {\n type: 'Text',\n value: 'Sales Performance Report',\n position: { x: 250, y: 50 },\n style: { fontSize: 20, bold: true }\n }\n ]\n },\n footer: {\n fromBottom: 160,\n height: 150,\n contents: [\n {\n type: 'PageNumber',\n format: 'Page {$current} of {$total}',\n position: { x: 250, y: 50 },\n style: { fontSize: 12 }\n },\n {\n type: 'Text',\n value: '© 2024 Company Name',\n position: { x: 250, y: 80 }\n }\n ]\n }\n }\n );\n}\n```\n\n**Multiple Charts in PDF:**\n\n```typescript\n@ViewChild('chart1') chart1: ChartComponent;\n@ViewChild('chart2') chart2: ChartComponent;\n\nexportMultipleCharts(): void {\n this.chart1.export(\n 'PDF',\n 'CombinedReport',\n 'Portrait',\n [this.chart1, this.chart2], // Multiple chart instances\n null,\n null,\n true,\n null,\n false // exportToMultiplePage: false = same page\n );\n}\n\nexportToSeparatePages(): void {\n this.chart1.export(\n 'PDF',\n 'DetailedReport',\n 'Portrait',\n [this.chart1, this.chart2],\n null,\n null,\n true,\n null,\n true // exportToMultiplePage: true = separate pages\n );\n}\n```\n\n### Excel Export\n\nExport chart data to Excel:\n\n```typescript\nimport { IExportEventArgs } from '@syncfusion/ej2-charts';\n\n@Component({\n template: `\n \u003cbutton (click)=\"exportToExcel('XLSX')\">Export to Excel\u003c/button>\n \u003cbutton (click)=\"exportToExcel('CSV')\">Export to CSV\u003c/button>\n \n \u003cejs-chart #chart (beforeExport)='onBeforeExport($event)'>\n \u003c/ejs-chart>\n `\n})\nexport class ExcelExportComponent {\n @ViewChild('chart') chart: ChartComponent;\n \n exportToExcel(type: 'XLSX' | 'CSV'): void {\n this.chart.export(type, 'ChartData');\n }\n \n onBeforeExport(args: IExportEventArgs): void {\n if (args.type === 'XLSX' || args.type === 'CSV') {\n // Customize Excel export\n args.excelProperties = {\n header: {\n headerRows: 2,\n rows: [\n {\n cells: [\n {\n colSpan: 4,\n value: 'Sales Report 2024',\n style: { fontSize: 20, bold: true }\n }\n ]\n },\n {\n cells: [\n { value: 'Generated on: ' + new Date().toLocaleDateString() }\n ]\n }\n ]\n },\n footer: {\n footerRows: 1,\n rows: [\n {\n cells: [\n { value: '© 2024 Company Name' }\n ]\n }\n ]\n }\n };\n }\n }\n}\n```\n\n**Custom Excel Formatting:**\n\n```typescript\nonBeforeExport(args: IExportEventArgs): void {\n if (args.type === 'XLSX') {\n args.excelProperties = {\n dataSource: this.customDataFormat(),\n columns: [\n { field: 'month', headerText: 'Month', width: 120 },\n { field: 'sales', headerText: 'Sales ($)', width: 150, format: 'C2' },\n { field: 'growth', headerText: 'Growth (%)', width: 120, format: 'N2' }\n ],\n header: {\n headerRows: 3,\n rows: [\n { cells: [{ value: 'Annual Report', style: { fontSize: 24, bold: true } }] },\n { cells: [{ value: 'Fiscal Year 2024' }] },\n { cells: [{ value: '' }] } // Empty row for spacing\n ]\n }\n };\n }\n}\n\ncustomDataFormat(): any[] {\n return this.chartData.map(item => ({\n month: item.x,\n sales: item.y,\n growth: this.calculateGrowth(item)\n }));\n}\n```\n\n### Base64 Export\n\nExport chart as base64 string for embedding or transmission:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\n\n@Component({\n template: `\n \u003cbutton (click)=\"getBase64()\">Get Base64\u003c/button>\n \u003cimg [src]=\"base64Image\" *ngIf=\"base64Image\" />\n \n \u003cejs-chart #chart id=\"chartContainer\">\n \u003c/ejs-chart>\n `\n})\nexport class Base64ExportComponent {\n @ViewChild('chart') chart: ChartComponent;\n public base64Image: string;\n \n getBase64(): void {\n let chartElement = document.getElementById('chartContainer');\n let canvas = document.createElement('canvas');\n let svg = chartElement.querySelector('svg');\n \n if (svg) {\n let serializer = new XMLSerializer();\n let svgString = serializer.serializeToString(svg);\n \n canvas.width = svg.clientWidth;\n canvas.height = svg.clientHeight;\n \n let ctx = canvas.getContext('2d');\n let img = new Image();\n \n img.onload = () => {\n ctx.drawImage(img, 0, 0);\n this.base64Image = canvas.toDataURL('image/png');\n console.log('Base64:', this.base64Image);\n \n // Can now send to server or embed\n this.sendToServer(this.base64Image);\n };\n \n img.src = 'data:image/svg+xml;base64,' + btoa(svgString);\n }\n }\n \n sendToServer(base64: string): void {\n this.http.post('/api/save-chart', { image: base64 }).subscribe();\n }\n}\n```\n\n## Print Functionality\n\nPrint charts directly from the browser:\n\n```typescript\n@Component({\n template: `\n \u003cbutton (click)=\"printChart()\">Print Chart\u003c/button>\n \u003cbutton (click)=\"printMultiple()\">Print All Charts\u003c/button>\n \n \u003cejs-chart #chart1 id=\"chart1\" (beforePrint)='onBeforePrint($event)'>\n \u003c/ejs-chart>\n \n \u003cejs-chart #chart2 id=\"chart2\">\n \u003c/ejs-chart>\n `\n})\nexport class PrintChartComponent {\n @ViewChild('chart1') chart1: ChartComponent;\n @ViewChild('chart2') chart2: ChartComponent;\n \n printChart(): void {\n this.chart1.print();\n }\n \n printMultiple(): void {\n this.chart1.print(['chart1', 'chart2']);\n }\n \n onBeforePrint(args: IPrintEventArgs): void {\n // Customize print content\n console.log('Printing chart...');\n \n // Add custom header\n let header = document.createElement('div');\n header.innerHTML = '\u003ch1>Sales Report\u003c/h1>\u003cp>Printed on: ' + new Date().toLocaleDateString() + '\u003c/p>';\n args.htmlContent.prepend(header);\n }\n}\n```\n\n**Print with Custom Styling:**\n\n```typescript\nprintWithStyles(): void {\n // Inject print styles\n let style = document.createElement('style');\n style.innerHTML = `\n @media print {\n @page {\n size: landscape;\n margin: 2cm;\n }\n .e-chart {\n page-break-inside: avoid;\n }\n .no-print {\n display: none !important;\n }\n }\n `;\n document.head.appendChild(style);\n \n this.chart.print();\n \n // Clean up\n setTimeout(() => {\n document.head.removeChild(style);\n }, 1000);\n}\n```\n\n## Render Methods\n\n### SVG Rendering\n\nSVG is the default rendering mode. Best for:\n- Accessibility (DOM-based)\n- Crisp vector output\n- Small to moderate datasets\n- Interactive features\n\n```typescript\n\u003cejs-chart>\n \u003c!-- SVG rendering (default) -->\n\u003c/ejs-chart>\n```\n\n**SVG Advantages:**\n- Scalable without quality loss\n- CSS and animation support\n- Easy DOM manipulation\n- Better accessibility\n\n### Canvas Rendering\n\nEnable canvas for better performance with large datasets:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart [enableCanvas]='true'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='largeDataset'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class CanvasChartComponent {\n public largeDataset: Object[] = this.generateLargeDataset(50000);\n \n generateLargeDataset(count: number): Object[] {\n let data = [];\n for (let i = 0; i \u003c count; i++) {\n data.push({ x: i, y: Math.random() * 100 });\n }\n return data;\n }\n}\n```\n\n**When to Use Canvas:**\n- Datasets > 5,000 points\n- High-frequency updates\n- Limited device resources\n- Real-time data streaming\n\n**Canvas Limitations:**\n- No native tooltips (requires custom implementation)\n- Limited animation support\n- Lower accessibility\n- Cannot export as SVG\n\n**Performance Comparison:**\n\n```typescript\nexport class RenderComparisonComponent {\n testPerformance(): void {\n // Test SVG\n let svgStart = performance.now();\n this.renderSVGChart(this.largeData);\n let svgTime = performance.now() - svgStart;\n \n // Test Canvas\n let canvasStart = performance.now();\n this.renderCanvasChart(this.largeData);\n let canvasTime = performance.now() - canvasStart;\n \n console.log('SVG render time:', svgTime, 'ms');\n console.log('Canvas render time:', canvasTime, 'ms');\n console.log('Performance gain:', ((svgTime - canvasTime) / svgTime * 100).toFixed(2), '%');\n }\n}\n```\n\n## Module Injection\n\nInject feature modules as needed to reduce bundle size:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { \n ChartModule, \n LineSeriesService,\n ColumnSeriesService,\n CategoryService,\n LegendService,\n TooltipService,\n DataLabelService,\n ZoomService,\n ScrollBarService,\n DateTimeService\n} from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-chart',\n standalone: true,\n imports: [ChartModule],\n providers: [\n LineSeriesService,\n ColumnSeriesService,\n CategoryService,\n LegendService,\n TooltipService,\n DataLabelService,\n ZoomService,\n ScrollBarService,\n DateTimeService\n ],\n template: `\u003cejs-chart>\u003c/ejs-chart>`\n})\nexport class ChartComponent {}\n```\n\n**Available Services:**\n\n| Service | Feature |\n|---------|---------|\n| LineSeriesService | Line chart |\n| ColumnSeriesService | Column chart |\n| AreaSeriesService | Area chart |\n| BarSeriesService | Bar chart |\n| StackingColumnSeriesService | Stacked column |\n| StackingAreaSeriesService | Stacked area |\n| ScatterSeriesService | Scatter chart |\n| SplineSeriesService | Spline chart |\n| CategoryService | Category axis |\n| DateTimeService | DateTime axis |\n| LogarithmicService | Logarithmic axis |\n| LegendService | Legend |\n| TooltipService | Tooltip |\n| DataLabelService | Data labels |\n| ZoomService | Zooming |\n| ScrollBarService | Scrollbar |\n| SelectionService | Selection |\n| CrosshairService | Crosshair |\n| ExportService | Export functionality |\n\n## Animation Control\n\nFine-tune chart animations:\n\n```typescript\nexport class AnimationComponent {\n // Global animation settings\n public animation: Object = {\n enable: true,\n duration: 1500,\n delay: 100\n };\n \n // Per-series animation\n public series1Animation: Object = {\n enable: true,\n duration: 1000,\n delay: 0\n };\n \n public series2Animation: Object = {\n enable: true,\n duration: 1200,\n delay: 400 // Staggered animation\n };\n \n // Disable for performance\n disableAnimation(): void {\n this.animation = { enable: false };\n this.chart.refresh();\n }\n \n // Custom animation sequence\n animateSequence(): void {\n this.chart.series.forEach((series, index) => {\n setTimeout(() => {\n series.animation.enable = true;\n series.animation.duration = 800;\n this.chart.refresh();\n }, index * 300);\n });\n }\n}\n```\n\n## Selection and Highlighting\n\nEnable data point and series selection:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart \n [selectionMode]='selectionMode'\n (selectionComplete)='onSelectionComplete($event)'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='data'\n [selectionStyle]='selectionStyle'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class SelectionComponent {\n public selectionMode: string = 'Point'; // Point, Series, Cluster, DragXY, DragX, DragY\n \n public selectionStyle: string = 'chartSelection1'; // CSS class\n \n onSelectionComplete(args: ISelectionCompleteEventArgs): void {\n console.log('Selected:', args.selectedDataValues);\n \n // Process selected data\n this.processSelection(args.selectedDataValues);\n }\n \n processSelection(selectedData: any[]): void {\n // Calculate statistics\n let total = selectedData.reduce((sum, item) => sum + item.y, 0);\n let average = total / selectedData.length;\n \n console.log('Selection total:', total);\n console.log('Selection average:', average);\n }\n}\n```\n\n## Zooming and Panning\n\nEnable interactive zooming and panning:\n\n```typescript\nexport class ZoomChartComponent {\n public zoomSettings: Object = {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n enableMouseWheelZooming: true,\n enableDeferredZooming: false,\n enableScrollbar: true,\n enablePan: true,\n mode: 'XY', // X, Y, or XY\n showToolbar: true,\n toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']\n };\n \n // Programmatic zoom\n zoomToRange(): void {\n this.chart.zoomModule.zoomByRange(\n this.chart.primaryXAxis,\n new Date(2024, 0, 1), // Start\n new Date(2024, 5, 30) // End\n );\n }\n \n // Reset zoom\n resetZoom(): void {\n this.chart.zoomModule.reset();\n }\n}\n```\n\n## Crosshair and Trackball\n\nDisplay crosshair or trackball for precise data reading:\n\n```typescript\nexport class CrosshairComponent {\n public crosshair: Object = {\n enable: true,\n line: {\n width: 2,\n color: '#FF0000'\n },\n lineType: 'Vertical' // Both, Horizontal, Vertical\n };\n \n public tooltip: Object = {\n enable: true,\n shared: true // Show data from all series\n };\n}\n```\n\n## Synchronized Charts\n\nSynchronize interactions across multiple charts:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart #chart1 \n (chartMouseMove)='synchronizeCharts($event)'\n (chartMouseLeave)='hideTooltips()'>\n \u003c/ejs-chart>\n \n \u003cejs-chart #chart2>\n \u003c/ejs-chart>\n `\n})\nexport class SynchronizedChartsComponent {\n @ViewChild('chart1') chart1: ChartComponent;\n @ViewChild('chart2') chart2: ChartComponent;\n \n synchronizeCharts(args: IMouseEventArgs): void {\n if (args.target.includes('Series')) {\n let xValue = args.axisData.primaryXAxis;\n \n // Show tooltips on both charts\n this.showTooltipAtX(this.chart2, xValue);\n }\n }\n \n showTooltipAtX(chart: ChartComponent, xValue: any): void {\n // Implementation to show tooltip\n }\n \n hideTooltips(): void {\n this.chart2.hideTooltip();\n }\n}\n```\n\n## Best Practices\n\n1. **Event Handler Performance:**\n```typescript\n// Debounce frequent events\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nprivate mouseMoveSubject = new Subject\u003cIMouseEventArgs>();\n\nngOnInit() {\n this.mouseMoveSubject.pipe(\n debounceTime(100)\n ).subscribe(args => {\n this.handleMouseMove(args);\n });\n}\n\nonChartMouseMove(args: IMouseEventArgs): void {\n this.mouseMoveSubject.next(args);\n}\n```\n\n2. **Efficient Export:**\n```typescript\n// Cache export settings\nprivate exportConfig = {\n type: 'PNG',\n width: 1920,\n height: 1080\n};\n\nexportOptimized(): void {\n this.chart.export(\n this.exportConfig.type,\n 'chart',\n null,\n null,\n this.exportConfig.width,\n this.exportConfig.height\n );\n}\n```\n\n3. **Memory Management:**\n```typescript\nngOnDestroy() {\n // Clear event listeners\n this.subscriptions.forEach(sub => sub.unsubscribe());\n \n // Destroy chart\n if (this.chart) {\n this.chart.destroy();\n }\n}\n```\n\n## Advanced Patterns\n\n### Pattern 1: Event-Driven Updates\n\n```typescript\nexport class EventDrivenChart {\n private dataUpdateSubject = new Subject\u003cany[]>();\n \n ngOnInit() {\n this.dataUpdateSubject.pipe(\n debounceTime(300),\n distinctUntilChanged()\n ).subscribe(data => {\n this.chart.series[0].setData(data);\n });\n }\n \n updateData(newData: any[]): void {\n this.dataUpdateSubject.next(newData);\n }\n}\n```\n\n### Pattern 2: Conditional Export\n\n```typescript\nonBeforeExport(args: IExportEventArgs): void {\n // Check data quality\n if (!this.validateDataQuality()) {\n args.cancel = true;\n this.showWarning('Data quality check failed');\n return;\n }\n \n // Add watermark for drafts\n if (this.isDraft) {\n args.chart.annotations = [{\n content: '\u003cdiv style=\"opacity:0.3\">DRAFT\u003c/div>',\n x: '50%',\n y: '50%',\n coordinateUnits: 'Pixel'\n }];\n }\n}\n```\n\n## Troubleshooting\n\n### Export Not Working\n\n**Issue:** Export function not available\n**Solutions:**\n- Import ExportService in providers\n- Verify chart is fully loaded\n- Check browser compatibility\n- Ensure CORS for remote images\n\n### Events Not Firing\n\n**Issue:** Event handlers not called\n**Solutions:**\n- Verify event name spelling\n- Check event is supported by chart type\n- Ensure proper binding syntax\n- Test in loaded event\n\n### Performance Issues\n\n**Issue:** Slow rendering with events\n**Solutions:**\n- Debounce frequent events\n- Use Canvas rendering\n- Minimize DOM manipulation in handlers\n- Profile with Chrome DevTools\n\n## API Reference Summary\n\n### Event Interfaces\n\n| Event | Interface | Description | API Reference |\n|-------|-----------|-------------|---------------|\n| load | ILoadedEventArgs | Before chart loads | [ILoadedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLoadedEventArgs) |\n| loaded | ILoadedEventArgs | After chart loads | [ILoadedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLoadedEventArgs) |\n| pointRender | IPointRenderEventArgs | Before point rendering | [IPointRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointRenderEventArgs) |\n| seriesRender | ISeriesRenderEventArgs | Before series rendering | [ISeriesRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs) |\n| axisLabelRender | IAxisLabelRenderEventArgs | Before axis label rendering | [IAxisLabelRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAxisLabelRenderEventArgs) |\n| legendRender | ILegendRenderEventArgs | Before legend rendering | [ILegendRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLegendRenderEventArgs) |\n| tooltipRender | ITooltipRenderEventArgs | Before tooltip rendering | [ITooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iTooltipRenderEventArgs) |\n| pointClick | IPointEventArgs | Point click | [IPointEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointEventArgs) |\n| chartMouseClick | IMouseEventArgs | Chart click | [IMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| chartMouseMove | IMouseEventArgs | Mouse move | [IMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| beforeExport | IExportEventArgs | Before export | [IExportEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iExportEventArgs) |\n| afterExport | IExportEventArgs | After export | [IExportEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iExportEventArgs) |\n| beforePrint | IPrintEventArgs | Before print | [IPrintEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPrintEventArgs) |\n| animationComplete | IAnimationCompleteEventArgs | After animation | [IAnimationCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAnimationCompleteEventArgs) |\n\n**All Event Interfaces:** See [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) for complete event list (40+ events)\n\n### Export and Print\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| ExportType | Export format enum (PNG, JPEG, SVG, PDF) | [exportType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/exportType) |\n| Export | Export utility class | [export.md](https://ej2.syncfusion.com/angular/documentation/api/chart/export) |\n| PrintUtils | Print utility functions | [printUtils.md](https://ej2.syncfusion.com/angular/documentation/api/chart/printUtils) |\n| IExportEventArgs | Export event interface | [iExportEventArgs.md](https://ej2.syncfusion.com/angular/documentation/api/chart/iExportEventArgs) |\n| IPrintEventArgs | Print event interface | [iPrintEventArgs.md](https://ej2.syncfusion.com/angular/documentation/api/chart/iPrintEventArgs) |\n| IPDFArgs | PDF export arguments | [iPDFArgs.md](https://ej2.syncfusion.com/angular/documentation/api/chart/iPDFArgs) |\n\n### Rendering and Performance\n\n| Property | Type | Description | API Reference |\n|----------|------|-------------|---------------|\n| enableCanvas | boolean | Enable canvas rendering | [ChartModel.enableCanvas](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#enableCanvas) |\n| enableAnimation | boolean | Enable animations | [ChartModel.enableAnimation](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#enableAnimation) |\n| animation | AnimationModel | Animation configuration | [AnimationModel](https://ej2.syncfusion.com/angular/documentation/api/chart/animationModel) |\n\n### Selection and Highlight\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| SelectionMode | Selection mode enum (Point, Series, Cluster, DragXY, etc.) | [selectionMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/selectionMode) |\n| SelectionPattern | Selection pattern enum | [selectionPattern.md](https://ej2.syncfusion.com/angular/documentation/api/chart/selectionPattern) |\n| HighlightMode | Highlight mode enum | [highlightMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/highlightMode) |\n| Highlight | Highlight settings | [highlight.md](https://ej2.syncfusion.com/angular/documentation/api/chart/highlight) |\n| Selection | Selection settings | [selection.md](https://ej2.syncfusion.com/angular/documentation/api/chart/selection) |\n| ISelectionCompleteEventArgs | Selection complete event | [iSelectionCompleteEventArgs.md](https://ej2.syncfusion.com/angular/documentation/api/chart/iSelectionCompleteEventArgs) |\n\n### Chart Methods\n\n| Method | Description | API Reference |\n|--------|-------------|---------------|\n| export() | Export chart to image/PDF | [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) |\n| print() | Print chart | [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) |\n| refresh() | Refresh chart rendering | [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) |\n| destroy() | Destroy chart instance | [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) |\n\n### Animation Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| AnimationModel | Animation configuration interface | [animationModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/animationModel) |\n| Animation | Animation class | [animation.md](https://ej2.syncfusion.com/angular/documentation/api/chart/animation) |\n\n### Drag Settings\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| DragSettingsModel | Drag configuration interface | [dragSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/dragSettingsModel) |\n| DragSettings | Drag settings class | [dragSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/dragSettings) |\n| IDragCompleteEventArgs | Drag complete event | [iDragCompleteEventArgs.md](https://ej2.syncfusion.com/angular/documentation/api/chart/iDragCompleteEventArgs) |\n\n### All Chart Events\n\nComplete list of events available in [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel):\n\n**Lifecycle Events:** load, loaded, animationComplete\n**Rendering Events:** seriesRender, pointRender, axisLabelRender, legendRender, textRender, annotationRender\n**Interaction Events:** pointClick, pointDoubleClick, pointMove, chartMouseClick, chartMouseMove, chartMouseDown, chartMouseUp, chartMouseLeave, chartDoubleClick\n**Feature Events:** tooltipRender, sharedTooltipRender, legendClick, axisLabelClick, multiLevelLabelClick\n**Zoom Events:** onZooming, zoomComplete\n**Scroll Events:** scrollStart, scrollEnd, scrollChanged\n**Selection Events:** selectionComplete\n**Drag Events:** drag, dragStart, dragEnd, dragComplete\n**Export/Print Events:** beforeExport, afterExport, beforePrint\n**Resize Events:** beforeResize, resized\n**Data Events:** axisRangeCalculated\n\n---\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":34981,"content_sha256":"403efc80ebad0c0cbd6d54f8f620ebf9ce668f6825b5a7cd70059ca21e5817e3"},{"filename":"references/api-reference.md","content":"# Syncfusion Angular Chart API Reference Guide\n\nThis document provides a comprehensive overview of the Syncfusion Angular Chart API documentation. All API documentation is available online at the official Syncfusion documentation site.\n\n**Base URL:** https://ej2.syncfusion.com/angular/documentation/api/chart/\n\n## API Documentation Overview\n\n**Total APIs:** 200+ interfaces, classes, enums, and event interfaces \n**Categories:**\n- **Interfaces/Models:** 100+ configuration interfaces\n- **Classes:** 30+ implementation classes\n- **Enumerations:** 50+ enum types\n- **Event Interfaces:** 40+ event argument interfaces\n- **Utility Types:** 20+ helper types\n\n## Core Configuration APIs\n\n### Primary Interfaces\n\n| API | Properties | Description | Documentation Link |\n|-----|------------|-------------|-------------------|\n| **Chart** | 40+ | Main chart component with title, width, height, axes, series, theme, tooltip, legend, zoom, and all 40+ events | [Chart API](https://ej2.syncfusion.com/angular/documentation/api/chart/chart) |\n| **Axis** | 50+ | Complete axis configuration: valueType, minimum, maximum, interval, labels, gridlines, ticks, crossing, formatting | [Axis API](https://ej2.syncfusion.com/angular/documentation/api/chart/axis) |\n| **AxisModel** | 50+ | Axis model interface | [AxisModel API](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) |\n| **Series** | 60+ | Series configuration: type, dataSource, xName, yName, marker, animation, colors, borders, financial fields | [Series API](https://ej2.syncfusion.com/angular/documentation/api/chart/series) |\n| **SeriesModel** | - | Series model interface | [SeriesModel API](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel) |\n\n## Chart Elements APIs\n\n### Legend\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| LegendSettingsModel | Complete legend configuration interface | [LegendSettingsModel API](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) |\n| LegendSettings | Legend settings class | [LegendSettings API](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings) |\n| LegendPosition | Position enum (Top, Bottom, Left, Right, Custom) | [LegendPosition API](https://ej2.syncfusion.com/angular/documentation/api/chart/legendPosition) |\n| LegendShape | Icon shape enum (Circle, Rectangle, Triangle, Diamond, etc.) | [LegendShape API](https://ej2.syncfusion.com/angular/documentation/api/chart/legendShape) |\n| LegendMode | Rendering mode (Series, Point, Range, Gradient) | [LegendMode API](https://ej2.syncfusion.com/angular/documentation/api/chart/#legendmode) |\n\n### Markers\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| MarkerSettingsModel | Complete marker configuration interface | [markerSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n| MarkerSettings | Marker settings class | [markerSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings) |\n| ChartShape | Marker shape enum (Circle, Rectangle, Diamond, Triangle, Pentagon, Cross, Plus, etc.) | [chartShape](https://ej2.syncfusion.com/angular/documentation/api/chart/chartShape) |\n\n### Data Labels\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| DataLabelSettingsModel | Data label configuration interface | [dataLabelSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel) |\n| DataLabelSettings | Data label settings class | [dataLabelSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings) |\n| DataLabelIntersectAction | Overlap handling (None, Hide, Rotate, etc.) | [dataLabelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelIntersectAction) |\n| LabelPosition | Label position enum | [labelPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPosition) |\n| Alignment | Text alignment enum | [alignment](https://ej2.syncfusion.com/angular/documentation/api/chart/alignment) |\n| TextAlignment | Text alignment options | [textAlignment](https://ej2.syncfusion.com/angular/documentation/api/chart/textAlignment) |\n| TextOverflow | Text overflow behavior | [textOverflow](https://ej2.syncfusion.com/angular/documentation/api/chart/textOverflow) |\n| TextWrap | Text wrapping options | [textWrap](https://ej2.syncfusion.com/angular/documentation/api/chart/textWrap) |\n\n### Tooltip\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| TooltipSettingsModel | Complete tooltip configuration interface | [tooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel) |\n| TooltipSettings | Tooltip settings class | [tooltipSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettings) |\n| TooltipPosition | Tooltip position enum | [tooltipPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipPosition) |\n| FadeOutMode | Tooltip fade-out behavior | [fadeOutMode](https://ej2.syncfusion.com/angular/documentation/api/chart/fadeOutMode) |\n\n### Annotations\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| ChartAnnotationSettingsModel | Annotation configuration interface | [chartAnnotationSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel) |\n| ChartAnnotationSettings | Annotation settings class | [chartAnnotationSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettings) |\n| AnnotationDirective | Annotation directive for declaring annotations | [annotationDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective) |\n| Anchor | Anchor point enum (Chart, Series, Point) | [anchor](https://ej2.syncfusion.com/angular/documentation/api/chart/anchor) |\n| Position | Positioning enum | [position](https://ej2.syncfusion.com/angular/documentation/api/chart/position) |\n\n### Trendlines\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| TrendlineModel | Trendline configuration interface | [trendlineModel](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel) |\n| Trendline | Trendline class | [trendline](https://ej2.syncfusion.com/angular/documentation/api/chart/trendline) |\n| TrendlineDirective | Trendline directive | [trendlineDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineDirective) |\n| TrendlineTypes | Types enum (Linear, Exponential, Polynomial, Power, Logarithmic, MovingAverage) | [trendlineTypes](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineTypes) |\n\n### Technical Indicators\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| TechnicalIndicatorModel | Indicator configuration interface | [technicalIndicatorModel](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel) |\n| TechnicalIndicator | Indicator class | [technicalIndicator](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicator) |\n| IndicatorDirective | Indicator directive | [indicatorDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/indicatorDirective) |\n| TechnicalIndicators | Indicator types enum (SMA, EMA, TMA, Momentum, ATR, RSI, Stochastic, BollingerBands, MACD, etc.) | [technicalIndicators](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicators) |\n| MacdType | MACD type enum | [macdType](https://ej2.syncfusion.com/angular/documentation/api/chart/macdType) |\n\n### Striplines\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| StripLineSettingsModel | Stripline configuration interface | [stripLineSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel) |\n| StripLineSettings | Stripline settings class | [stripLineSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettings) |\n| StripLine | Stripline class | [stripLine](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLine) |\n| StripLineDirective | Stripline directive | [stripLineDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineDirective) |\n\n## Interactive Feature APIs\n\n### Zooming and Panning\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| ZoomSettingsModel | Complete zoom configuration interface | [zoomSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettingsModel) |\n| ZoomSettings | Zoom settings class | [zoomSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings) |\n| ZoomMode | Zoom mode enum (X, Y, XY) | [zoomMode](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomMode) |\n| ToolbarItems | Zoom toolbar items enum | [toolbarItems](https://ej2.syncfusion.com/angular/documentation/api/chart/toolbarItems) |\n| ToolbarPosition | Toolbar position | [toolbarPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/toolbarPosition) |\n| ScrollbarSettingsModel | Scrollbar configuration interface | [scrollbarSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/scrollbarSettingsModel) |\n| ScrollbarSettings | Scrollbar settings class | [scrollbarSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/scrollbarSettings) |\n| ScrollbarPosition | Scrollbar position enum | [scrollbarPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/scrollbarPosition) |\n| ScrollbarSettingsRangeModel | Scrollbar range model | [scrollbarSettingsRangeModel](https://ej2.syncfusion.com/angular/documentation/api/chart/scrollbarSettingsRangeModel) |\n\n### Crosshair\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| CrosshairSettingsModel | Crosshair configuration interface | [crosshairSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettingsModel) |\n| CrosshairSettings | Crosshair settings class | [crosshairSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings) |\n| Crosshair | Crosshair class | [crosshair](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshair) |\n| CrosshairTooltipModel | Crosshair tooltip configuration | [crosshairTooltipModel](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltipModel) |\n| CrosshairTooltip | Crosshair tooltip class | [crosshairTooltip](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltip) |\n| LineType | Line type enum | [lineType](https://ej2.syncfusion.com/angular/documentation/api/chart/lineType) |\n\n### Selection and Highlighting\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| SelectionMode | Selection mode enum (None, Point, Series, Cluster, DragXY, DragX, DragY, Lasso) | [selectionMode](https://ej2.syncfusion.com/angular/documentation/api/chart/selectionMode) |\n| SelectionPattern | Selection pattern enum (None, Dots, DiagonalForward, Crosshatch, Pacman, etc.) | [selectionPattern](https://ej2.syncfusion.com/angular/documentation/api/chart/selectionPattern) |\n| HighlightMode | Highlight mode enum (None, Point, Series, Cluster) | [highlightMode](https://ej2.syncfusion.com/angular/documentation/api/chart/highlightMode) |\n| Highlight | Highlight settings | [highlight](https://ej2.syncfusion.com/angular/documentation/api/chart/highlight) |\n| Selection | Selection settings | [selection](https://ej2.syncfusion.com/angular/documentation/api/chart/selection) |\n| SelectedDataIndexDirective | Selected data index directive | [selectedDataIndexDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/selectedDataIndexDirective) |\n\n### Data Editing\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| DragSettingsModel | Drag configuration interface | [dragSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/dragSettingsModel) |\n| DragSettings | Drag settings class | [dragSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/dragSettings) |\n\n## Axis Configuration APIs\n\n### Axis Properties\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| AxisModel | Complete axis configuration (50+ properties) | [axisModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) |\n| Axis | Axis class | [axis](https://ej2.syncfusion.com/angular/documentation/api/chart/axis) |\n| AxisDirective | Axis directive for multiple axes | [axisDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective) |\n| ValueType | Axis value type enum (Double, DateTime, DateTimeCategory, Category, Logarithmic) | [valueType](https://ej2.syncfusion.com/angular/documentation/api/chart/valueType) |\n| IntervalType | DateTime interval enum (Years, Months, Days, Hours, Minutes, Seconds, Auto) | [intervalType](https://ej2.syncfusion.com/angular/documentation/api/chart/intervalType) |\n| SkeletonType | DateTime skeleton types | [skeletonType](https://ej2.syncfusion.com/angular/documentation/api/chart/skeletonType) |\n| ChartRangePadding | Axis padding modes (None, Normal, Additional, Round, Auto) | [chartRangePadding](https://ej2.syncfusion.com/angular/documentation/api/chart/chartRangePadding) |\n| AxisPosition | Axis position enum (Inside, Outside) | [axisPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/axisPosition) |\n| EdgeLabelPlacement | Edge label placement (None, Hide, Shift) | [edgeLabelPlacement](https://ej2.syncfusion.com/angular/documentation/api/chart/edgeLabelPlacement) |\n\n### Axis Labels\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| LabelIntersectAction | Label overlap handling (None, Hide, Trim, Wrap, MultipleRows, Rotate45, Rotate90) | [labelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/labelIntersectAction) |\n| LabelPlacement | Label placement relative to ticks (BetweenTicks, OnTicks) | [labelPlacement](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPlacement) |\n| LabelPosition | Label position enum | [labelPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPosition) |\n| LabelOverflow | Label overflow behavior | [labelOverflow](https://ej2.syncfusion.com/angular/documentation/api/chart/labelOverflow) |\n| LabelBorderModel | Label border configuration | [labelBorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/labelBorderModel) |\n| LabelBorder | Label border class | [labelBorder](https://ej2.syncfusion.com/angular/documentation/api/chart/labelBorder) |\n\n### Gridlines and Tick Lines\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| MajorGridLinesModel | Major gridline configuration | [majorGridLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/majorGridLinesModel) |\n| MajorGridLines | Major gridlines class | [majorGridLines](https://ej2.syncfusion.com/angular/documentation/api/chart/majorGridLines) |\n| MinorGridLinesModel | Minor gridline configuration | [minorGridLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/minorGridLinesModel) |\n| MinorGridLines | Minor gridlines class | [minorGridLines](https://ej2.syncfusion.com/angular/documentation/api/chart/minorGridLines) |\n| MajorTickLinesModel | Major tick line configuration | [majorTickLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/majorTickLinesModel) |\n| MajorTickLines | Major tick lines class | [majorTickLines](https://ej2.syncfusion.com/angular/documentation/api/chart/majorTickLines) |\n| MinorTickLinesModel | Minor tick line configuration | [minorTickLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/minorTickLinesModel) |\n| MinorTickLines | Minor tick lines class | [minorTickLines](https://ej2.syncfusion.com/angular/documentation/api/chart/minorTickLines) |\n| AxisLineModel | Axis line configuration | [axisLineModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisLineModel) |\n| AxisLine | Axis line class | [axisLine](https://ej2.syncfusion.com/angular/documentation/api/chart/axisLine) |\n\n### Multi-Level Labels\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| MultiLevelLabelsModel | Multi-level label configuration | [multiLevelLabelsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/multiLevelLabelsModel) |\n| MultiLevelLabels | Multi-level labels class | [multiLevelLabels](https://ej2.syncfusion.com/angular/documentation/api/chart/multiLevelLabels) |\n| MultiLevelLabelDirective | Multi-level label directive | [multiLevelLabelDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/multiLevelLabelDirective) |\n| MultiLevelCategoriesModel | Multi-level categories configuration | [multiLevelCategoriesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/multiLevelCategoriesModel) |\n| MultiLevelCategories | Multi-level categories class | [multiLevelCategories](https://ej2.syncfusion.com/angular/documentation/api/chart/multiLevelCategories) |\n\n## Series Configuration APIs\n\n### Series Types\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| ChartSeriesType | All series types enum (Line, Column, Bar, Area, Spline, Scatter, Bubble, Candle, Hilo, Histogram, BoxAndWhisker, Pareto, Polar, Radar, Waterfall, StackingLine, StackingColumn, StackingArea, and 10+ more) | [chartSeriesType](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSeriesType) |\n| ChartDrawType | Draw types for Polar/Radar (Line, Column, Area, Scatter, Spline, StackingArea, StackingColumn, RangeColumn) | [chartDrawType](https://ej2.syncfusion.com/angular/documentation/api/chart/chartDrawType) |\n\n### Series Styling\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| BorderModel | Border configuration | [borderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel) |\n| Border | Border class | [border](https://ej2.syncfusion.com/angular/documentation/api/chart/border) |\n| BorderType | Border type enum | [borderType](https://ej2.syncfusion.com/angular/documentation/api/chart/borderType) |\n| CornerRadiusModel | Corner radius configuration | [cornerRadiusModel](https://ej2.syncfusion.com/angular/documentation/api/chart/cornerRadiusModel) |\n| CornerRadius | Corner radius class | [cornerRadius](https://ej2.syncfusion.com/angular/documentation/api/chart/cornerRadius) |\n| ConnectorModel | Connector line configuration | [connectorModel](https://ej2.syncfusion.com/angular/documentation/api/chart/connectorModel) |\n| Connector | Connector class | [connector](https://ej2.syncfusion.com/angular/documentation/api/chart/connector) |\n\n### Financial Series\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| FinancialDataFields | OHLC data field interface | [financialDataFields](https://ej2.syncfusion.com/angular/documentation/api/chart/financialDataFields) |\n\n### Specialized Series\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| SplineType | Spline interpolation types (Natural, Monotonic, Cardinal, Clamped) | [splineType](https://ej2.syncfusion.com/angular/documentation/api/chart/splineType) |\n| BoxPlotMode | Box plot calculation modes (Normal, Exclusive, Inclusive) | [boxPlotMode](https://ej2.syncfusion.com/angular/documentation/api/chart/boxPlotMode) |\n| ParetoOptionsModel | Pareto line configuration | [paretoOptionsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/paretoOptionsModel) |\n| ParetoOptions | Pareto options class | [paretoOptions](https://ej2.syncfusion.com/angular/documentation/api/chart/paretoOptions) |\n| StepPosition | Step line position (Left, Center, Right) | [stepPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/stepPosition) |\n\n### Empty Points and Error Bars\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| EmptyPointSettingsModel | Empty point configuration | [emptyPointSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel) |\n| EmptyPointSettings | Empty point settings class | [emptyPointSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettings) |\n| EmptyPointMode | Empty point modes (Gap, Zero, Average, Drop) | [emptyPointMode](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointMode) |\n| ErrorBarSettingsModel | Error bar configuration | [errorBarSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarSettingsModel) |\n| ErrorBarSettings | Error bar settings class | [errorBarSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarSettings) |\n| ErrorBarType | Error bar types (Fixed, Percentage, StandardDeviation, StandardError, Custom) | [errorBarType](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarType) |\n| ErrorBarMode | Error bar modes (Vertical, Horizontal, Both) | [errorBarMode](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarMode) |\n| ErrorBarDirection | Error bar direction (Both, Plus, Minus) | [errorBarDirection](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarDirection) |\n| ErrorBarCapSettingsModel | Error bar cap configuration | [errorBarCapSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarCapSettingsModel) |\n| ErrorBarCapSettings | Error bar cap settings class | [errorBarCapSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/errorBarCapSettings) |\n\n### Color Mapping\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| RangeColorSettingModel | Range color mapping configuration | [rangeColorSettingModel](https://ej2.syncfusion.com/angular/documentation/api/chart/rangeColorSettingModel) |\n| RangeColorSetting | Range color setting class | [rangeColorSetting](https://ej2.syncfusion.com/angular/documentation/api/chart/rangeColorSetting) |\n| RangeColorSettingDirective | Range color setting directive | [rangeColorSettingDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/rangeColorSettingDirective) |\n\n## Chart Layout APIs\n\n### Chart Area\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| ChartAreaModel | Chart area configuration | [chartAreaModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAreaModel) |\n| ChartArea | Chart area class | [chartArea](https://ej2.syncfusion.com/angular/documentation/api/chart/chartArea) |\n| MarginModel | Margin configuration | [marginModel](https://ej2.syncfusion.com/angular/documentation/api/chart/marginModel) |\n| Margin | Margin class | [margin](https://ej2.syncfusion.com/angular/documentation/api/chart/margin) |\n| ContainerPaddingModel | Container padding configuration | [containerPaddingModel](https://ej2.syncfusion.com/angular/documentation/api/chart/containerPaddingModel) |\n| ContainerPadding | Container padding class | [containerPadding](https://ej2.syncfusion.com/angular/documentation/api/chart/containerPadding) |\n\n### Rows and Columns\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| RowModel | Row definition for multiple panes | [rowModel](https://ej2.syncfusion.com/angular/documentation/api/chart/rowModel) |\n| Row | Row class | [row](https://ej2.syncfusion.com/angular/documentation/api/chart/row) |\n| RowDirective | Row directive | [rowDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/rowDirective) |\n| ColumnModel | Column definition for multiple panes | [columnModel](https://ej2.syncfusion.com/angular/documentation/api/chart/columnModel) |\n| Column | Column class | [column](https://ej2.syncfusion.com/angular/documentation/api/chart/column) |\n| ColumnDirective | Column directive | [columnDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/columnDirective) |\n\n### Title and Styling\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| TitleSettingsModel | Title configuration | [titleSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/titleSettingsModel) |\n| TitleSettings | Title settings class | [titleSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/titleSettings) |\n| TitleStyleSettingsModel | Title style configuration | [titleStyleSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/titleStyleSettingsModel) |\n| TitleStyleSettings | Title style settings class | [titleStyleSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/titleStyleSettings) |\n| TitlePosition | Title position enum | [titlePosition](https://ej2.syncfusion.com/angular/documentation/api/chart/titlePosition) |\n| TitleBorderModel | Title border configuration | [titleBorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/titleBorderModel) |\n| TitleBorder | Title border class | [titleBorder](https://ej2.syncfusion.com/angular/documentation/api/chart/titleBorder) |\n\n### Theme and Appearance\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| ChartTheme | Theme enum (Material, Bootstrap, Fabric, Bootstrap4, Tailwind, TailwindDark, Bootstrap5, Bootstrap5Dark, Fluent, FluentDark, Material3, Material3Dark, and more) | [chartTheme](https://ej2.syncfusion.com/angular/documentation/api/chart/chartTheme) |\n| FontModel | Font configuration | [fontModel](https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel) |\n| Font | Font class | [font](https://ej2.syncfusion.com/angular/documentation/api/chart/font) |\n| LocationModel | Location/position configuration | [locationModel](https://ej2.syncfusion.com/angular/documentation/api/chart/locationModel) |\n| Documentation Link | Location class | [location](https://ej2.syncfusion.com/angular/documentation/api/chart/location) |\n| OffsetModel | Offset configuration | [offsetModel](https://ej2.syncfusion.com/angular/documentation/api/chart/offsetModel) |\n| Offset | Offset class | [offset](https://ej2.syncfusion.com/angular/documentation/api/chart/offset) |\n\n## Animation and Performance APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| AnimationModel | Animation configuration | [animationModel](https://ej2.syncfusion.com/angular/documentation/api/chart/animationModel) |\n| Animation | Animation class | [animation](https://ej2.syncfusion.com/angular/documentation/api/chart/animation) |\n\n## Export and Print APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| ExportType | Export format enum (PNG, JPEG, SVG, PDF, XLSX, CSV) | [exportType](https://ej2.syncfusion.com/angular/documentation/api/chart/exportType) |\n| Export | Export utility class | [export](https://ej2.syncfusion.com/angular/documentation/api/chart/export) |\n| PrintUtils | Print utility functions | [printUtils](https://ej2.syncfusion.com/angular/documentation/api/chart/printUtils) |\n| Units | Size units enum | [units](https://ej2.syncfusion.com/angular/documentation/api/chart/units) |\n\n## Event Interfaces\n\n### Lifecycle Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| ILoadedEventArgs | Chart load events (load, loaded) | [iLoadedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLoadedEventArgs) |\n| IChartEventArgs | Base chart event arguments | [iChartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iChartEventArgs) |\n| IAnimationCompleteEventArgs | Animation complete event | [iAnimationCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAnimationCompleteEventArgs) |\n\n### Rendering Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| IPointRenderEventArgs | Point rendering event | [iPointRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointRenderEventArgs) |\n| ISeriesRenderEventArgs | Series rendering event | [iSeriesRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs) |\n| IAxisLabelRenderEventArgs | Axis label rendering event | [iAxisLabelRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAxisLabelRenderEventArgs) |\n| IAxisMultiLabelRenderEventArgs | Multi-level axis label rendering | [iAxisMultiLabelRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAxisMultiLabelRenderEventArgs) |\n| ILegendRenderEventArgs | Legend rendering event | [iLegendRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLegendRenderEventArgs) |\n| ITextRenderEventArgs | Text rendering event (data labels) | [iTextRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iTextRenderEventArgs) |\n| IAnnotationRenderEventArgs | Annotation rendering event | [iAnnotationRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAnnotationRenderEventArgs) |\n\n### Interaction Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| IMouseEventArgs | Mouse events (click, move, down, up, leave) | [iMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| IPointEventArgs | Point events (click, doubleClick, move) | [iPointEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointEventArgs) |\n| ITooltipRenderEventArgs | Tooltip rendering event | [iTooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iTooltipRenderEventArgs) |\n| ISharedTooltipRenderEventArgs | Shared tooltip rendering | [iSharedTooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSharedTooltipRenderEventArgs) |\n| ILegendClickEventArgs | Legend click event | [iLegendClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLegendClickEventArgs) |\n| IAxisLabelClickEventArgs | Axis label click event | [iAxisLabelClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAxisLabelClickEventArgs) |\n| IMultiLevelLabelClickEventArgs | Multi-level label click | [iMultiLevelLabelClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMultiLevelLabelClickEventArgs) |\n\n### Feature Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| IZoomingEventArgs | During zoom operation | [iZoomingEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iZoomingEventArgs) |\n| IZoomCompleteEventArgs | After zoom completes | [iZoomCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iZoomCompleteEventArgs) |\n| IScrollEventArgs | Scrollbar events (start, end, changed) | [iScrollEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iScrollEventArgs) |\n| ISelectionCompleteEventArgs | After selection completes | [iSelectionCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSelectionCompleteEventArgs) |\n| IDragCompleteEventArgs | Drag operation complete | [iDragCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iDragCompleteEventArgs) |\n| IDataEditingEventArgs | Data editing event | [iDataEditingEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iDataEditingEventArgs) |\n\n### Export and Print Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| IExportEventArgs | Export events (beforeExport, afterExport) | [iExportEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iExportEventArgs) |\n| IPrintEventArgs | Print events (beforePrint) | [iPrintEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPrintEventArgs) |\n| IPDFArgs | PDF export arguments | [iPDFArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPDFArgs) |\n\n### Resize Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| IResizeEventArgs | Resize events (resized) | [iResizeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iResizeEventArgs) |\n| IBeforeResizeEventArgs | Before resize event | [iBeforeResizeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iBeforeResizeEventArgs) |\n\n### Data Events\n\n| Event Interface | Description | Documentation Link |\n|-----------------|-------------|----------|\n| IAxisRangeCalculatedEventArgs | After axis range calculation | [iAxisRangeCalculatedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAxisRangeCalculatedEventArgs) |\n\n## Utility and Helper APIs\n\n### Points and Data\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| Points | Points data structure | [points](https://ej2.syncfusion.com/angular/documentation/api/chart/points) |\n| Indexes | Index collection | [indexes](https://ej2.syncfusion.com/angular/documentation/api/chart/indexes) |\n| IndexesModel | Index model | [indexesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/indexesModel) |\n\n### Stock Chart Specific\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| StockTooltipSettingsModel | Stock tooltip configuration | [stockTooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/stockTooltipSettingsModel) |\n| StockTooltipSettings | Stock tooltip settings class | [stockTooltipSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/stockTooltipSettings) |\n| PeriodSelectorSettingsModel | Period selector configuration | [periodSelectorSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/periodSelectorSettingsModel) |\n| PeriodSelectorSettings | Period selector settings class | [periodSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/periodSelectorSettings) |\n| PeriodSelectorPosition | Period selector position enum | [periodSelectorPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/periodSelectorPosition) |\n| PeriodsModel | Periods configuration | [periodsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/periodsModel) |\n| Periods | Periods class | [periods](https://ej2.syncfusion.com/angular/documentation/api/chart/periods) |\n\n### Accessibility\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| AccessibilityModel | Accessibility configuration | [accessibilityModel](https://ej2.syncfusion.com/angular/documentation/api/chart/accessibilityModel) |\n| Accessibility | Accessibility class | [accessibility](https://ej2.syncfusion.com/angular/documentation/api/chart/accessibility) |\n| SeriesAccessibilityModel | Series accessibility configuration | [seriesAccessibilityModel](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesAccessibilityModel) |\n| SeriesAccessibility | Series accessibility class | [seriesAccessibility](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesAccessibility) |\n\n### Miscellaneous\n\n| API | Description | Documentation Link |\n|-----|-------------|----------|\n| CenterLabelModel | Center label configuration (for pie/donut) | [centerLabelModel](https://ej2.syncfusion.com/angular/documentation/api/chart/centerLabelModel) |\n| CenterLabel | Center label class | [centerLabel](https://ej2.syncfusion.com/angular/documentation/api/chart/centerLabel) |\n| SeriesBase | Base series class | [seriesBase](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesBase) |\n| SeriesBaseModel | Base series model | [seriesBaseModel](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesBaseModel) |\n| CategoryDirective | Category directive | [categoryDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/categoryDirective) |\n| SegmentDirective | Segment directive for multi-colored series | [segmentDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/segment) |\n| ChartSegmentModel | Chart segment model | [chartSegmentModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSegmentModel) |\n| ChartSegment | Chart segment class | [chartSegment](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSegment) |\n| RegionModel | Region configuration | [regions](https://ej2.syncfusion.com/angular/documentation/api/chart/regions) |\n| FlagType | Flag type enum | [flagType](https://ej2.syncfusion.com/angular/documentation/api/chart/flagType) |\n| SizeType | Size type enum | [sizeType](https://ej2.syncfusion.com/angular/documentation/api/chart/sizeType) |\n| ShapeType | Shape type enum | [shapeType](https://ej2.syncfusion.com/angular/documentation/api/chart/shapeType) |\n| zIndex | Z-index configuration | [zIndex](https://ej2.syncfusion.com/angular/documentation/api/chart/zIndex) |\n| StaticFunctions | Static utility functions | [staticFunctions](https://ej2.syncfusion.com/angular/documentation/api/chart/staticFunctions) |\n| Overview | API overview | [overview](https://ej2.syncfusion.com/angular/documentation/api/chart/overview) |\n| Summary | API summary | [summary](https://ej2.syncfusion.com/angular/documentation/api/chart/summary) |\n\n## How to Navigate the API Documentation\n\n### Quick Start Path\n\n1. **Start with Core APIs:**\n - Read [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) - Main chart configuration with all 40+ properties and events\n - Review [AxisModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) - Axis configuration with 50+ properties\n - Explore [SeriesDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective) - Series configuration with 60+ properties\n\n2. **Feature-Specific APIs:**\n - Look up specific feature models as needed (Legend, Tooltip, Zoom, Marker, DataLabel)\n - Reference event interfaces when implementing event handlers\n - Check enumerations for valid values (ChartSeriesType, ValueType, ChartTheme, etc.)\n\n3. **Advanced Usage:**\n - Review specialized APIs for financial charts, technical indicators, annotations\n - Check utility models for styling, animation, borders, fonts\n - Explore export/print utilities for sharing capabilities\n\n### Finding Specific APIs\n\n**By Feature:**\n- Legend: LegendSettingsModel, LegendPosition, LegendShape\n- Tooltip: TooltipSettingsModel, TooltipPosition\n- Zoom: ZoomSettingsModel, ZoomMode, ToolbarItems\n- Selection: SelectionMode, SelectionPattern, HighlightMode\n- Series Types: ChartSeriesType, ChartDrawType\n- Axes: AxisModel, ValueType, IntervalType, LabelIntersectAction\n\n**By Task:**\n- Styling: BorderModel, FontModel, MarginModel, CornerRadiusModel\n- Data Binding: FinancialDataFields, EmptyPointSettingsModel\n- Interaction: IMouseEventArgs, IPointEventArgs, ITooltipRenderEventArgs\n- Export: ExportType, IExportEventArgs, IPrintEventArgs\n- Layout: ChartAreaModel, RowModel, ColumnModel, TitleSettingsModel\n\n### API Documentation Structure\n\nEach API file contains:\n- **Property Descriptions:** Type, default value, description\n- **Enumeration Values:** All available options\n- **Usage Examples:** Common patterns\n- **Related APIs:** Cross-references to related interfaces/classes\n\n### Complete API File List\n\n**Location:** All 200+ API files are in the `chart/` directory\n**Organization:** Alphabetical by API name with Model suffix for interfaces\n\n**Categories:**\n- **Configuration Models:** xxxModel.md (100+ files)\n- **Implementation Classes:** xxx.md without Model suffix (30+ files)\n- **Enumerations:** Enum types (50+ files)\n- **Event Interfaces:** Ixxx.md files (40+ files)\n- **Directives:** xxxDirective.md (15+ files)\n- **Utilities:** Helper and utility classes (20+ files)\n\n## Integration with Reference Guides\n\nAll 10 reference guides link to relevant API documentation:\n\n1. **getting-started.md** → ChartModel, AxisModel, SeriesDirective, TooltipSettingsModel, LegendSettingsModel\n2. **series-types.md** → ChartSeriesType, SeriesDirective, Series properties (columnWidth, bearFillColor, binInterval, etc.)\n3. **axes-and-layout.md** → AxisModel, ValueType, IntervalType, LabelIntersectAction, ChartRangePadding\n4. **chart-elements.md** → Legend, Marker, DataLabel, Tooltip, Annotation, Trendline, TechnicalIndicator, StripLine APIs\n5. **interactive-features.md** → ZoomSettingsModel, TooltipSettingsModel, CrosshairSettingsModel, SelectionMode\n6. **data-binding.md** → Series.dataSource, EmptyPointSettingsModel, FinancialDataFields\n7. **customization.md** → ChartTheme, BorderModel, FontModel, AnimationModel\n8. **accessibility.md** → AccessibilityModel, SeriesAccessibilityModel\n9. **advanced-features.md** → All 40+ event interfaces, ExportType, IExportEventArgs\n10. **common-patterns.md** → Practical combinations of multiple APIs\n\n---\n\n**For the most up-to-date and comprehensive API documentation, always refer to the individual API files in the chart/ directory.**\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":41147,"content_sha256":"e1739116357da7230b11e0987aae77e588fd7f478af2a09552c510c0a25f4d12"},{"filename":"references/axes-and-layout.md","content":"# Axes and Chart Layout\n\nAxes define how data maps to visual space and provide context through labels, gridlines, and titles. This guide covers axis configuration, multiple axes, layout options, and chart structure.\n\n## Table of Contents\n\n- [Axis Types](#axis-types)\n- [Primary and Secondary Axes](#primary-and-secondary-axes)\n- [Multiple Axes](#multiple-axes)\n- [Axis Labels](#axis-labels)\n- [Gridlines and Tick Lines](#gridlines-and-tick-lines)\n- [Axis Crossing and Inversion](#axis-crossing-and-inversion)\n- [Multiple Panes](#multiple-panes)\n- [Chart Title and Subtitle](#chart-title-and-subtitle)\n- [Chart Dimensions](#chart-dimensions)\n- [Margins and Padding](#margins-and-padding)\n\n## Axis Types\n\nThe Syncfusion Chart supports four axis value types for mapping different data formats.\n\n**API Reference:** \n- [AxisModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) - Complete axis configuration with 50+ properties\n- [Axis](https://ej2.syncfusion.com/angular/documentation/api/chart/axis) - Axis class documentation\n- [ValueType](https://ej2.syncfusion.com/angular/documentation/api/chart/valueType) - Enum for axis value types\n\n### Numeric Axis (Double)\n\nFor continuous numerical data (default type).\n\n**API Properties:**\n- [Axis.valueType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#valueType) = 'Double' (default)\n- [Axis.minimum](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#minimum) (Object, default: null) - Minimum axis value\n- [Axis.maximum](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#maximum) (Object, default: null) - Maximum axis value\n- [Axis.interval](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#interval) (number, default: null) - Label interval spacing\n- [Axis.rangePadding](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#rangePadding) - [ChartRangePadding](https://ej2.syncfusion.com/angular/documentation/api/chart/chartRangePadding) enum (None, Normal, Additional, Round, Auto)\n- [Axis.desiredIntervals](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#desiredIntervals) (number, default: null) - Desired number of intervals\n\n```typescript\npublic primaryYAxis = {\n valueType: 'Double', // Default, can be omitted\n minimum: 0,\n maximum: 100,\n interval: 20,\n rangePadding: 'Normal',\n title: 'Sales (in USD)'\n};\n```\n\n### DateTime Axis\n\nFor time-series data with dates.\n\n**API Properties:**\n- [Axis.valueType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#valueType) = 'DateTime'\n- [Axis.labelFormat](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelFormat) (string, default: '') - Date/time format string\n- [Axis.intervalType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#intervalType) - [IntervalType](https://ej2.syncfusion.com/angular/documentation/api/chart/intervalType) enum (Years, Months, Days, Hours, Minutes, Seconds, Auto)\n- [Axis.interval](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#interval) (number, default: null) - Number of intervals\n- [Axis.skeleton](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#skeleton) (string, default: '') - Skeleton format for date labels\n- [Axis.skeletonType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#skeletonType) - [SkeletonType](https://ej2.syncfusion.com/angular/documentation/api/chart/skeletonType) enum (DateTime, Date, Time)\n\n```typescript\npublic data = [\n { date: new Date(2024, 0, 1), sales: 35 },\n { date: new Date(2024, 1, 1), sales: 28 },\n { date: new Date(2024, 2, 1), sales: 34 }\n];\n\npublic primaryXAxis = {\n valueType: 'DateTime',\n labelFormat: 'MMM yyyy',\n intervalType: 'Months',\n interval: 1,\n skeleton: 'yMMM',\n title: 'Date'\n};\n```\n\n**Interval Types:** See [IntervalType](https://ej2.syncfusion.com/angular/documentation/api/chart/intervalType)\n- `Years`, `Months`, `Days`, `Hours`, `Minutes`, `Seconds`, `Auto`\n\n**Label Formats:**\n- `'dd/MM/yyyy'`: 01/03/2024\n- `'MMM yyyy'`: Mar 2024\n- `'HH:mm'`: 14:30\n\n### Category Axis\n\nFor discrete categories (strings or numbers treated as categories).\n\n```typescript\npublic data = [\n { category: 'Product A', sales: 35 },\n { category: 'Product B', sales: 28 },\n { category: 'Product C', sales: 34 }\n];\n\npublic primaryXAxis = {\n valueType: 'Category',\n title: 'Products'\n};\n```\n\n**Features:**\n- Automatically spaces categories evenly\n- Supports label rotation for long names\n- Ideal for bar/column charts\n\n### Logarithmic Axis\n\nFor data spanning multiple orders of magnitude.\n\n**API Properties:**\n- [Axis.valueType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#valueType) = 'Logarithmic'\n- [Axis.logBase](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#logBase) (number, default: 10) - Base of logarithm (e.g., 2, 10, e)\n- [Axis.interval](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#interval) (number, default: null) - Interval in log scale\n\n```typescript\npublic data = [\n { x: 1, y: 10 },\n { x: 2, y: 100 },\n { x: 3, y: 1000 },\n { x: 4, y: 10000 }\n];\n\npublic primaryYAxis = {\n valueType: 'Logarithmic',\n logBase: 10,\n interval: 1,\n title: 'Value (log scale)'\n};\n```\n\n**Use Cases:**\n- Exponential growth data\n- Scientific measurements\n- Financial data with wide ranges\n\n## Primary and Secondary Axes\n\nCharts have primary X and Y axes by default. Secondary axes allow different scales.\n\n### Primary Axes\n\n```typescript\npublic primaryXAxis = {\n valueType: 'Category',\n title: 'Month'\n};\n\npublic primaryYAxis = {\n title: 'Sales (USD)',\n minimum: 0,\n maximum: 100\n};\n```\n\n```html\n\u003cejs-chart [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Column\" xName=\"month\" yName=\"sales\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Secondary Axes\n\nDisplay series with different scales on opposite sides.\n\n```typescript\npublic primaryYAxis = {\n title: 'Sales (USD)',\n minimum: 0,\n maximum: 100\n};\n\npublic axes = [{\n name: 'secondaryY',\n opposedPosition: true,\n title: 'Temperature (°C)',\n minimum: 0,\n maximum: 50\n}];\n```\n\n```html\n\u003cejs-chart [primaryYAxis]=\"primaryYAxis\" [axes]=\"axes\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"salesData\" type=\"Column\" xName=\"month\" yName=\"sales\" name=\"Sales\">\u003c/e-series>\n \u003ce-series [dataSource]=\"tempData\" type=\"Line\" xName=\"month\" yName=\"temp\" \n yAxisName=\"secondaryY\" name=\"Temperature\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n**Key Points:**\n- Use `opposedPosition: true` to place axis on right/top\n- Bind series to axis using `yAxisName` property\n- Different axis types allowed (e.g., Double + DateTime)\n\n## Multiple Axes\n\nCreate charts with more than two Y-axes for complex comparisons.\n\n### Multiple Y-Axes\n\n```typescript\npublic primaryYAxis = {\n name: 'yAxis1',\n title: 'Revenue (USD)',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n};\n\npublic axes = [\n {\n name: 'yAxis2',\n opposedPosition: true,\n title: 'Profit (%)',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n {\n name: 'yAxis3',\n rowIndex: 1,\n title: 'Units Sold',\n lineStyle: { width: 0 }\n }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"revenue\" type=\"Column\" xName=\"x\" yName=\"y\" yAxisName=\"yAxis1\">\u003c/e-series>\n\u003ce-series [dataSource]=\"profit\" type=\"Line\" xName=\"x\" yName=\"y\" yAxisName=\"yAxis2\">\u003c/e-series>\n\u003ce-series [dataSource]=\"units\" type=\"Area\" xName=\"x\" yName=\"y\" yAxisName=\"yAxis3\">\u003c/e-series>\n```\n\n### Multiple X-Axes\n\n```typescript\npublic primaryXAxis = {\n name: 'xAxis1',\n valueType: 'Category'\n};\n\npublic axes = [{\n name: 'xAxis2',\n opposedPosition: true,\n valueType: 'Category'\n}];\n```\n\n```html\n\u003ce-series [dataSource]=\"data1\" type=\"Column\" xName=\"x\" yName=\"y\" xAxisName=\"xAxis1\">\u003c/e-series>\n\u003ce-series [dataSource]=\"data2\" type=\"Line\" xName=\"x\" yName=\"y\" xAxisName=\"xAxis2\">\u003c/e-series>\n```\n\n## Axis Labels\n\nCustomize label appearance, rotation, and formatting.\n\n**API Reference:**\n- [Axis.labelFormat](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelFormat) - Label format string\n- [Axis.labelStyle](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelStyle) - [FontModel](https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel) for label styling\n- [Axis.labelRotation](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelRotation) - Label rotation angle\n- [Axis.labelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelIntersectAction) - [LabelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/labelIntersectAction) enum\n- [Axis.labelPlacement](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelPlacement) - [LabelPlacement](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPlacement) enum\n- [Axis.labelPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelPosition) - [AxisPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/axisPosition) enum\n\n### Label Formatting\n\n**API Property:** [Axis.labelFormat](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelFormat) (string, default: '')\n\n```typescript\npublic primaryYAxis = {\n labelFormat: '${value}K', // Format pattern\n title: 'Sales'\n};\n```\n\n**Format Patterns:**\n- `'${value}K'`: Append K (35K)\n- `'${value}%'`: Percentage (35%)\n- `'${value}M'`: Millions\n- `'n2'`: Number with 2 decimals (35.00)\n- `'c2'`: Currency with 2 decimals ($35.00)\n\n**For DateTime:**\n```typescript\npublic primaryXAxis = {\n valueType: 'DateTime',\n labelFormat: 'dd MMM' // 01 Mar\n};\n```\n\n### Label Rotation\n\nRotate labels to fit long text or save space.\n\n**API Properties:**\n- [Axis.labelRotation](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelRotation) (number, default: 0) - Rotation angle in degrees (-90 to 90)\n- [Axis.labelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelIntersectAction) - [LabelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/labelIntersectAction) enum (default: 'Trim')\n\n```typescript\npublic primaryXAxis = {\n valueType: 'Category',\n labelRotation: -45, // Degrees (-90 to 90)\n labelIntersectAction: 'Rotate45'\n};\n```\n\n**labelIntersectAction Options:** See [LabelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/labelIntersectAction)\n- `None`: No action (may overlap)\n- `Hide`: Hide overlapping labels\n- `Trim`: Truncate with ellipsis\n- `Wrap`: Wrap to multiple lines\n- `MultipleRows`: Place in multiple rows\n- `Rotate45`: Rotate 45 degrees\n- `Rotate90`: Rotate 90 degrees\n\n### Label Styling\n\n**API Property:** [Axis.labelStyle](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelStyle) - [FontModel](https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel)\n\n```typescript\npublic primaryXAxis = {\n valueType: 'Category',\n labelStyle: {\n fontFamily: 'Arial',\n size: '14px',\n fontWeight: 'Bold',\n color: '#333'\n }\n};\n```\n\n### Label Placement\n\n```typescript\npublic primaryYAxis = {\n labelPlacement: 'OnTicks', // BetweenTicks or OnTicks\n labelPosition: 'Outside', // Inside or Outside\n title: 'Sales'\n};\n```\n\n### Multilevel Labels\n\nGroup categories hierarchically.\n\n```typescript\npublic primaryXAxis = {\n valueType: 'Category',\n multiLevelLabels: [\n {\n border: { type: 'Rectangle', color: '#333' },\n categories: [\n { start: 0, end: 2, text: 'Q1' },\n { start: 3, end: 5, text: 'Q2' },\n { start: 6, end: 8, text: 'Q3' },\n { start: 9, end: 11, text: 'Q4' }\n ]\n },\n {\n border: { type: 'Brace', color: '#666' },\n categories: [\n { start: 0, end: 5, text: 'H1' },\n { start: 6, end: 11, text: 'H2' }\n ]\n }\n ]\n};\n```\n\n**Border Types:**\n- `Rectangle`, `Brace`, `WithoutBorder`, `WithoutTopBorder`, `WithoutTopandBottomBorder`, `CurlyBrace`\n\n### Custom Label Template\n\n```html\n\u003cejs-chart [primaryXAxis]=\"primaryXAxis\">\n \u003cng-template #axisLabelTemplate let-data>\n \u003cdiv style=\"background: #f0f0f0; padding: 2px 5px; border-radius: 3px;\">\n {{data.value}}\n \u003c/div>\n \u003c/ng-template>\n \u003ce-series-collection>\n \u003c!-- series -->\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n## Gridlines and Tick Lines\n\nCustomize gridlines and tick marks for better readability.\n\n### Major Gridlines\n\n```typescript\npublic primaryYAxis = {\n majorGridLines: {\n width: 1,\n color: '#e0e0e0',\n dashArray: '5,5' // Dashed line pattern\n }\n};\n```\n\n### Minor Gridlines\n\n```typescript\npublic primaryYAxis = {\n minorGridLines: {\n width: 1,\n color: '#f0f0f0'\n },\n minorTicksPerInterval: 4 // Number of minor ticks between major ticks\n};\n```\n\n### Tick Lines\n\n```typescript\npublic primaryYAxis = {\n majorTickLines: {\n width: 2,\n height: 10,\n color: '#333'\n },\n minorTickLines: {\n width: 1,\n height: 5,\n color: '#666'\n }\n};\n```\n\n### Hide Gridlines\n\n```typescript\npublic primaryYAxis = {\n majorGridLines: { width: 0 }, // Hide major gridlines\n majorTickLines: { width: 0 } // Hide tick lines\n};\n```\n\n## Axis Crossing and Inversion\n\n### Axis Crossing\n\nMove axis origin to any value within the chart.\n\n```typescript\npublic primaryXAxis = {\n crossesAt: 0 // Y-axis crosses X-axis at 0\n};\n\npublic primaryYAxis = {\n crossesAt: 5 // X-axis crosses Y-axis at 5\n};\n```\n\n**Use Cases:**\n- Zero-centered charts\n- Positive/negative data visualization\n- Custom axis positioning\n\n### Inversed Axis\n\nReverse axis direction (high to low).\n\n```typescript\npublic primaryYAxis = {\n isInversed: true // Invert Y-axis (top to bottom)\n};\n```\n\n**Use Cases:**\n- Rankings (1st place at top)\n- Depth measurements\n- Unconventional data presentation\n\n### Opposed Position\n\nPlace axis on opposite side.\n\n```typescript\npublic primaryYAxis = {\n opposedPosition: true // Place Y-axis on right side\n};\n```\n\n## Multiple Panes\n\nSplit chart area into multiple horizontal sections.\n\n### Row Configuration\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n // ...\n})\nexport class AppComponent {\n public rows = [\n { height: '50%' },\n { height: '50%' }\n ];\n \n public axes = [\n { name: 'yAxis1', rowIndex: 0, title: 'Revenue' },\n { name: 'yAxis2', rowIndex: 1, title: 'Profit' }\n ];\n}\n```\n\n```html\n\u003cejs-chart [rows]=\"rows\" [axes]=\"axes\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"revenueData\" type=\"Line\" xName=\"x\" yName=\"y\" yAxisName=\"yAxis1\">\u003c/e-series>\n \u003ce-series [dataSource]=\"profitData\" type=\"Area\" xName=\"x\" yName=\"y\" yAxisName=\"yAxis2\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Column Configuration\n\nSplit vertically:\n\n```typescript\npublic columns = [\n { width: '50%' },\n { width: '50%' }\n];\n\npublic axes = [\n { name: 'xAxis1', columnIndex: 0 },\n { name: 'xAxis2', columnIndex: 1 }\n];\n```\n\n### Grid Layout (Rows + Columns)\n\n```typescript\npublic rows = [\n { height: '50%' },\n { height: '50%' }\n];\n\npublic columns = [\n { width: '50%' },\n { width: '50%' }\n];\n\npublic axes = [\n { name: 'yAxis1', rowIndex: 0, columnIndex: 0 },\n { name: 'yAxis2', rowIndex: 0, columnIndex: 1 },\n { name: 'yAxis3', rowIndex: 1, columnIndex: 0 },\n { name: 'yAxis4', rowIndex: 1, columnIndex: 1 }\n];\n```\n\n## Chart Title and Subtitle\n\n### Title Configuration\n\n```typescript\npublic title = 'Monthly Sales Analysis';\n\npublic titleStyle = {\n fontFamily: 'Arial',\n size: '20px',\n fontWeight: 'Bold',\n color: '#333',\n textAlignment: 'Center', // Near, Center, Far\n textOverflow: 'Wrap' // Wrap, Trim, None\n};\n```\n\n```html\n\u003cejs-chart [title]=\"title\" [titleStyle]=\"titleStyle\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n### Subtitle\n\n```typescript\npublic subTitle = 'January - December 2024';\n\npublic subTitleStyle = {\n size: '14px',\n color: '#666',\n textAlignment: 'Center'\n};\n```\n\n```html\n\u003cejs-chart [title]=\"title\" [subTitle]=\"subTitle\" \n [titleStyle]=\"titleStyle\" [subTitleStyle]=\"subTitleStyle\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n### Title Position\n\n```typescript\npublic titleStyle = {\n textAlignment: 'Near' // Left-aligned title\n};\n```\n\n## Chart Dimensions\n\n### Fixed Dimensions\n\n```html\n\u003cejs-chart width=\"800px\" height=\"400px\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n### Responsive Dimensions\n\n```html\n\u003cejs-chart width=\"100%\" height=\"450px\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n### Container-based Sizing\n\n```html\n\u003cdiv style=\"width: 1200px; height: 600px;\">\n \u003cejs-chart width=\"100%\" height=\"100%\">\n \u003c!-- series -->\n \u003c/ejs-chart>\n\u003c/div>\n```\n\n### Aspect Ratio\n\nFor responsive designs maintaining proportions:\n\n```css\n.chart-container {\n position: relative;\n width: 100%;\n padding-bottom: 50%; /* 2:1 aspect ratio */\n}\n\n.chart-container ejs-chart {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n```\n\n## Margins and Padding\n\n### Chart Margin\n\nSpace outside chart area.\n\n```typescript\npublic margin = {\n left: 40,\n right: 40,\n top: 40,\n bottom: 40\n};\n```\n\n```html\n\u003cejs-chart [margin]=\"margin\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n### Chart Border\n\n```typescript\npublic border = {\n width: 2,\n color: '#333'\n};\n\npublic background = 'white';\n```\n\n```html\n\u003cejs-chart [border]=\"border\" [background]=\"background\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n### Chart Area Border\n\nBorder around plot area only (excluding axes, titles).\n\n```typescript\npublic chartArea = {\n border: {\n width: 2,\n color: '#e0e0e0'\n },\n background: '#f9f9f9'\n};\n```\n\n```html\n\u003cejs-chart [chartArea]=\"chartArea\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n## Best Practices\n\n### Axis Configuration\n- Set appropriate `minimum`, `maximum`, and `interval` for clarity\n- Use consistent axis types across related charts\n- Format labels for readability (K, M, %, $)\n\n### Multiple Axes\n- Limit to 2-3 axes maximum to avoid confusion\n- Use distinct colors for each axis\n- Align scales logically\n\n### Labels\n- Rotate when labels overlap (45° or 90°)\n- Use multilevel labels for hierarchical data\n- Keep font sizes readable (12px minimum)\n\n### Layout\n- Use multiple panes for unrelated data series\n- Maintain consistent pane sizing\n- Add titles to clarify each pane's purpose\n\n### Dimensions\n- Set explicit height for proper rendering\n- Use percentage width for responsiveness\n- Test on various screen sizes\n\n## Common Pitfalls\n\n1. **No Axis Range:** Forgetting `minimum`/`maximum` can result in awkward scales\n2. **Overlapping Labels:** Not using `labelIntersectAction` with many categories\n3. **Wrong Axis Type:** Using Category axis for continuous numeric data\n4. **Too Many Axes:** More than 3 axes creates confusion\n5. **Missing Titles:** Unlabeled axes lack context\n6. **Fixed Width:** Not responsive on mobile devices\n\n## Troubleshooting\n\n**Labels cut off:**\n- Increase chart `margin`\n- Use `labelIntersectAction: 'Wrap'` or `'Rotate45'`\n\n**Axis not visible:**\n- Check `lineStyle.width` is not 0\n- Verify `visible: true` (default)\n\n**Wrong scale:**\n- Set explicit `minimum`, `maximum`, `interval`\n- Check `valueType` matches data\n\n**Multiple axes not showing:**\n- Ensure `name` property is unique\n- Bind series using correct `yAxisName`/`xAxisName`\n\nRefer to interactive-features for axis-based interactions like zooming and panning.\n\n## API Reference Summary\n\n### Core Axis APIs\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| AxisModel | Complete axis configuration interface with 50+ properties | [axisModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) |\n| Axis | Axis class with methods and properties | [axis.md](https://ej2.syncfusion.com/angular/documentation/api/chart/axis) |\n| AxisDirective | Axis directive for declaring multiple axes | [axisDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective) |\n\n### Axis Configuration Properties\n\n| Property | Type | Default | Description | API Reference |\n|----------|------|---------|-------------|---------------|\n| valueType | ValueType | 'Double' | Axis value type: Double, DateTime, Category, Logarithmic | [Axis.valueType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#valueType), [ValueType](https://ej2.syncfusion.com/angular/documentation/api/chart/valueType) |\n| name | string | '' | Unique identifier for the axis | [Axis.name](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#name) |\n| title | string | '' | Axis title text | [Axis.title](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#title) |\n| minimum | Object | null | Minimum axis value | [Axis.minimum](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#minimum) |\n| maximum | Object | null | Maximum axis value | [Axis.maximum](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#maximum) |\n| interval | number | null | Axis label interval | [Axis.interval](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#interval) |\n| intervalType | IntervalType | 'Auto' | DateTime interval type | [Axis.intervalType](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#intervalType), [IntervalType](https://ej2.syncfusion.com/angular/documentation/api/chart/intervalType) |\n| logBase | number | 10 | Logarithmic base value | [Axis.logBase](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#logBase) |\n| rangePadding | ChartRangePadding | 'Auto' | Padding at axis ends | [Axis.rangePadding](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#rangePadding), [ChartRangePadding](https://ej2.syncfusion.com/angular/documentation/api/chart/chartRangePadding) |\n| opposedPosition | boolean | false | Place axis on opposite side | [Axis.opposedPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#opposedPosition) |\n| isInversed | boolean | false | Invert axis direction | [Axis.isInversed](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#isInversed) |\n| crossesAt | Object | null | Axis crossing point | [Axis.crossesAt](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#crossesAt) |\n| crossesInAxis | string | null | Cross at specific axis | [Axis.crossesInAxis](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#crossesInAxis) |\n| rowIndex | number | 0 | Row index for multiple rows | [Axis.rowIndex](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#rowIndex) |\n| columnIndex | number | 0 | Column index for multiple columns | [Axis.columnIndex](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#columnIndex) |\n| span | number | 1 | Number of rows/columns to span | [Axis.span](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#span) |\n\n### Label Configuration\n\n| Property | Type | Default | Description | API Reference |\n|----------|------|---------|-------------|---------------|\n| labelFormat | string | '' | Label format string | [Axis.labelFormat](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelFormat) |\n| labelStyle | FontModel | - | Label font styling | [Axis.labelStyle](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelStyle), [FontModel](https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel) |\n| labelRotation | number | 0 | Label rotation angle (-90 to 90) | [Axis.labelRotation](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelRotation) |\n| labelIntersectAction | LabelIntersectAction | 'Trim' | Action for overlapping labels | [Axis.labelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelIntersectAction), [LabelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/chart/labelIntersectAction) |\n| labelPlacement | LabelPlacement | 'BetweenTicks' | Label placement relative to ticks | [Axis.labelPlacement](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelPlacement), [LabelPlacement](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPlacement) |\n| labelPosition | AxisPosition | 'Outside' | Label position (Inside/Outside) | [Axis.labelPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelPosition), [AxisPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/axisPosition) |\n| labelPadding | number | 5 | Space between labels and axis | [Axis.labelPadding](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelPadding) |\n| maximumLabelWidth | number | 34 | Maximum label width in pixels | [Axis.maximumLabelWidth](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#maximumLabelWidth) |\n| enableTrim | boolean | false | Trim labels to fit | [Axis.enableTrim](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#enableTrim) |\n| enableWrap | boolean | false | Wrap labels to multiple lines | [Axis.enableWrap](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#enableWrap) |\n| labelTemplate | string/Function | null | Custom label template | [Axis.labelTemplate](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelTemplate) |\n\n### Gridlines and Tick Lines\n\n| Feature | API Reference |\n|---------|---------------|\n| Major Gridlines | [MajorGridLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/majorGridLinesModel), [Axis.majorGridLines](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#majorGridLines) |\n| Minor Gridlines | [MinorGridLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/minorGridLinesModel), [Axis.minorGridLines](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#minorGridLines) |\n| Major Tick Lines | [MajorTickLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/majorTickLinesModel), [Axis.majorTickLines](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#majorTickLines) |\n| Minor Tick Lines | [MinorTickLinesModel](https://ej2.syncfusion.com/angular/documentation/api/chart/minorTickLinesModel), [Axis.minorTickLines](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#minorTickLines) |\n| Axis Line | [AxisLineModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisLineModel), [Axis.lineStyle](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#lineStyle) |\n\n### Chart Layout\n\n| Property | Type | Description | API Reference |\n|----------|------|-------------|---------------|\n| title | string | Chart title | [ChartModel.title](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#title) |\n| titleStyle | TitleStyleSettingsModel | Title styling | [TitleStyleSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/titleStyleSettingsModel) |\n| width | string | Chart width | [ChartModel.width](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#width) |\n| height | string | Chart height | [ChartModel.height](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#height) |\n| margin | MarginModel | Chart margins | [ChartModel.margin](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#margin), [MarginModel](https://ej2.syncfusion.com/angular/documentation/api/chart/marginModel) |\n| chartArea | ChartAreaModel | Plot area configuration | [ChartModel.chartArea](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#chartArea), [ChartAreaModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAreaModel) |\n| rows | RowModel[] | Row definitions for multiple panes | [ChartModel.rows](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#rows), [RowModel](https://ej2.syncfusion.com/angular/documentation/api/chart/rowModel) |\n| columns | ColumnModel[] | Column definitions for multiple panes | [ChartModel.columns](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#columns), [ColumnModel](https://ej2.syncfusion.com/angular/documentation/api/chart/columnModel) |\n| isTransposed | boolean | Transpose/invert chart | [ChartModel.isTransposed](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#isTransposed) |\n\n### Enumerations\n\n| Enum | Description | API Reference |\n|------|-------------|---------------|\n| ValueType | Axis value types (Double, DateTime, Category, Logarithmic) | [valueType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/valueType) |\n| IntervalType | DateTime interval types (Years, Months, Days, Hours, etc.) | [intervalType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/intervalType) |\n| ChartRangePadding | Axis padding modes (None, Normal, Additional, Round, Auto) | [chartRangePadding.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartRangePadding) |\n| LabelIntersectAction | Label overlap handling (None, Hide, Trim, Wrap, etc.) | [labelIntersectAction.md](https://ej2.syncfusion.com/angular/documentation/api/chart/labelIntersectAction) |\n| LabelPlacement | Label placement relative to ticks | [labelPlacement.md](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPlacement) |\n| AxisPosition | Label/title position (Inside, Outside) | [axisPosition.md](https://ej2.syncfusion.com/angular/documentation/api/chart/axisPosition) |\n| SkeletonType | DateTime skeleton types | [skeletonType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/skeletonType) |\n| EdgeLabelPlacement | Edge label placement (None, Hide, Shift) | [edgeLabelPlacement.md](https://ej2.syncfusion.com/angular/documentation/api/chart/edgeLabelPlacement) |\n\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":29526,"content_sha256":"6ef905d4047f0d3125eaf483cb6b701c2e68d0307e84a883566098ef4f6d4bb1"},{"filename":"references/chart-elements.md","content":"# Chart Elements\n\nChart elements enhance data visualization by adding context, highlighting patterns, and improving readability. This guide covers legends, markers, data labels, annotations, trendlines, technical indicators, striplines, and gradient fills.\n\n## Table of Contents\n\n- [Legend](#legend)\n- [Data Markers](#data-markers)\n- [Data Labels](#data-labels)\n- [Annotations](#annotations)\n- [Trendlines](#trendlines)\n- [Technical Indicators](#technical-indicators)\n- [Striplines](#striplines)\n- [Gradient Fills](#gradient-fills)\n\n## Legend\n\nLegends identify series in charts with multiple data sets, displaying names, colors, and symbols.\n\n**API Reference:**\n- [LegendSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) - Complete legend configuration\n- [LegendSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings) - Legend settings class\n- [LegendPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/legendPosition) - Legend position enum\n- [LegendShape](https://ej2.syncfusion.com/angular/documentation/api/chart/legendShape) - Available legend icon shapes\n- [LegendMode](https://ej2.syncfusion.com/angular/documentation/api/chart/legendMode) - Legend rendering modes (Series, Point, Range, Gradient)\n\n### Basic Legend Configuration\n\n**API Properties:**\n- [LegendSettings.visible](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#visible) (boolean, default: true)\n- [LegendSettings.position](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#position) - [LegendPosition](https://ej2.syncfusion.com/angular/documentation/api/chart/legendPosition) enum\n\n```typescript\npublic legendSettings = {\n visible: true\n};\n```\n\n```html\n\u003cejs-chart [legendSettings]=\"legendSettings\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"Line\" xName=\"x\" yName=\"y\" name=\"Product A\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data2\" type=\"Line\" xName=\"x\" yName=\"y\" name=\"Product B\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Legend Positioning\n\n```typescript\npublic legendSettings = {\n visible: true,\n position: 'Top', // Top, Bottom, Left, Right\n alignment: 'Center' // Near, Center, Far\n};\n```\n\n**Position Options:**\n- `Top`: Above chart area\n- `Bottom`: Below chart area (default)\n- `Left`: Left side of chart\n- `Right`: Right side of chart\n- `Custom`: Specify x, y coordinates\n\n**Custom Positioning:**\n```typescript\npublic legendSettings = {\n visible: true,\n position: 'Custom',\n location: { x: 70, y: 20 } // Percentage values\n};\n```\n\n### Legend Shape and Style\n\n```typescript\npublic legendSettings = {\n visible: true,\n shapeHeight: 15,\n shapeWidth: 15,\n shapePadding: 5,\n border: { width: 1, color: '#000' },\n background: 'transparent',\n opacity: 1,\n textStyle: {\n fontFamily: 'Arial',\n size: '14px',\n fontWeight: '400',\n color: '#333'\n }\n};\n```\n\n**Legend Shapes:**\n- Circle (default for line, area, scatter)\n- Rectangle (default for column, bar)\n- Triangle, Diamond, Pentagon, etc.\n\n### Legend Click Behavior\n\nToggle series visibility by clicking legend items:\n\n```typescript\npublic legendSettings = {\n visible: true,\n toggleVisibility: true // Enable/disable series on click\n};\n```\n\n### Legend Paging\n\nFor charts with many series:\n\n```typescript\npublic legendSettings = {\n visible: true,\n width: '200px',\n height: '100px',\n enablePages: true // Add pagination for overflow\n};\n```\n\n### Custom Legend Template\n\n```typescript\npublic legendSettings = {\n visible: true\n};\n```\n\n```html\n\u003cejs-chart [legendSettings]=\"legendSettings\">\n \u003cng-template #legendTemplate let-data>\n \u003cdiv style=\"display: flex; align-items: center;\">\n \u003cspan [style.background]=\"data.fill\" style=\"width: 15px; height: 15px; display: inline-block; margin-right: 5px;\">\u003c/span>\n \u003cspan>{{data.text}} - {{data.percentage}}%\u003c/span>\n \u003c/div>\n \u003c/ng-template>\n \u003ce-series-collection>\n \u003c!-- series -->\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n## Data Markers\n\nMarkers highlight individual data points with shapes, making specific values stand out.\n\n**API Reference:**\n- [MarkerSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) - Complete marker configuration\n- [MarkerSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings) - Marker settings class\n- [ChartShape](https://ej2.syncfusion.com/angular/documentation/api/chart/chartShape) - Available marker shapes enum\n\n### Basic Marker Configuration\n\n**API Properties:**\n- [MarkerSettings.visible](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#visible) (boolean, default: false)\n- [MarkerSettings.width](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#width) (number, default: 5)\n- [MarkerSettings.height](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#height) (number, default: 5)\n- [MarkerSettings.shape](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#shape) - [ChartShape](https://ej2.syncfusion.com/angular/documentation/api/chart/chartShape) enum\n- [MarkerSettings.fill](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#fill) (string) - Marker fill color\n- [MarkerSettings.border](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#border) - [BorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel)\n\n```typescript\npublic marker = {\n visible: true,\n width: 10,\n height: 10\n};\n```\n\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\" [marker]=\"marker\">\u003c/e-series>\n```\n\n### Marker Shapes\n\n```typescript\npublic marker = {\n visible: true,\n width: 12,\n height: 12,\n shape: 'Circle' // Circle, Rectangle, Triangle, Diamond, Pentagon, etc.\n};\n```\n\n**Available Shapes:**\n- Circle (default)\n- Rectangle / Square\n- Triangle\n- Diamond\n- Pentagon\n- Cross / Plus\n- Image (use imageUrl property)\n\n### Marker Styling\n\n```typescript\npublic marker = {\n visible: true,\n width: 10,\n height: 10,\n fill: '#FF5733',\n border: { \n width: 2, \n color: '#333' \n },\n opacity: 1\n};\n```\n\n### Image Markers\n\n```typescript\npublic marker = {\n visible: true,\n width: 20,\n height: 20,\n shape: 'Image',\n imageUrl: 'assets/marker-icon.png'\n};\n```\n\n### Marker for Specific Points\n\nShow markers only at specific data points:\n\n```typescript\npublic data = [\n { x: 'Jan', y: 35, marker: { visible: true } },\n { x: 'Feb', y: 28, marker: { visible: false } },\n { x: 'Mar', y: 34, marker: { visible: true } }\n];\n```\n\n## Data Labels\n\nData labels display values directly on or near chart elements for immediate readability.\n\n### Basic Data Labels\n\n```typescript\npublic marker = { dataLabel: { visible: true } };\n```\n\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Column\" xName=\"x\" yName=\"y\" [marker]=\"marker\">\u003c/e-series>\n```\n\n### Label Positioning\n\n```typescript\npublic marker = {\n dataLabel: {\n visible: true,\n position: 'Top' // Top, Bottom, Middle, Outer, Auto\n }\n};\n```\n\n**Position Options by Series Type:**\n\n**Column/Bar:**\n- `Top`: Above bars\n- `Bottom`: Below bars\n- `Middle`: Center of bars\n- `Outer`: Outside bar ends\n\n**Line/Scatter:**\n- `Top`: Above points\n- `Bottom`: Below points\n- `Middle`: On points\n\n**Pie/Donut:**\n- `Inside`: Within slices\n- `Outside`: Beyond slices\n\n### Label Formatting\n\n```typescript\npublic marker = {\n dataLabel: {\n visible: true,\n format: '${value}K', // Format string\n font: {\n fontFamily: 'Arial',\n size: '12px',\n fontWeight: 'Bold',\n color: '#333'\n }\n }\n};\n```\n\n**Format Patterns:**\n- `${value}`: Raw value\n- `${point.x}`: X-axis value\n- `${point.y}`: Y-axis value\n- `${series.name}`: Series name\n- `${point.percentage}%`: Percentage (for pie charts)\n\n### Label Border and Background\n\n```typescript\npublic marker = {\n dataLabel: {\n visible: true,\n border: { \n width: 2, \n color: '#FF5733' \n },\n fill: 'white',\n margin: { left: 5, right: 5, top: 5, bottom: 5 }\n }\n};\n```\n\n### Smart Labels\n\nAvoid label overlapping:\n\n```typescript\npublic marker = {\n dataLabel: {\n visible: true,\n enableSmartLabels: true, // Adjust labels to prevent overlap\n labelIntersectAction: 'Hide' // Hide, Rotate45, Rotate90, Trim, Wrap\n }\n};\n```\n\n### Custom Label Template\n\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Column\" xName=\"x\" yName=\"y\"[marker]=\"marker\">\u003c/e-series>\n```\n\n```typescript\npublic marker = {\n dataLabel: {\n visible: true,\n template: `\n \u003cdiv style=\"background: \\${point.color}; padding: 3px; border-radius: 3px; color: white;\">\n \u003cb>\\${point.x}\u003c/b>: $\\${point.y}K\n \u003c/div>\n `\n }\n};\n```\n\n## Annotations\n\nAnnotations add custom HTML elements, text, shapes, or images at specific chart coordinates.\n\n### Text Annotation\n\n```typescript\nimport { AnnotationService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n // ...\n providers: [AnnotationService]\n})\nexport class AppComponent {\n public annotations = [{\n content: '\u003cdiv style=\"background: #FF5733; color: white; padding: 5px;\">Peak Sales\u003c/div>',\n x: 'May',\n y: 40,\n coordinateUnits: 'Point', // Pixel or Point\n region: 'Series' // Chart or Series\n }];\n}\n```\n\n```html\n\u003cejs-chart [annotations]=\"annotations\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Coordinate Units\n\n```typescript\npublic annotations = [{\n content: '\u003cdiv>Annotation Text\u003c/div>',\n x: 50, // X position\n y: 50, // Y position\n coordinateUnits: 'Pixel', // Pixel: absolute position, Point: data coordinates\n verticalAlignment: 'Top', // Top, Middle, Bottom\n horizontalAlignment: 'Center', // Near, Center, Far\n region: 'Chart' // Chart: entire chart area, Series: plot area\n}];\n```\n\n### Image Annotation\n\n```typescript\npublic annotations = [{\n content: '\u003cimg src=\"assets/warning-icon.png\" width=\"30\" height=\"30\"/>',\n x: 'Mar',\n y: 34,\n coordinateUnits: 'Point',\n region: 'Series'\n}];\n```\n\n### Shape Annotation\n\n```typescript\npublic annotations = [{\n content: '\u003cdiv style=\"width: 100px; height: 50px; background: rgba(255,0,0,0.2); border: 2px solid red;\">\u003c/div>',\n x: 'Feb',\n y: 28,\n coordinateUnits: 'Point',\n region: 'Series'\n}];\n```\n\n### Multiple Annotations\n\n```typescript\npublic annotations = [\n {\n content: '\u003cdiv>Annotation 1\u003c/div>',\n x: 'Jan',\n y: 35,\n coordinateUnits: 'Point'\n },\n {\n content: '\u003cdiv>Annotation 2\u003c/div>',\n x: 'May',\n y: 40,\n coordinateUnits: 'Point'\n }\n];\n```\n\n## Trendlines\n\nTrendlines show overall patterns or directional trends in data.\n\n### Linear Trendline\n\n```typescript\nimport { TrendlinesService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n // ...\n providers: [TrendlinesService]\n})\nexport class AppComponent {\n public trendlines = [{\n type: 'Linear',\n width: 2,\n name: 'Linear Trend',\n fill: '#FF5733',\n enableTooltip: true\n }];\n}\n```\n\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Scatter\" xName=\"x\" yName=\"y\" [trendlines]=\"trendlines\">\u003c/e-series>\n```\n\n### Trendline Types\n\n```typescript\npublic trendlines = [{\n type: 'Linear' // Linear, Exponential, Logarithmic, Polynomial, Power, MovingAverage\n}];\n```\n\n**Type Descriptions:**\n- **Linear:** Straight line fit\n- **Exponential:** Exponential curve\n- **Logarithmic:** Logarithmic curve\n- **Polynomial:** Polynomial fit (specify `polynomialOrder`)\n- **Power:** Power function\n- **MovingAverage:** Smoothed average (specify `period`)\n\n### Polynomial Trendline\n\n```typescript\npublic trendlines = [{\n type: 'Polynomial',\n polynomialOrder: 3, // Order of polynomial\n width: 2,\n fill: '#3498db'\n}];\n```\n\n### Moving Average\n\n```typescript\npublic trendlines = [{\n type: 'MovingAverage',\n period: 3, // Number of points to average\n width: 2,\n fill: '#9b59b6'\n}];\n```\n\n### Forward/Backward Forecast\n\n```typescript\npublic trendlines = [{\n type: 'Linear',\n forwardForecast: 5, // Extend forward\n backwardForecast: 2, // Extend backward\n width: 2,\n dashArray: '5,5' // Dashed line for forecast\n}];\n```\n\n### Trendline Styling\n\n```typescript\npublic trendlines = [{\n type: 'Linear',\n width: 3,\n fill: '#e74c3c',\n dashArray: '10,5', // Dash pattern\n opacity: 0.7,\n marker: {\n visible: true,\n width: 8,\n height: 8\n },\n intercept: 10 // Force specific intercept\n}];\n```\n\n## Technical Indicators\n\nTechnical indicators for financial chart analysis (RSI, MACD, Bollinger Bands, etc.).\n\n### RSI (Relative Strength Index)\n\n```typescript\nimport { TechnicalIndicatorService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n providers: [TechnicalIndicatorService]\n})\nexport class AppComponent {\n public indicators = [{\n type: 'Rsi',\n field: 'Close',\n seriesName: 'Stock',\n yAxisName: 'secondary',\n period: 14,\n fill: '#6063ff',\n upperBand: 70,\n lowerBand: 30\n }];\n}\n```\n\n### MACD (Moving Average Convergence Divergence)\n\n```typescript\npublic indicators = [{\n type: 'Macd',\n field: 'Close',\n seriesName: 'Stock',\n yAxisName: 'secondary',\n fastPeriod: 12,\n slowPeriod: 26,\n trigger: 9,\n macdType: 'Both', // Both, Line, Histogram\n fill: '#6063ff'\n}];\n```\n\n### Bollinger Bands\n\n```typescript\npublic indicators = [{\n type: 'BollingerBands',\n field: 'Close',\n seriesName: 'Stock',\n period: 14,\n standardDeviation: 2,\n fill: '#6063ff',\n upperLine: { color: '#e74c3c', width: 1 },\n lowerLine: { color: '#3498db', width: 1 }\n}];\n```\n\n### Other Indicators\n\n**EMA (Exponential Moving Average):**\n```typescript\npublic indicators = [{ type: 'Ema', field: 'Close', period: 14 }];\n```\n\n**SMA (Simple Moving Average):**\n```typescript\npublic indicators = [{ type: 'Sma', field: 'Close', period: 14 }];\n```\n\n**ATR (Average True Range):**\n```typescript\npublic indicators = [{ type: 'Atr', field: 'Close', period: 14 }];\n```\n\n**Stochastic:**\n```typescript\npublic indicators = [{\n type: 'Stochastic',\n period: 14,\n kPeriod: 3,\n dPeriod: 3,\n field: 'Close'\n}];\n```\n\n## Striplines\n\nStriplines highlight specific axis ranges with colored bands and labels.\n\n### Horizontal Stripline\n\n```typescript\npublic primaryYAxis = {\n stripLines: [{\n start: 30,\n end: 40,\n text: 'Target Range',\n color: 'rgba(255, 0, 0, 0.1)',\n border: { width: 1, color: 'red' },\n textStyle: { \n color: 'red', \n size: '14px' \n },\n horizontalAlignment: 'Start',\n verticalAlignment: 'Start',\n visible: true\n }]\n};\n```\n\n### Vertical Stripline\n\n```typescript\npublic primaryXAxis = {\n valueType: 'Category',\n stripLines: [{\n start: 2, // Index or value\n end: 4,\n text: 'Q2',\n color: 'rgba(0, 128, 255, 0.1)',\n border: { width: 2, color: 'blue' },\n textStyle: { color: 'blue' }\n }]\n};\n```\n\n### Recurring Striplines\n\n```typescript\npublic primaryXAxis = {\n stripLines: [{\n startFromAxis: true,\n size: 1,\n sizeType: 'Auto',\n isRepeat: true,\n repeatEvery: 2,\n color: 'rgba(0, 0, 0, 0.05)'\n }]\n};\n```\n\n### Line Stripline (Single Line)\n\n```typescript\npublic stripLines = [{\n start: 35,\n size: 0, // Zero size = single line\n color: 'red',\n border: { width: 2, color: 'red' },\n text: 'Average',\n textStyle: { color: 'red' }\n}];\n```\n\n## Gradient Fills\n\nApply gradient colors to series for visual depth.\n\n### Linear Gradient\n\n```typescript\npublic fill = 'url(#gradient1)';\n```\n\n```html\n\u003cejs-chart>\n \u003csvg style=\"height: 0\">\n \u003cdefs>\n \u003clinearGradient id=\"gradient1\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n \u003cstop offset=\"0%\" style=\"stop-color:#3498db;stop-opacity:1\" />\n \u003cstop offset=\"100%\" style=\"stop-color:#e74c3c;stop-opacity:1\" />\n \u003c/linearGradient>\n \u003c/defs>\n \u003c/svg>\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Column\" xName=\"x\" yName=\"y\" [fill]=\"fill\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Radial Gradient\n\n```html\n\u003cradialGradient id=\"gradient2\">\n \u003cstop offset=\"0%\" style=\"stop-color:#fff;stop-opacity:1\" />\n \u003cstop offset=\"100%\" style=\"stop-color:#3498db;stop-opacity:1\" />\n\u003c/radialGradient>\n```\n\n### Multiple Series with Gradients\n\n```typescript\npublic fill1 = 'url(#gradient1)';\npublic fill2 = 'url(#gradient2)';\n```\n\n```html\n\u003ce-series [dataSource]=\"data1\" type=\"Column\" xName=\"x\" yName=\"y\" [fill]=\"fill1\">\u003c/e-series>\n\u003ce-series [dataSource]=\"data2\" type=\"Column\" xName=\"x\" yName=\"y\" [fill]=\"fill2\">\u003c/e-series>\n```\n\n## Best Practices\n\n### Legend\n- Position legends where they don't obscure data\n- Use descriptive series names\n- Enable toggle visibility for interactive exploration\n\n### Markers\n- Use sparingly on line charts (only key points)\n- Consistent shapes across related series\n- Larger markers for emphasis\n\n### Data Labels\n- Enable only when space permits\n- Use formatting for readability ($, %, K, M)\n- Smart labels to avoid overlap\n\n### Annotations\n- Highlight key insights or anomalies\n- Keep text concise\n- Use contrasting colors\n\n### Trendlines\n- Choose appropriate type for data pattern\n- Use dashed lines for forecasts\n- Match colors with series\n\n### Striplines\n- Highlight thresholds or goals\n- Use subtle colors (low opacity)\n- Label clearly\n\n## Common Pitfalls\n\n1. **Too Many Elements:** Cluttered charts with excessive markers, labels, annotations\n2. **Poor Contrast:** Annotations/labels hard to read against chart background\n3. **Overlapping Labels:** Not using smart labels or label rotation\n4. **Inconsistent Styling:** Mixed marker shapes/sizes without purpose\n5. **Missing Context:** Annotations without explanatory text\n\nRefer to customization reference for detailed styling options.\n\n## API Reference Summary\n\n### Legend Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| LegendSettingsModel | Complete legend configuration interface | [legendSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) |\n| LegendSettings | Legend settings class | [legendSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings) |\n| LegendPosition | Position enum (Top, Bottom, Left, Right, Custom) | [legendPosition.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendPosition) |\n| LegendShape | Icon shape enum (Circle, Rectangle, Triangle, etc.) | [legendShape.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendShape) |\n| LegendMode | Rendering mode (Series, Point, Range, Gradient) | [legendMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendMode) |\n\n### Marker Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| MarkerSettingsModel | Complete marker configuration interface | [markerSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n| MarkerSettings | Marker settings class | [markerSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings) |\n| ChartShape | Marker shape enum (Circle, Rectangle, Diamond, etc.) | [chartShape.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartShape) |\n\n### Data Label Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| DataLabelSettingsModel | Data label configuration interface | [dataLabelSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel) |\n| DataLabelSettings | Data label settings class | [dataLabelSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings) |\n| DataLabelIntersectAction | Overlap handling (None, Hide, Rotate, etc.) | [dataLabelIntersectAction.md](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelIntersectAction) |\n| LabelPosition | Label position enum | [labelPosition.md](https://ej2.syncfusion.com/angular/documentation/api/chart/labelPosition) |\n| Alignment | Text alignment enum | [alignment.md](https://ej2.syncfusion.com/angular/documentation/api/chart/alignment) |\n\n### Annotation Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| ChartAnnotationSettingsModel | Annotation configuration interface | [chartAnnotationSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel) |\n| ChartAnnotationSettings | Annotation settings class | [chartAnnotationSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettings) |\n| AnnotationDirective | Annotation directive for declaring annotations | [annotationDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective) |\n| Anchor | Anchor point enum (Chart, Series, Point) | [anchor.md](https://ej2.syncfusion.com/angular/documentation/api/chart/anchor) |\n| Position | Positioning enum | [position.md](https://ej2.syncfusion.com/angular/documentation/api/chart/position) |\n\n### Trendline Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| TrendlineModel | Trendline configuration interface | [trendlineModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel) |\n| Trendline | Trendline class | [trendline.md](https://ej2.syncfusion.com/angular/documentation/api/chart/trendline) |\n| TrendlineDirective | Trendline directive | [trendlineDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineDirective) |\n| TrendlineTypes | Types enum (Linear, Exponential, Polynomial, etc.) | [trendlineTypes.md](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineTypes) |\n\n### Technical Indicator Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| TechnicalIndicatorModel | Indicator configuration interface | [technicalIndicatorModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel) |\n| TechnicalIndicator | Indicator class | [technicalIndicator.md](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicator) |\n| IndicatorDirective | Indicator directive | [indicatorDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/indicatorDirective) |\n| TechnicalIndicators | Indicator types enum (SMA, EMA, RSI, MACD, etc.) | [technicalIndicators.md](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicators) |\n| MacdType | MACD type enum | [macdType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/macdType) |\n\n### Stripline Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| StripLineSettingsModel | Stripline configuration interface | [stripLineSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel) |\n| StripLineSettings | Stripline settings class | [stripLineSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettings) |\n| StripLineDirective | Stripline directive | [stripLineDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineDirective) |\n\n### Key Properties Reference\n\n| Element | Important Properties | API Reference |\n|---------|---------------------|---------------|\n| **Legend** | visible, position, alignment, toggleVisibility | [LegendSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) |\n| **Marker** | visible, width, height, shape, fill, border | [MarkerSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n| **Data Label** | visible, position, format, fill, border, angle | [DataLabelSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel) |\n| **Annotation** | content, coordinateUnits, x, y, region | [ChartAnnotationSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel) |\n| **Trendline** | type, forward, backward, polynomial Order | [TrendlineModel](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel) |\n| **Indicator** | type, period, field, seriesName | [TechnicalIndicatorModel](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel) |\n| **Stripline** | start, end, size, text, color, opacity | [StripLineSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel) |\n\n### Events Related to Chart Elements\n\n| Event | Interface | Description | API Reference |\n|-------|-----------|-------------|---------------|\n| legendRender | ILegendRenderEventArgs | Before legend rendering | [ChartModel.legendRender](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#legendRender), [ILegendRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLegendRenderEventArgs) |\n| legendClick | ILegendClickEventArgs | Legend item click | [ChartModel.legendClick](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#legendClick), [ILegendClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iLegendClickEventArgs) |\n| pointRender | IPointRenderEventArgs | Before point rendering (markers) | [ChartModel.pointRender](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointRender), [IPointRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointRenderEventArgs) |\n| textRender | ITextRenderEventArgs | Before text rendering (data labels) | [ChartModel.textRender](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#textRender), [ITextRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iTextRenderEventArgs) |\n| annotationRender | IAnnotationRenderEventArgs | Before annotation rendering | [ChartModel.annotationRender](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#annotationRender), [IAnnotationRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAnnotationRenderEventArgs) |\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":25992,"content_sha256":"68a1e637d7f57672d405648a6e324a435fac451c72fae50381582961b38b7213"},{"filename":"references/common-patterns.md","content":"# Common Patterns Reference for Syncfusion Angular Chart\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Trend Analysis Dashboard](#trend-analysis-dashboard)\n- [Financial Stock Chart](#financial-stock-chart)\n- [Real-Time Monitoring Dashboard](#real-time-monitoring-dashboard)\n- [Multi-Axis Comparison Charts](#multi-axis-comparison-charts)\n- [Drill-Down Charts](#drill-down-charts)\n- [Responsive Dashboard Layouts](#responsive-dashboard-layouts)\n- [Performance Comparison Charts](#performance-comparison-charts)\n- [Time-Series Analysis](#time-series-analysis)\n- [Best Practices](#best-practices)\n- [Troubleshooting](#troubleshooting)\n- [Migration Guide](#migration-guide)\n\n## Introduction\n\nThis reference provides complete, production-ready patterns for common chart implementations. Each pattern includes full TypeScript code, styling, data handling, and integration guidance for building sophisticated data visualization solutions with Syncfusion Angular Charts.\n\n## Trend Analysis Dashboard\n\nCreate a comprehensive dashboard showing trends across multiple metrics with comparisons and forecasts.\n\n### Implementation\n\n```typescript\nimport { Component, OnInit, ViewChild } from '@angular/core';\nimport { ChartComponent } from '@syncfusion/ej2-angular-charts';\nimport { ILoadedEventArgs, IPointRenderEventArgs } from '@syncfusion/ej2-charts';\n\n@Component({\n selector: 'app-trend-dashboard',\n template: `\n \u003cdiv class=\"dashboard-container\">\n \u003cdiv class=\"dashboard-header\">\n \u003ch2>Sales Trend Analysis - 2024\u003c/h2>\n \u003cdiv class=\"controls\">\n \u003cselect (change)=\"changeTimeRange($event.target.value)\">\n \u003coption value=\"monthly\">Monthly\u003c/option>\n \u003coption value=\"quarterly\">Quarterly\u003c/option>\n \u003coption value=\"yearly\">Yearly\u003c/option>\n \u003c/select>\n \u003cbutton (click)=\"exportDashboard()\">Export Report\u003c/button>\n \u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"kpi-cards\">\n \u003cdiv class=\"kpi-card\">\n \u003ch3>Total Sales\u003c/h3>\n \u003cp class=\"value\">{{ totalSales | currency }}\u003c/p>\n \u003cspan class=\"change positive\">+15.3%\u003c/span>\n \u003c/div>\n \u003cdiv class=\"kpi-card\">\n \u003ch3>Average\u003c/h3>\n \u003cp class=\"value\">{{ averageSales | currency }}\u003c/p>\n \u003cspan class=\"change\">+8.2%\u003c/span>\n \u003c/div>\n \u003cdiv class=\"kpi-card\">\n \u003ch3>Best Month\u003c/h3>\n \u003cp class=\"value\">{{ bestMonth }}\u003c/p>\n \u003cspan class=\"sub-text\">{{ bestMonthValue | currency }}\u003c/span>\n \u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"chart-grid\">\n \u003cdiv class=\"chart-panel main-chart\">\n \u003cejs-chart #mainChart\n [primaryXAxis]='primaryXAxis'\n [primaryYAxis]='primaryYAxis'\n [title]='chartTitle'\n [tooltip]='tooltip'\n [legendSettings]='legendSettings'\n [crosshair]='crosshair'\n (pointRender)='pointRender($event)'\n (loaded)='onChartLoaded($event)'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='actualData' \n xName='month' \n yName='sales'\n name='Actual Sales'\n type='Column'\n [marker]='marker'\n fill='#4CAF50'>\n \u003c/e-series>\n \u003ce-series \n [dataSource]='targetData' \n xName='month' \n yName='target'\n name='Target'\n type='Line'\n width='3'\n fill='#FF5722'\n [marker]='targetMarker'>\n \u003c/e-series>\n \u003ce-series \n [dataSource]='forecastData' \n xName='month' \n yName='forecast'\n name='Forecast'\n type='Line'\n width='2'\n dashArray='5,5'\n fill='#2196F3'\n opacity='0.7'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003c/div>\n\n \u003cdiv class=\"chart-panel\">\n \u003cejs-chart #growthChart\n [primaryXAxis]='xAxis2'\n [primaryYAxis]='yAxis2'\n [title]='\"Month-over-Month Growth\"'\n [tooltip]='tooltip'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='growthData' \n xName='month' \n yName='growth'\n type='Area'\n fill='#9C27B0'\n opacity='0.6'\n [border]='areaBorder'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003c/div>\n\n \u003cdiv class=\"chart-panel\">\n \u003cejs-chart #categoryChart\n [primaryXAxis]='categoryXAxis'\n [primaryYAxis]='categoryYAxis'\n [title]='\"Sales by Category\"'\n [tooltip]='tooltip'\n [legendSettings]='legendSettings'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='categoryData' \n xName='category' \n yName='value'\n type='StackingColumn'\n name='Q1'>\n \u003c/e-series>\n \u003ce-series \n [dataSource]='categoryData' \n xName='category' \n yName='value2'\n type='StackingColumn'\n name='Q2'>\n \u003c/e-series>\n \u003ce-series \n [dataSource]='categoryData' \n xName='category' \n yName='value3'\n type='StackingColumn'\n name='Q3'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003c/div>\n \u003c/div>\n \u003c/div>\n `,\n styles: [`\n .dashboard-container {\n padding: 20px;\n background: #f5f5f5;\n }\n\n .dashboard-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .controls select, .controls button {\n margin-left: 10px;\n padding: 8px 16px;\n border-radius: 4px;\n border: 1px solid #ddd;\n }\n\n .kpi-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .kpi-card {\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .kpi-card h3 {\n margin: 0 0 10px 0;\n color: #666;\n font-size: 14px;\n }\n\n .kpi-card .value {\n font-size: 32px;\n font-weight: bold;\n margin: 10px 0;\n color: #333;\n }\n\n .kpi-card .change {\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 14px;\n }\n\n .kpi-card .change.positive {\n background: #E8F5E9;\n color: #4CAF50;\n }\n\n .chart-grid {\n display: grid;\n grid-template-columns: 2fr 1fr;\n gap: 20px;\n }\n\n .chart-panel {\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .main-chart {\n grid-column: 1 / -1;\n }\n\n @media (max-width: 768px) {\n .chart-grid {\n grid-template-columns: 1fr;\n }\n .main-chart {\n grid-column: 1;\n }\n }\n `]\n})\nexport class TrendDashboardComponent implements OnInit {\n @ViewChild('mainChart') mainChart: ChartComponent;\n @ViewChild('growthChart') growthChart: ChartComponent;\n @ViewChild('categoryChart') categoryChart: ChartComponent;\n\n public actualData: Object[] = [];\n public targetData: Object[] = [];\n public forecastData: Object[] = [];\n public growthData: Object[] = [];\n public categoryData: Object[] = [];\n\n public totalSales: number = 0;\n public averageSales: number = 0;\n public bestMonth: string = '';\n public bestMonthValue: number = 0;\n\n public chartTitle: string = 'Monthly Sales Performance';\n\n public primaryXAxis: Object = {\n valueType: 'Category',\n title: 'Month',\n labelRotation: -45,\n majorGridLines: { width: 0 }\n };\n\n public primaryYAxis: Object = {\n title: 'Sales ($)',\n labelFormat: '${value}K',\n majorGridLines: { width: 1, color: '#E0E0E0' }\n };\n\n public xAxis2: Object = { valueType: 'Category' };\n public yAxis2: Object = { labelFormat: '{value}%' };\n\n public categoryXAxis: Object = { valueType: 'Category' };\n public categoryYAxis: Object = { labelFormat: '${value}K' };\n\n public tooltip: Object = {\n enable: true,\n shared: true,\n format: '\u003cb>${point.x}\u003c/b>\u003cbr/>${series.name}: \u003cb>${point.y}\u003c/b>'\n };\n\n public legendSettings: Object = {\n visible: true,\n position: 'Bottom'\n };\n\n public crosshair: Object = {\n enable: true,\n lineType: 'Vertical'\n };\n\n public marker: Object = {\n visible: true,\n height: 8,\n width: 8,\n dataLabel: {\n visible: true,\n position: 'Top',\n font: { fontWeight: '600', color: '#ffffff' }\n }\n };\n\n public targetMarker: Object = {\n visible: true,\n shape: 'Diamond',\n height: 10,\n width: 10\n };\n\n public areaBorder: Object = {\n width: 2,\n color: '#9C27B0'\n };\n\n ngOnInit(): void {\n this.loadData();\n this.calculateKPIs();\n }\n\n loadData(): void {\n // Actual sales data\n this.actualData = [\n { month: 'Jan', sales: 35 },\n { month: 'Feb', sales: 28 },\n { month: 'Mar', sales: 34 },\n { month: 'Apr', sales: 32 },\n { month: 'May', sales: 40 },\n { month: 'Jun', sales: 45 },\n { month: 'Jul', sales: 42 },\n { month: 'Aug', sales: 48 },\n { month: 'Sep', sales: 50 },\n { month: 'Oct', sales: 46 },\n { month: 'Nov', sales: 52 },\n { month: 'Dec', sales: 55 }\n ];\n\n // Target data\n this.targetData = [\n { month: 'Jan', target: 38 },\n { month: 'Feb', target: 30 },\n { month: 'Mar', target: 36 },\n { month: 'Apr', target: 34 },\n { month: 'May', target: 38 },\n { month: 'Jun', target: 42 },\n { month: 'Jul', target: 45 },\n { month: 'Aug', target: 47 },\n { month: 'Sep', target: 48 },\n { month: 'Oct', target: 50 },\n { month: 'Nov', target: 51 },\n { month: 'Dec', target: 53 }\n ];\n\n // Forecast (next 3 months)\n this.forecastData = [\n { month: 'Oct', forecast: 46 },\n { month: 'Nov', forecast: 52 },\n { month: 'Dec', forecast: 55 },\n { month: 'Jan 2025', forecast: 58 },\n { month: 'Feb 2025', forecast: 60 },\n { month: 'Mar 2025', forecast: 62 }\n ];\n\n // Growth data\n this.growthData = this.calculateGrowth(this.actualData);\n\n // Category data\n this.categoryData = [\n { category: 'Electronics', value: 120, value2: 135, value3: 150 },\n { category: 'Clothing', value: 80, value2: 85, value3: 90 },\n { category: 'Food', value: 60, value2: 65, value3: 70 },\n { category: 'Books', value: 45, value2: 50, value3: 48 }\n ];\n }\n\n calculateGrowth(data: any[]): any[] {\n return data.map((item, index) => {\n if (index === 0) return { month: item.month, growth: 0 };\n let prevValue = data[index - 1].sales;\n let growth = ((item.sales - prevValue) / prevValue) * 100;\n return { month: item.month, growth: growth };\n });\n }\n\n calculateKPIs(): void {\n this.totalSales = this.actualData.reduce((sum, item: any) => sum + item.sales, 0);\n this.averageSales = this.totalSales / this.actualData.length;\n \n let maxItem = this.actualData.reduce((max: any, item: any) => \n item.sales > max.sales ? item : max\n );\n this.bestMonth = maxItem.month;\n this.bestMonthValue = maxItem.sales;\n }\n\n pointRender(args: IPointRenderEventArgs): void {\n // Highlight points below target\n if (args.series.name === 'Actual Sales') {\n let target = this.targetData.find((t: any) => t.month === args.point.x);\n if (target && args.point.y \u003c target.target) {\n args.fill = '#FF9800'; // Orange for below target\n }\n }\n }\n\n changeTimeRange(range: string): void {\n // Implement time range change logic\n console.log('Changing to:', range);\n }\n\n onChartLoaded(args: ILoadedEventArgs): void {\n console.log('Chart loaded successfully');\n }\n\n exportDashboard(): void {\n this.mainChart.export('PDF', 'TrendAnalysis', 'Landscape', [\n this.mainChart,\n this.growthChart,\n this.categoryChart\n ]);\n }\n}\n```\n\n## Financial Stock Chart\n\nImplement a professional stock chart with candlestick patterns and technical indicators.\n\n```typescript\nimport { Component, OnInit, ViewChild } from '@angular/core';\nimport { ChartComponent } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-stock-chart',\n template: `\n \u003cdiv class=\"stock-container\">\n \u003cdiv class=\"stock-header\">\n \u003cdiv class=\"stock-info\">\n \u003ch2>{{ stockSymbol }}\u003c/h2>\n \u003cdiv class=\"price\">\n \u003cspan class=\"current\">\\${{ currentPrice }}\u003c/span>\n \u003cspan [class]=\"priceChange >= 0 ? 'positive' : 'negative'\">\n {{ priceChange >= 0 ? '+' : '' }}{{ priceChange.toFixed(2) }}\n ({{ priceChangePercent.toFixed(2) }}%)\n \u003c/span>\n \u003c/div>\n \u003c/div>\n \u003cdiv class=\"controls\">\n \u003cbutton *ngFor=\"let range of timeRanges\" \n (click)=\"changeRange(range)\"\n [class.active]=\"selectedRange === range\">\n {{ range }}\n \u003c/button>\n \u003c/div>\n \u003c/div>\n\n \u003cejs-chart #stockChart\n [primaryXAxis]='primaryXAxis'\n [primaryYAxis]='primaryYAxis'\n [tooltip]='tooltip'\n [crosshair]='crosshair'\n [zoomSettings]='zoomSettings'\n [legendSettings]='legendSettings'\n [height]='chartHeight'\n (loaded)='onChartLoaded($event)'>\n \n \u003ce-series-collection>\n \u003c!-- Candlestick Series -->\n \u003ce-series \n [dataSource]='stockData' \n xName='date' \n high='high'\n low='low'\n open='open'\n close='close'\n type='Candle'\n name='{{ stockSymbol }}'\n bearFillColor='#F44336'\n bullFillColor='#4CAF50'>\n \u003c/e-series>\n\n \u003c!-- Volume -->\n \u003ce-series \n [dataSource]='stockData' \n xName='date' \n yName='volume'\n type='Column'\n name='Volume'\n yAxisName='volumeAxis'\n opacity='0.5'\n fill='#9E9E9E'>\n \u003c/e-series>\n\n \u003c!-- Moving Average 20 -->\n \u003ce-series \n [dataSource]='ma20Data' \n xName='date' \n yName='value'\n type='Line'\n name='MA(20)'\n width='2'\n fill='#2196F3'\n dashArray='5,5'>\n \u003c/e-series>\n\n \u003c!-- Moving Average 50 -->\n \u003ce-series \n [dataSource]='ma50Data' \n xName='date' \n yName='value'\n type='Line'\n name='MA(50)'\n width='2'\n fill='#FF9800'>\n \u003c/e-series>\n \u003c/e-series-collection>\n\n \u003ce-axes>\n \u003ce-axis \n name='volumeAxis'\n opposedPosition='true'\n majorGridLines='{ width: 0 }'\n labelFormat='{value}M'\n minimum='0'\n maximum='1000'\n interval='250'>\n \u003c/e-axis>\n \u003c/e-axes>\n \u003c/ejs-chart>\n\n \u003cdiv class=\"indicators\">\n \u003cdiv class=\"indicator\">\n \u003cspan>Open:\u003c/span> \\${{ latestData.open }}\n \u003c/div>\n \u003cdiv class=\"indicator\">\n \u003cspan>High:\u003c/span> \\${{ latestData.high }}\n \u003c/div>\n \u003cdiv class=\"indicator\">\n \u003cspan>Low:\u003c/span> \\${{ latestData.low }}\n \u003c/div>\n \u003cdiv class=\"indicator\">\n \u003cspan>Close:\u003c/span> \\${{ latestData.close }}\n \u003c/div>\n \u003cdiv class=\"indicator\">\n \u003cspan>Volume:\u003c/span> {{ latestData.volume }}M\n \u003c/div>\n \u003c/div>\n \u003c/div>\n `,\n styles: [`\n .stock-container {\n padding: 20px;\n background: #fff;\n }\n\n .stock-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n .stock-info h2 {\n margin: 0;\n font-size: 24px;\n }\n\n .price {\n margin-top: 10px;\n }\n\n .price .current {\n font-size: 32px;\n font-weight: bold;\n margin-right: 10px;\n }\n\n .price .positive {\n color: #4CAF50;\n }\n\n .price .negative {\n color: #F44336;\n }\n\n .controls button {\n margin-left: 5px;\n padding: 8px 16px;\n border: 1px solid #ddd;\n background: white;\n cursor: pointer;\n border-radius: 4px;\n }\n\n .controls button.active {\n background: #2196F3;\n color: white;\n border-color: #2196F3;\n }\n\n .indicators {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n padding: 15px;\n background: #f5f5f5;\n border-radius: 4px;\n }\n\n .indicator span {\n font-weight: bold;\n margin-right: 5px;\n }\n `]\n})\nexport class StockChartComponent implements OnInit {\n @ViewChild('stockChart') stockChart: ChartComponent;\n\n public stockSymbol: string = 'AAPL';\n public currentPrice: number = 175.50;\n public priceChange: number = 2.35;\n public priceChangePercent: number = 1.35;\n public chartHeight: string = '500px';\n\n public stockData: Object[] = [];\n public ma20Data: Object[] = [];\n public ma50Data: Object[] = [];\n public latestData: any = {};\n\n public timeRanges: string[] = ['1D', '5D', '1M', '3M', '6M', '1Y', '5Y'];\n public selectedRange: string = '1M';\n\n public primaryXAxis: Object = {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n crosshairTooltip: { enable: true }\n };\n\n public primaryYAxis: Object = {\n title: 'Price ($)',\n labelFormat: '${value}',\n opposedPosition: true,\n lineStyle: { width: 0 }\n };\n\n public tooltip: Object = {\n enable: true,\n shared: true\n };\n\n public crosshair: Object = {\n enable: true,\n lineType: 'Both'\n };\n\n public zoomSettings: Object = {\n enableSelectionZooming: true,\n enablePan: true,\n enableMouseWheelZooming: true,\n mode: 'X'\n };\n\n public legendSettings: Object = {\n visible: true\n };\n\n ngOnInit(): void {\n this.loadStockData();\n this.calculateMovingAverages();\n }\n\n loadStockData(): void {\n // Generate sample stock data\n const startDate = new Date(2024, 0, 1);\n const dataPoints = 90;\n \n let basePrice = 170;\n this.stockData = [];\n\n for (let i = 0; i \u003c dataPoints; i++) {\n const date = new Date(startDate);\n date.setDate(date.getDate() + i);\n \n const open = basePrice + (Math.random() * 10 - 5);\n const close = open + (Math.random() * 8 - 4);\n const high = Math.max(open, close) + Math.random() * 3;\n const low = Math.min(open, close) - Math.random() * 3;\n const volume = Math.floor(Math.random() * 500 + 200);\n\n this.stockData.push({\n date: date,\n open: parseFloat(open.toFixed(2)),\n high: parseFloat(high.toFixed(2)),\n low: parseFloat(low.toFixed(2)),\n close: parseFloat(close.toFixed(2)),\n volume: volume\n });\n\n basePrice = close;\n }\n\n this.latestData = this.stockData[this.stockData.length - 1];\n this.currentPrice = this.latestData.close;\n }\n\n calculateMovingAverages(): void {\n this.ma20Data = this.calculateMA(this.stockData, 20);\n this.ma50Data = this.calculateMA(this.stockData, 50);\n }\n\n calculateMA(data: any[], period: number): any[] {\n const ma = [];\n for (let i = period - 1; i \u003c data.length; i++) {\n const sum = data.slice(i - period + 1, i + 1)\n .reduce((acc, item) => acc + item.close, 0);\n ma.push({\n date: data[i].date,\n value: parseFloat((sum / period).toFixed(2))\n });\n }\n return ma;\n }\n\n changeRange(range: string): void {\n this.selectedRange = range;\n // Reload data based on range\n this.loadStockData();\n this.calculateMovingAverages();\n }\n\n onChartLoaded(args: any): void {\n console.log('Stock chart loaded');\n }\n}\n```\n\n## Real-Time Monitoring Dashboard\n\nCreate a live dashboard that updates with real-time data streams.\n\n```typescript\nimport { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';\nimport { ChartComponent } from '@syncfusion/ej2-angular-charts';\nimport { interval, Subscription } from 'rxjs';\n\n@Component({\n selector: 'app-realtime-monitor',\n template: `\n \u003cdiv class=\"monitor-container\">\n \u003cdiv class=\"monitor-header\">\n \u003ch2>System Performance Monitor\u003c/h2>\n \u003cdiv class=\"status\">\n \u003cspan class=\"indicator\" [class.active]=\"isLive\">\u003c/span>\n \u003cspan>{{ isLive ? 'LIVE' : 'PAUSED' }}\u003c/span>\n \u003cbutton (click)=\"toggleLive()\">\n {{ isLive ? 'Pause' : 'Resume' }}\n \u003c/button>\n \u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"metrics-grid\">\n \u003cdiv class=\"metric-card\">\n \u003ch3>CPU Usage\u003c/h3>\n \u003cejs-chart #cpuChart\n [primaryXAxis]='xAxis'\n [primaryYAxis]='cpuYAxis'\n [height]='\"200px\"'\n [chartArea]='chartArea'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='cpuData' \n xName='time' \n yName='value'\n type='SplineArea'\n fill='#FF6B6B'\n opacity='0.6'\n [animation]='animation'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003cdiv class=\"current-value\">{{ currentCPU }}%\u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"metric-card\">\n \u003ch3>Memory Usage\u003c/h3>\n \u003cejs-chart #memoryChart\n [primaryXAxis]='xAxis'\n [primaryYAxis]='memoryYAxis'\n [height]='\"200px\"'\n [chartArea]='chartArea'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='memoryData' \n xName='time' \n yName='value'\n type='SplineArea'\n fill='#4ECDC4'\n opacity='0.6'\n [animation]='animation'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003cdiv class=\"current-value\">{{ currentMemory }}%\u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"metric-card\">\n \u003ch3>Network Traffic\u003c/h3>\n \u003cejs-chart #networkChart\n [primaryXAxis]='xAxis'\n [primaryYAxis]='networkYAxis'\n [height]='\"200px\"'\n [chartArea]='chartArea'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='networkData' \n xName='time' \n yName='value'\n type='SplineArea'\n fill='#95E1D3'\n opacity='0.6'\n [animation]='animation'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003cdiv class=\"current-value\">{{ currentNetwork }} MB/s\u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"metric-card\">\n \u003ch3>Disk I/O\u003c/h3>\n \u003cejs-chart #diskChart\n [primaryXAxis]='xAxis'\n [primaryYAxis]='diskYAxis'\n [height]='\"200px\"'\n [chartArea]='chartArea'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='diskData' \n xName='time' \n yName='value'\n type='SplineArea'\n fill='#F38181'\n opacity='0.6'\n [animation]='animation'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003cdiv class=\"current-value\">{{ currentDisk }} MB/s\u003c/div>\n \u003c/div>\n \u003c/div>\n\n \u003cdiv class=\"alerts-panel\">\n \u003ch3>Recent Alerts\u003c/h3>\n \u003cdiv class=\"alert\" *ngFor=\"let alert of alerts\" [class]=\"alert.severity\">\n \u003cspan class=\"time\">{{ alert.time | date:'HH:mm:ss' }}\u003c/span>\n \u003cspan class=\"message\">{{ alert.message }}\u003c/span>\n \u003c/div>\n \u003c/div>\n \u003c/div>\n `,\n styles: [`\n .monitor-container {\n padding: 20px;\n background: #1a1a1a;\n color: #fff;\n min-height: 100vh;\n }\n\n .monitor-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n }\n\n .status {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .indicator {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #666;\n }\n\n .indicator.active {\n background: #4CAF50;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .metric-card {\n background: #2a2a2a;\n padding: 20px;\n border-radius: 8px;\n position: relative;\n }\n\n .metric-card h3 {\n margin: 0 0 15px 0;\n font-size: 14px;\n color: #888;\n }\n\n .current-value {\n position: absolute;\n top: 20px;\n right: 20px;\n font-size: 24px;\n font-weight: bold;\n }\n\n .alerts-panel {\n background: #2a2a2a;\n padding: 20px;\n border-radius: 8px;\n }\n\n .alert {\n padding: 10px;\n margin: 10px 0;\n border-left: 4px solid;\n background: #333;\n }\n\n .alert.warning {\n border-color: #FFC107;\n }\n\n .alert.error {\n border-color: #F44336;\n }\n\n .alert .time {\n margin-right: 10px;\n color: #888;\n }\n `]\n})\nexport class RealtimeMonitorComponent implements OnInit, OnDestroy {\n @ViewChild('cpuChart') cpuChart: ChartComponent;\n @ViewChild('memoryChart') memoryChart: ChartComponent;\n @ViewChild('networkChart') networkChart: ChartComponent;\n @ViewChild('diskChart') diskChart: ChartComponent;\n\n public isLive: boolean = true;\n private dataSubscription: Subscription;\n private maxDataPoints: number = 30;\n\n public cpuData: Object[] = [];\n public memoryData: Object[] = [];\n public networkData: Object[] = [];\n public diskData: Object[] = [];\n\n public currentCPU: number = 0;\n public currentMemory: number = 0;\n public currentNetwork: number = 0;\n public currentDisk: number = 0;\n\n public alerts: any[] = [];\n\n public xAxis: Object = {\n valueType: 'DateTime',\n labelFormat: 'HH:mm:ss',\n majorGridLines: { width: 0 },\n visible: false\n };\n\n public cpuYAxis: Object = {\n minimum: 0,\n maximum: 100,\n interval: 25,\n labelFormat: '{value}%',\n majorGridLines: { width: 1, color: '#333' }\n };\n\n public memoryYAxis: Object = {\n minimum: 0,\n maximum: 100,\n interval: 25,\n labelFormat: '{value}%',\n majorGridLines: { width: 1, color: '#333' }\n };\n\n public networkYAxis: Object = {\n minimum: 0,\n maximum: 100,\n interval: 25,\n labelFormat: '{value}',\n majorGridLines: { width: 1, color: '#333' }\n };\n\n public diskYAxis: Object = {\n minimum: 0,\n maximum: 100,\n interval: 25,\n labelFormat: '{value}',\n majorGridLines: { width: 1, color: '#333' }\n };\n\n public chartArea: Object = {\n border: { width: 0 },\n background: 'transparent'\n };\n\n public animation: Object = {\n enable: false\n };\n\n ngOnInit(): void {\n this.initializeData();\n this.startDataStream();\n }\n\n ngOnDestroy(): void {\n if (this.dataSubscription) {\n this.dataSubscription.unsubscribe();\n }\n }\n\n initializeData(): void {\n const now = new Date();\n for (let i = this.maxDataPoints - 1; i >= 0; i--) {\n const time = new Date(now.getTime() - i * 1000);\n this.cpuData.push({ time: time, value: 0 });\n this.memoryData.push({ time: time, value: 0 });\n this.networkData.push({ time: time, value: 0 });\n this.diskData.push({ time: time, value: 0 });\n }\n }\n\n startDataStream(): void {\n this.dataSubscription = interval(1000).subscribe(() => {\n if (this.isLive) {\n this.updateData();\n }\n });\n }\n\n updateData(): void {\n const now = new Date();\n \n // Generate random data\n this.currentCPU = parseFloat((Math.random() * 100).toFixed(1));\n this.currentMemory = parseFloat((Math.random() * 100).toFixed(1));\n this.currentNetwork = parseFloat((Math.random() * 100).toFixed(1));\n this.currentDisk = parseFloat((Math.random() * 100).toFixed(1));\n\n // Add new data points\n this.cpuData.push({ time: now, value: this.currentCPU });\n this.memoryData.push({ time: now, value: this.currentMemory });\n this.networkData.push({ time: now, value: this.currentNetwork });\n this.diskData.push({ time: now, value: this.currentDisk });\n\n // Remove old data points\n if (this.cpuData.length > this.maxDataPoints) {\n this.cpuData.shift();\n this.memoryData.shift();\n this.networkData.shift();\n this.diskData.shift();\n }\n\n // Check thresholds and create alerts\n this.checkThresholds();\n\n // Update charts\n this.refreshCharts();\n }\n\n checkThresholds(): void {\n if (this.currentCPU > 80) {\n this.addAlert('error', 'High CPU usage detected: ' + this.currentCPU + '%');\n }\n if (this.currentMemory > 85) {\n this.addAlert('warning', 'High memory usage: ' + this.currentMemory + '%');\n }\n }\n\n addAlert(severity: string, message: string): void {\n this.alerts.unshift({\n time: new Date(),\n severity: severity,\n message: message\n });\n \n // Keep only last 5 alerts\n if (this.alerts.length > 5) {\n this.alerts.pop();\n }\n }\n\n refreshCharts(): void {\n if (this.cpuChart) this.cpuChart.refresh();\n if (this.memoryChart) this.memoryChart.refresh();\n if (this.networkChart) this.networkChart.refresh();\n if (this.diskChart) this.diskChart.refresh();\n }\n\n toggleLive(): void {\n this.isLive = !this.isLive;\n }\n}\n```\n\n## Multi-Axis Comparison Charts\n\nCompare different metrics with different scales on the same chart.\n\n```typescript\n@Component({\n selector: 'app-multi-axis',\n template: `\n \u003cejs-chart \n [primaryXAxis]='primaryXAxis'\n [primaryYAxis]='primaryYAxis'\n [title]='\"Sales vs Temperature Analysis\"'\n [tooltip]='tooltip'\n [legendSettings]='legendSettings'>\n \n \u003ce-series-collection>\n \u003c!-- Sales on primary Y-axis -->\n \u003ce-series \n [dataSource]='salesData' \n xName='month' \n yName='sales'\n name='Sales'\n type='Column'\n fill='#4CAF50'>\n \u003c/e-series>\n\n \u003c!-- Temperature on secondary Y-axis -->\n \u003ce-series \n [dataSource]='temperatureData' \n xName='month' \n yName='temp'\n name='Temperature'\n type='Line'\n yAxisName='tempAxis'\n width='3'\n fill='#FF5722'\n [marker]='marker'>\n \u003c/e-series>\n\n \u003c!-- Humidity on tertiary Y-axis -->\n \u003ce-series \n [dataSource]='humidityData' \n xName='month' \n yName='humidity'\n name='Humidity'\n type='SplineArea'\n yAxisName='humidityAxis'\n opacity='0.5'\n fill='#2196F3'>\n \u003c/e-series>\n \u003c/e-series-collection>\n\n \u003ce-axes>\n \u003ce-axis \n name='tempAxis'\n opposedPosition='true'\n title='Temperature (°F)'\n labelFormat='{value}°F'\n minimum='0'\n maximum='100'\n interval='20'>\n \u003c/e-axis>\n \n \u003ce-axis \n name='humidityAxis'\n opposedPosition='false'\n rowIndex='1'\n title='Humidity (%)'\n labelFormat='{value}%'\n minimum='0'\n maximum='100'\n interval='20'>\n \u003c/e-axis>\n \u003c/e-axes>\n\n \u003ce-rows>\n \u003ce-row height='60%'>\u003c/e-row>\n \u003ce-row height='40%'>\u003c/e-row>\n \u003c/e-rows>\n \u003c/ejs-chart>\n `\n})\nexport class MultiAxisComponent {\n public primaryXAxis: Object = {\n valueType: 'Category',\n title: 'Month'\n };\n\n public primaryYAxis: Object = {\n title: 'Sales ($K)',\n labelFormat: '${value}K',\n rowIndex: 0\n };\n\n public marker: Object = {\n visible: true,\n height: 10,\n width: 10\n };\n}\n```\n\n## Best Practices\n\n### 1. Performance Optimization\n\n```typescript\n// Use Canvas for large datasets\n\u003cejs-chart [enableCanvas]='true' *ngIf=\"dataPoints > 5000\">\n```\n\n### 2. Memory Management\n\n```typescript\nngOnDestroy() {\n this.subscriptions.forEach(sub => sub.unsubscribe());\n if (this.chart) {\n this.chart.destroy();\n }\n}\n```\n\n### 3. Responsive Design\n\n```typescript\n@HostListener('window:resize')\nonResize() {\n if (this.chart) {\n this.chart.refresh();\n }\n}\n```\n\n## Troubleshooting\n\n### Issue: Chart not updating with new data\n**Solution:** Call `refresh()` after data changes or use `setData()` method.\n\n### Issue: Performance degradation\n**Solution:** Enable canvas rendering, reduce animations, implement data virtualization.\n\n### Issue: Legend items not interactive\n**Solution:** Ensure LegendService is provided in module/component.\n\n## Migration Guide\n\n### From EJ1 to EJ2\n\n**Property Changes:**\n```typescript\n// EJ1\n\u003cej-chart [series]=\"[{ points: data }]\">\n\n// EJ2\n\u003cejs-chart>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='data'>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n**Event Changes:**\n```typescript\n// EJ1\n(load)=\"chartLoad($event)\"\n\n// EJ2\n(loaded)=\"chartLoaded($event)\"\n```\n\n---\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":33487,"content_sha256":"5ee854fc0f03cf79ab9ca994ce9e0946ed296a80f6574ffa0fc7ac2e3f7ae77a"},{"filename":"references/customization.md","content":"# Customization Reference for Syncfusion Angular Chart\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Color Palettes](#color-palettes)\n - [Built-in Palettes](#built-in-palettes)\n - [Custom Color Palettes](#custom-color-palettes)\n - [Per-Series Colors](#per-series-colors)\n- [Themes](#themes)\n - [Available Themes](#available-themes)\n - [Applying Themes](#applying-themes)\n - [Theme Studio](#theme-studio)\n- [Chart Area Customization](#chart-area-customization)\n - [Background and Border](#background-and-border)\n - [Chart Margin](#chart-margin)\n - [Plot Area Customization](#plot-area-customization)\n- [Series Customization](#series-customization)\n - [Series Appearance](#series-appearance)\n - [Point-Level Customization](#point-level-customization)\n - [Marker Customization](#marker-customization)\n- [Text and Label Customization](#text-and-label-customization)\n - [Data Labels](#data-labels)\n - [Axis Labels](#axis-labels)\n - [Title and Subtitle](#title-and-subtitle)\n- [Animation Settings](#animation-settings)\n- [Responsive Design](#responsive-design)\n- [CSS Customization](#css-customization)\n- [Dynamic Styling](#dynamic-styling)\n- [Best Practices](#best-practices)\n- [Advanced Customization](#advanced-customization)\n- [Troubleshooting](#troubleshooting)\n\n## Introduction\n\nThe Syncfusion Angular Chart component offers extensive customization options to match your application's design language. From built-in themes to granular styling at the point level, you can create visually appealing and consistent data visualizations.\n\nThis reference covers all aspects of chart customization including themes, colors, styling, animations, and responsive design.\n\n## Color Palettes\n\n### Built-in Palettes\n\nThe chart provides default color palettes that automatically cycle through colors for multiple series.\n\n**Default Palette:**\n```typescript\n['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', \n '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57']\n```\n\n### Custom Color Palettes\n\nDefine custom color schemes using the `palettes` property:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cejs-chart [palettes]='customPalette'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='data1' type='Column'>\u003c/e-series>\n \u003ce-series [dataSource]='data2' type='Column'>\u003c/e-series>\n \u003ce-series [dataSource]='data3' type='Column'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public customPalette: string[] = [\n '#FF6B6B', // Red\n '#4ECDC4', // Teal\n '#45B7D1', // Blue\n '#FFA07A', // Salmon\n '#98D8C8' // Mint\n ];\n}\n```\n\n**Brand Colors Example:**\n```typescript\npublic brandPalette: string[] = [\n '#1976D2', // Primary\n '#FF9800', // Accent\n '#4CAF50', // Success\n '#F44336', // Error\n '#9C27B0' // Secondary\n];\n```\n\n**Monochrome Palette:**\n```typescript\npublic monochromePalette: string[] = [\n '#000000',\n '#404040',\n '#808080',\n '#BFBFBF',\n '#E0E0E0'\n];\n```\n\n### Per-Series Colors\n\nOverride palette colors for individual series:\n\n```typescript\n\u003ce-series \n [dataSource]='salesData' \n type='Column'\n fill='#FF5733'\n name='Sales'>\n\u003c/e-series>\n\n\u003ce-series \n [dataSource]='revenueData' \n type='Line'\n fill='#33C4FF'\n width='3'\n name='Revenue'>\n\u003c/e-series>\n```\n\n## Themes\n\n### Available Themes\n\nSyncfusion provides multiple built-in themes:\n\n| Theme | Description | CSS File |\n|-------|-------------|----------|\n| Material | Google Material Design | material.css |\n| Material Dark | Material Design (Dark) | material-dark.css |\n| Fabric | Microsoft Fabric | fabric.css |\n| Fabric Dark | Fabric (Dark) | fabric-dark.css |\n| Bootstrap | Bootstrap 4 | bootstrap.css |\n| Bootstrap Dark | Bootstrap 4 (Dark) | bootstrap-dark.css |\n| Bootstrap 5 | Bootstrap 5 | bootstrap5.css |\n| Bootstrap 5 Dark | Bootstrap 5 (Dark) | bootstrap5-dark.css |\n| Tailwind | Tailwind CSS | tailwind.css |\n| Tailwind Dark | Tailwind CSS (Dark) | tailwind-dark.css |\n| Fluent | Microsoft Fluent | fluent.css |\n| Fluent Dark | Fluent (Dark) | fluent-dark.css |\n| High Contrast | Accessibility | highcontrast.css |\n\n### Applying Themes\n\n**1. Import Theme in angular.json:**\n```json\n{\n \"styles\": [\n \"node_modules/@syncfusion/ej2-angular-charts/styles/material.css\"\n ]\n}\n```\n\n**2. Import in styles.css:**\n```css\n@import '@syncfusion/ej2-base/styles/material.css';\n@import '@syncfusion/ej2-buttons/styles/material.css';\n@import '@syncfusion/ej2-popups/styles/material.css';\n@import '@syncfusion/ej2-angular-charts/styles/material.css';\n```\n\n**3. Dynamic Theme Switching:**\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cselect (change)=\"changeTheme($event.target.value)\">\n \u003coption value=\"material\">Material\u003c/option>\n \u003coption value=\"fabric\">Fabric\u003c/option>\n \u003coption value=\"bootstrap\">Bootstrap\u003c/option>\n \u003c/select>\n \u003cejs-chart [theme]='currentTheme'>\n \u003c!-- chart configuration -->\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public currentTheme: string = 'Material';\n \n changeTheme(theme: string): void {\n this.currentTheme = theme;\n this.loadThemeCSS(theme);\n }\n \n loadThemeCSS(theme: string): void {\n let link = document.getElementById('theme-link') as HTMLLinkElement;\n if (link) {\n link.href = `node_modules/@syncfusion/ej2-angular-charts/styles/${theme}.css`;\n }\n }\n}\n```\n\n### Theme Studio\n\nUse Syncfusion Theme Studio to create custom themes:\n\n1. Visit: https://ej2.syncfusion.com/themestudio/\n2. Customize colors, fonts, and component styles\n3. Download the generated theme CSS\n4. Import in your application\n\n**Custom Theme Example:**\n```css\n/* custom-theme.css */\n.e-chart {\n --chart-bg: #F5F5F5;\n --chart-title: #333333;\n --chart-axis-label: #666666;\n --chart-grid: #E0E0E0;\n}\n```\n\n## Chart Area Customization\n\n### Background and Border\n\nCustomize the entire chart background and border:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart \n [background]='chartBackground'\n [border]='chartBorder'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='data'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public chartBackground: string = '#F0F8FF';\n \n public chartBorder: Object = {\n width: 2,\n color: '#4682B4'\n };\n}\n```\n\n**Gradient Background:**\n```typescript\nngAfterViewInit() {\n let chart = document.querySelector('.e-chart');\n if (chart) {\n chart.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';\n }\n}\n```\n\n### Chart Margin\n\nControl spacing around the chart:\n\n```typescript\npublic margin: Object = {\n left: 40,\n right: 40,\n top: 40,\n bottom: 40\n};\n\n\u003cejs-chart [margin]='margin'>\n```\n\n**Responsive Margins:**\n```typescript\n@HostListener('window:resize')\nonResize() {\n if (window.innerWidth \u003c 768) {\n this.margin = { left: 10, right: 10, top: 20, bottom: 20 };\n } else {\n this.margin = { left: 40, right: 40, top: 40, bottom: 40 };\n }\n}\n```\n\n### Plot Area Customization\n\nStyle the area where data is plotted:\n\n```typescript\npublic chartArea: Object = {\n border: {\n color: '#CCCCCC',\n width: 1\n },\n background: '#FFFFFF',\n opacity: 0.9\n};\n\n\u003cejs-chart [chartArea]='chartArea'>\n```\n\n**With Custom Dimensions:**\n```typescript\npublic chartArea: Object = {\n width: '90%',\n height: '80%',\n background: 'rgba(173, 216, 230, 0.3)',\n border: { width: 0 }\n};\n```\n\n## Series Customization\n\n### Series Appearance\n\nCustomize individual series appearance:\n\n```typescript\n\u003ce-series \n [dataSource]='data'\n type='Column'\n fill='#FF6347'\n opacity='0.8'\n [border]='seriesBorder'\n [cornerRadius]='cornerRadius'>\n\u003c/e-series>\n\npublic seriesBorder: Object = {\n width: 2,\n color: '#8B0000'\n};\n\npublic cornerRadius: Object = {\n bottomLeft: 10,\n bottomRight: 10,\n topLeft: 10,\n topRight: 10\n};\n```\n\n**Line Series Customization:**\n```typescript\n\u003ce-series \n [dataSource]='data'\n type='Line'\n fill='#4169E1'\n width='3'\n dashArray='5,5'> \u003c!-- Dashed line -->\n\u003c/e-series>\n```\n\n**Area Series with Gradient:**\n```typescript\n\u003ce-series \n [dataSource]='data'\n type='Area'\n fill='url(#gradient1)'\n opacity='0.6'>\n\u003c/e-series>\n\n// Define gradient in component\nngAfterViewInit() {\n let svg = document.querySelector('svg');\n let defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');\n defs.innerHTML = `\n \u003clinearGradient id=\"gradient1\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n \u003cstop offset=\"0%\" style=\"stop-color:#4169E1;stop-opacity:1\" />\n \u003cstop offset=\"100%\" style=\"stop-color:#4169E1;stop-opacity:0.3\" />\n \u003c/linearGradient>\n `;\n svg.insertBefore(defs, svg.firstChild);\n}\n```\n\n### Point-Level Customization\n\nUse `pointRender` event for dynamic point styling:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart (pointRender)='pointRender($event)'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='data' xName='x' yName='y'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n pointRender(args: IPointRenderEventArgs): void {\n // Conditional coloring based on value\n if (args.point.y > 50) {\n args.fill = '#00C853'; // Green for high values\n } else if (args.point.y \u003c 20) {\n args.fill = '#FF1744'; // Red for low values\n } else {\n args.fill = '#FFC107'; // Yellow for medium values\n }\n \n // Custom border\n args.border = {\n width: 2,\n color: '#000000'\n };\n }\n}\n```\n\n**Highlight Specific Points:**\n```typescript\npointRender(args: IPointRenderEventArgs): void {\n // Highlight maximum value\n if (args.point.y === Math.max(...this.data.map(d => d.y))) {\n args.fill = '#FF4081';\n args.border = { width: 3, color: '#C51162' };\n }\n \n // Different shapes for ranges\n if (args.point.y > 75) {\n args.shape = 'Diamond';\n }\n}\n```\n\n### Marker Customization\n\nEnhance data points with custom markers:\n\n```typescript\n\u003ce-series \n [dataSource]='data'\n type='Line'\n [marker]='markerSettings'>\n\u003c/e-series>\n\npublic markerSettings: Object = {\n visible: true,\n shape: 'Circle', // Circle, Rectangle, Triangle, Diamond, Pentagon, etc.\n width: 10,\n height: 10,\n fill: '#FF6347',\n border: {\n width: 2,\n color: '#FFFFFF'\n },\n imageUrl: 'path/to/custom-marker.png' // Use custom image\n};\n```\n\n**Dynamic Marker Shapes:**\n```typescript\npublic markerSettings: Object = {\n visible: true,\n width: 8,\n height: 8,\n dataLabel: {\n visible: true\n }\n};\n\npointRender(args: IPointRenderEventArgs): void {\n // Different shapes based on data\n if (args.point.y > 60) {\n args.shape = 'Triangle';\n } else if (args.point.y > 30) {\n args.shape = 'Circle';\n } else {\n args.shape = 'InvertedTriangle';\n }\n}\n```\n\n## Text and Label Customization\n\n### Data Labels\n\nCustomize labels displayed on data points:\n\n```typescript\n\u003ce-series \n [dataSource]='data'\n [marker]='markerSettings'>\n\u003c/e-series>\n\npublic markerSettings: Object = {\n dataLabel: {\n visible: true,\n position: 'Top', // Top, Bottom, Middle, Outer\n font: {\n fontFamily: 'Arial',\n size: '12px',\n fontWeight: '600',\n color: '#333333'\n },\n fill: '#FFFFFF',\n border: {\n width: 1,\n color: '#CCCCCC'\n },\n margin: {\n left: 5,\n right: 5,\n top: 5,\n bottom: 5\n },\n rx: 5, // Border radius x\n ry: 5 // Border radius y\n }\n};\n```\n\n**Formatted Data Labels:**\n```typescript\npublic markerSettings: Object = {\n dataLabel: {\n visible: true,\n template: '\u003cdiv style=\"padding:5px; background:#4CAF50; color:white; border-radius:3px;\">${point.y}K\u003c/div>'\n }\n};\n```\n\n**Custom Label Text:**\n```typescript\ntextRender(args: ITextRenderEventArgs): void {\n // Add currency symbol\n args.text = '

Implementing Syncfusion Angular Chart Component A comprehensive guide for implementing the Syncfusion Angular Chart component, a high-performance, interactive data visualization library supporting 25+ chart types including line, bar, area, column, pie, financial, and specialized series. Optimized for responsive rendering, smooth interactions, and large datasets. When to Use This Skill Use this skill when you need to: - Visualize Data: Display numerical data as charts, graphs, or plots in Angular applications - Trend Analysis: Show data trends over time using line, spline, or area charts - Com…

+ args.text;\n \n // Format numbers\n args.text = parseFloat(args.text).toFixed(2) + '%';\n \n // Conditional formatting\n if (parseFloat(args.text) \u003c 0) {\n args.color = '#FF0000';\n args.text = '(' + Math.abs(parseFloat(args.text)) + ')';\n }\n}\n```\n\n### Axis Labels\n\nStyle axis labels:\n\n```typescript\npublic primaryXAxis: Object = {\n labelStyle: {\n color: '#424242',\n size: '12px',\n fontFamily: 'Segoe UI',\n fontWeight: '500'\n },\n labelRotation: -45, // Rotate labels\n labelIntersectAction: 'Rotate45' // Handle overlapping\n};\n\npublic primaryYAxis: Object = {\n labelStyle: {\n color: '#424242',\n size: '12px'\n },\n labelFormat: '{value}%', // Format as percentage\n edgeLabelPlacement: 'Shift'\n};\n```\n\n**Custom Axis Label Rendering:**\n```typescript\naxisLabelRender(args: IAxisLabelRenderEventArgs): void {\n // Abbreviate large numbers\n if (args.value >= 1000000) {\n args.text = (args.value / 1000000).toFixed(1) + 'M';\n } else if (args.value >= 1000) {\n args.text = (args.value / 1000).toFixed(1) + 'K';\n }\n \n // Color-code labels\n if (args.axis.name === 'primaryYAxis' && args.value \u003c 0) {\n args.labelStyle.color = '#FF0000';\n }\n}\n```\n\n### Title and Subtitle\n\nCustomize chart title and subtitle:\n\n```typescript\npublic title: string = 'Sales Performance 2024';\npublic titleStyle: Object = {\n fontFamily: 'Arial',\n size: '18px',\n fontWeight: 'bold',\n color: '#2C3E50',\n textAlignment: 'Center',\n textOverflow: 'Wrap'\n};\n\npublic subTitle: string = 'Quarterly Revenue Analysis';\npublic subTitleStyle: Object = {\n fontFamily: 'Arial',\n size: '14px',\n color: '#7F8C8D',\n textAlignment: 'Center'\n};\n\n\u003cejs-chart \n [title]='title'\n [titleStyle]='titleStyle'\n [subTitle]='subTitle'\n [subTitleStyle]='subTitleStyle'>\n\u003c/ejs-chart>\n```\n\n## Animation Settings\n\nControl chart animations:\n\n```typescript\npublic animation: Object = {\n enable: true,\n duration: 1500, // milliseconds\n delay: 100 // delay before animation starts\n};\n\n\u003ce-series \n [dataSource]='data'\n [animation]='animation'>\n\u003c/e-series>\n```\n\n**Different Animations Per Series:**\n```typescript\npublic series1Animation: Object = {\n enable: true,\n duration: 1000,\n delay: 0\n};\n\npublic series2Animation: Object = {\n enable: true,\n duration: 1000,\n delay: 500 // Start after first series\n};\n\n\u003ce-series [animation]='series1Animation'>\u003c/e-series>\n\u003ce-series [animation]='series2Animation'>\u003c/e-series>\n```\n\n**Disable Animation for Performance:**\n```typescript\n// For charts with many data points\npublic animation: Object = {\n enable: false\n};\n```\n\n## Responsive Design\n\nMake charts responsive to different screen sizes:\n\n```typescript\nimport { Component, HostListener } from '@angular/core';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cejs-chart \n [width]='chartWidth'\n [height]='chartHeight'\n [margin]='margin'>\n \u003c!-- chart configuration -->\n \u003c/ejs-chart>\n `\n})\nexport class ResponsiveChartComponent {\n public chartWidth: string = '100%';\n public chartHeight: string = '400px';\n public margin: Object = { left: 40, right: 40, top: 40, bottom: 40 };\n \n @HostListener('window:resize')\n onResize() {\n const width = window.innerWidth;\n \n if (width \u003c 576) {\n // Mobile\n this.chartHeight = '300px';\n this.margin = { left: 10, right: 10, top: 20, bottom: 40 };\n this.primaryXAxis.labelRotation = -45;\n } else if (width \u003c 768) {\n // Tablet\n this.chartHeight = '350px';\n this.margin = { left: 20, right: 20, top: 30, bottom: 40 };\n this.primaryXAxis.labelRotation = 0;\n } else {\n // Desktop\n this.chartHeight = '400px';\n this.margin = { left: 40, right: 40, top: 40, bottom: 40 };\n this.primaryXAxis.labelRotation = 0;\n }\n }\n \n ngOnInit() {\n this.onResize(); // Set initial size\n }\n}\n```\n\n**CSS Media Queries:**\n```css\n/* chart.component.css */\n.chart-container {\n width: 100%;\n padding: 20px;\n}\n\n@media (max-width: 768px) {\n .chart-container {\n padding: 10px;\n }\n \n .e-chart .e-chart-title {\n font-size: 14px !important;\n }\n \n .e-chart .e-axis-label {\n font-size: 10px !important;\n }\n}\n\n@media (max-width: 576px) {\n .chart-container {\n padding: 5px;\n }\n \n .e-chart .e-chart-title {\n font-size: 12px !important;\n }\n}\n```\n\n## CSS Customization\n\n### Global Chart Styles\n\nOverride default styles:\n\n```css\n/* styles.css or component.css */\n\n/* Chart background */\n.e-chart {\n background: linear-gradient(to bottom, #f5f7fa 0%, #c3cfe2 100%);\n font-family: 'Roboto', sans-serif;\n}\n\n/* Title styling */\n.e-chart .e-chart-title {\n font-size: 20px;\n font-weight: 700;\n fill: #2c3e50;\n}\n\n/* Axis lines */\n.e-chart .e-axis-line {\n stroke: #95a5a6;\n stroke-width: 1;\n}\n\n/* Grid lines */\n.e-chart .e-grid-line {\n stroke: #ecf0f1;\n stroke-dasharray: 3, 3;\n}\n\n/* Legend */\n.e-chart .e-legend-text {\n font-size: 12px;\n fill: #34495e;\n}\n\n/* Tooltip */\n.e-chart .e-tooltip-wrap {\n background: rgba(0, 0, 0, 0.8);\n border-radius: 4px;\n padding: 8px;\n}\n```\n\n### Component-Level Styling\n\n```typescript\n@Component({\n selector: 'app-chart',\n template: `\u003cejs-chart class=\"custom-chart\">\u003c/ejs-chart>`,\n styles: [`\n .custom-chart {\n border: 2px solid #3498db;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n `]\n})\n```\n\n## Dynamic Styling\n\nChange styles programmatically:\n\n```typescript\nexport class DynamicChartComponent {\n @ViewChild('chart') chart: ChartComponent;\n \n applyDarkMode(): void {\n this.chart.background = '#2C3E50';\n this.chart.primaryXAxis.labelStyle.color = '#ECF0F1';\n this.chart.primaryYAxis.labelStyle.color = '#ECF0F1';\n this.chart.titleStyle.color = '#FFFFFF';\n this.chart.refresh();\n }\n \n applyLightMode(): void {\n this.chart.background = '#FFFFFF';\n this.chart.primaryXAxis.labelStyle.color = '#2C3E50';\n this.chart.primaryYAxis.labelStyle.color = '#2C3E50';\n this.chart.titleStyle.color = '#2C3E50';\n this.chart.refresh();\n }\n}\n```\n\n## Best Practices\n\n1. **Maintain Consistency:**\n - Use consistent colors across related charts\n - Follow your brand guidelines\n - Keep font styles uniform\n\n2. **Accessibility:**\n - Ensure sufficient color contrast (WCAG AA: 4.5:1 minimum)\n - Don't rely solely on color to convey information\n - Provide alternative text for screen readers\n\n3. **Performance:**\n - Disable animations for charts with many points\n - Use CSS for static styles instead of inline styles\n - Minimize DOM manipulation\n\n4. **Responsive Design:**\n - Test on multiple screen sizes\n - Use relative units (%, em) where appropriate\n - Adjust label rotations for mobile\n\n5. **Theming:**\n - Use Theme Studio for cohesive themes\n - Keep custom themes in separate files\n - Document custom color codes\n\n## Advanced Customization\n\n### Custom Series Rendering\n\n```typescript\nimport { ChartComponent } from '@syncfusion/ej2-angular-charts';\n\nexport class CustomChartComponent {\n @ViewChild('chart') chart: ChartComponent;\n \n ngAfterViewInit() {\n // Access SVG elements\n let seriesElements = document.querySelectorAll('.e-series-0');\n seriesElements.forEach((element: HTMLElement) => {\n element.style.filter = 'drop-shadow(2px 2px 4px rgba(0,0,0,0.3))';\n });\n }\n}\n```\n\n### Conditional Rendering\n\n```typescript\nseriesRender(args: ISeriesRenderEventArgs): void {\n if (args.series.name === 'Actual') {\n args.fill = this.actualColor;\n } else if (args.series.name === 'Forecast') {\n args.fill = this.forecastColor;\n args.dashArray = '5,5';\n }\n}\n```\n\n## Troubleshooting\n\n### Theme Not Applying\n\n**Issue:** Theme styles not visible\n**Solutions:**\n- Verify CSS import order\n- Check for CSS specificity conflicts\n- Ensure theme CSS is loaded before component\n- Clear browser cache\n\n### Colors Not Changing\n\n**Issue:** Custom colors not applied\n**Solutions:**\n- Check property names (case-sensitive)\n- Verify color format (hex, rgb, rgba)\n- Use `refresh()` after programmatic changes\n- Check event timing (use `loaded` event)\n\n### Performance Issues\n\n**Issue:** Slow rendering with custom styles\n**Solutions:**\n- Move styles to CSS instead of inline\n- Reduce DOM manipulations\n- Use CSS classes instead of inline styles\n- Disable animations for large datasets\n\n---\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":20093,"content_sha256":"7e6350dda0db79c0f758e6b17ef3b0789fe008e34f938d849591057ea6dc0547"},{"filename":"references/data-binding.md","content":"# Data Binding Reference for Syncfusion Angular Chart\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Data Binding Approaches Overview](#data-binding-approaches-overview)\n- [Local Data Binding](#local-data-binding)\n - [Simple Local Data](#simple-local-data)\n - [Common DataSource](#common-datasource)\n - [Complex JSON Structures](#complex-json-structures)\n- [Remote Data Binding](#remote-data-binding)\n - [Using DataManager](#using-datamanager)\n - [OData Services](#odata-services)\n - [ODataV4 Services](#odatav4-services)\n - [Web API Adaptor](#web-api-adaptor)\n - [Custom Adaptor](#custom-adaptor)\n- [Lazy Loading](#lazy-loading)\n- [Dynamic Data Updates](#dynamic-data-updates)\n - [Adding Data Points](#adding-data-points)\n - [Removing Data Points](#removing-data-points)\n - [Replacing Entire Dataset](#replacing-entire-dataset)\n - [Interactive Add/Remove](#interactive-addremove)\n- [Handling Empty Points](#handling-empty-points)\n- [Offline Mode](#offline-mode)\n- [No Data Template](#no-data-template)\n- [Performance Optimization](#performance-optimization)\n- [Best Practices](#best-practices)\n- [Troubleshooting](#troubleshooting)\n- [Advanced Scenarios](#advanced-scenarios)\n\n## Introduction\n\nThe Syncfusion Angular Chart component provides flexible data binding capabilities to accommodate various application scenarios. Whether you're working with local JSON arrays, fetching data from remote services, or handling real-time data streams, the chart component offers multiple approaches to suit your needs.\n\nThis reference guide covers all data binding methods, performance considerations, and best practices for working with data in Angular Chart components.\n\n## Data Binding Approaches Overview\n\nThe chart supports the following data binding methods:\n\n| Method | Best For | Advantages | Considerations |\n|--------|----------|------------|-----------------|\n| Local data | Small to medium datasets | Simple setup, no network latency, instant rendering | All data must be in memory |\n| Common datasource | Multiple series sharing data | Reduces redundancy, single update point | Limited to data common across series |\n| Lazy loading | Large datasets with scrolling | Loads only visible data, better performance | Requires server-side pagination |\n| Remote data (OData/WebAPI) | Backend-driven data | Scalable, centralized data management, real-time updates | Network latency, requires service setup |\n| Offline mode | Data caching with client-side actions | Eliminates repeated requests, faster interactions | Initial load time, memory constraints |\n\n## Local Data Binding\n\n### Simple Local Data\n\nBind JSON data directly to chart series using the `dataSource` property. Map JSON fields to x and y axes using `xName` and `yName` properties.\n\n**Basic Example:**\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cejs-chart>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='chartData' \n xName='month' \n yName='sales'\n type='Column'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public chartData: Object[] = [\n { month: 'Jan', sales: 35 },\n { month: 'Feb', sales: 28 },\n { month: 'Mar', sales: 34 },\n { month: 'Apr', sales: 32 },\n { month: 'May', sales: 40 },\n { month: 'Jun', sales: 32 }\n ];\n}\n```\n\n### Common DataSource\n\nShare a single data source across multiple series by setting `dataSource` at the chart level instead of the series level.\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cejs-chart [dataSource]='commonData'>\n \u003ce-series-collection>\n \u003ce-series xName='x' yName='y1' type='Line' name='Product A'>\u003c/e-series>\n \u003ce-series xName='x' yName='y2' type='Line' name='Product B'>\u003c/e-series>\n \u003ce-series xName='x' yName='y3' type='Line' name='Product C'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public commonData: Object[] = [\n { x: 'Jan', y1: 35, y2: 28, y3: 34 },\n { x: 'Feb', y1: 28, y2: 35, y3: 32 },\n { x: 'Mar', y1: 34, y2: 32, y3: 40 },\n { x: 'Apr', y1: 32, y2: 40, y3: 32 }\n ];\n}\n```\n\n**Benefits:**\n- Single source of truth for data updates\n- Reduced code duplication\n- Easier maintenance for multi-series charts\n\n### Complex JSON Structures\n\nHandle nested JSON data by mapping to nested properties:\n\n```typescript\npublic complexData: Object[] = [\n { \n date: '2024-01', \n metrics: { \n revenue: 50000, \n expenses: 35000,\n profit: 15000 \n },\n metadata: {\n region: 'North',\n category: 'Electronics'\n }\n },\n // ... more data\n];\n\n// Map nested properties\n\u003ce-series \n [dataSource]='complexData' \n xName='date' \n yName='metrics.revenue'\n type='Column'>\n\u003c/e-series>\n```\n\n## Remote Data Binding\n\n### Using DataManager\n\nThe `DataManager` class simplifies communication with REST APIs, OData services, and custom web endpoints.\n\n**Basic Remote Data Example:**\n\n```typescript\nimport { Component } from '@angular/core';\nimport { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cejs-chart>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='remoteData' \n [query]='query'\n xName='OrderDate' \n yName='Freight'\n type='Line'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public remoteData: DataManager = new DataManager({\n url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',\n adaptor: new ODataAdaptor()\n });\n \n public query: Query = new Query().take(10).where('EmployeeID', 'equal', 3);\n}\n```\n\n### OData Services\n\nOData (Open Data Protocol) is a standardized protocol for creating and consuming data APIs.\n\n```typescript\nimport { ODataAdaptor } from '@syncfusion/ej2-data';\n\npublic odataManager: DataManager = new DataManager({\n url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',\n adaptor: new ODataAdaptor(),\n crossDomain: true\n});\n\npublic query: Query = new Query()\n .select(['OrderID', 'CustomerID', 'Freight', 'OrderDate'])\n .take(100)\n .sortBy('OrderDate', 'descending');\n```\n\n**Query Operations:**\n- `.select()` - Specify fields to retrieve\n- `.where()` - Filter data\n- `.sortBy()` - Sort results\n- `.take()` - Limit number of records\n- `.skip()` - Skip records (pagination)\n\n### ODataV4 Services\n\nODataV4 is the latest version with enhanced query capabilities:\n\n```typescript\nimport { ODataV4Adaptor } from '@syncfusion/ej2-data';\n\npublic odataV4Manager: DataManager = new DataManager({\n url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',\n adaptor: new ODataV4Adaptor()\n});\n\npublic advancedQuery: Query = new Query()\n .select(['OrderID', 'ShipCountry', 'Freight'])\n .where('Freight', 'greaterthan', 50)\n .take(20)\n .expand('Customer'); // ODataV4 specific\n```\n\n### Web API Adaptor\n\nFor custom REST APIs that don't follow OData conventions:\n\n```typescript\nimport { WebApiAdaptor } from '@syncfusion/ej2-data';\n\npublic webApiManager: DataManager = new DataManager({\n url: 'https://your-api.com/api/sales',\n adaptor: new WebApiAdaptor()\n});\n```\n\n**Expected Response Format:**\n\n```json\n{\n \"Items\": [\n { \"id\": 1, \"month\": \"Jan\", \"sales\": 50000 },\n { \"id\": 2, \"month\": \"Feb\", \"sales\": 55000 }\n ],\n \"Count\": 830\n}\n```\n\n### Custom Adaptor\n\nCreate custom adaptors for specialized data transformations:\n\n```typescript\nimport { ODataAdaptor } from '@syncfusion/ej2-data';\n\nexport class CustomAdaptor extends ODataAdaptor {\n processResponse(): Object {\n let result: any = super.processResponse.apply(this, arguments);\n \n // Add serial numbers\n result.forEach((item: any, index: number) => {\n item.serialNo = index + 1;\n });\n \n // Transform dates\n result.forEach((item: any) => {\n if (item.date) {\n item.formattedDate = new Date(item.date).toLocaleDateString();\n }\n });\n \n // Calculate computed fields\n result.forEach((item: any) => {\n if (item.revenue && item.cost) {\n item.profit = item.revenue - item.cost;\n item.margin = ((item.profit / item.revenue) * 100).toFixed(2);\n }\n });\n \n return result;\n }\n}\n\n// Usage\npublic customData: DataManager = new DataManager({\n url: 'https://your-api.com/data',\n adaptor: new CustomAdaptor()\n});\n```\n\n## Lazy Loading\n\nLazy loading enables on-demand data retrieval for large datasets, loading only visible data ranges.\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { ChartComponent } from '@syncfusion/ej2-angular-charts';\nimport { IScrollEventArgs } from '@syncfusion/ej2-charts';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cejs-chart #chart\n [primaryXAxis]='primaryXAxis'\n [zoomSettings]='zoomSettings'\n (scrollEnd)='scrollEnd($event)'>\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]='chartData' \n xName='x' \n yName='y'\n type='Line'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class LazyLoadChartComponent {\n @ViewChild('chart') chart: ChartComponent;\n \n public chartData: Object[] = this.getInitialData();\n \n public primaryXAxis: Object = {\n valueType: 'DateTime',\n scrollbarSettings: {\n enable: true\n }\n };\n \n public zoomSettings: Object = {\n enableScrollbar: true,\n enableSelectionZooming: true\n };\n \n getInitialData(): Object[] {\n let data: Object[] = [];\n let startDate = new Date(2024, 0, 1);\n for (let i = 0; i \u003c 100; i++) {\n data.push({\n x: new Date(startDate.getTime() + i * 24 * 60 * 60 * 1000),\n y: Math.random() * 100\n });\n }\n return data;\n }\n \n scrollEnd(args: IScrollEventArgs): void {\n if (args.currentRange) {\n let min = args.currentRange.minimum;\n let max = args.currentRange.maximum;\n \n // Fetch data for the visible range\n this.fetchDataForRange(min, max).then(newData => {\n // Append new data\n this.chartData = [...this.chartData, ...newData];\n this.chart.refresh();\n });\n }\n }\n \n async fetchDataForRange(min: number, max: number): Promise\u003cObject[]> {\n // Simulate API call\n return new Promise((resolve) => {\n setTimeout(() => {\n let data: Object[] = [];\n let minDate = new Date(min);\n let maxDate = new Date(max);\n // Generate data for range\n resolve(data);\n }, 500);\n });\n }\n}\n```\n\n## Dynamic Data Updates\n\n### Adding Data Points\n\nUse the `addPoint` method to append new data points:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { ChartComponent } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-chart',\n template: `\n \u003cbutton (click)=\"addNewPoint()\">Add Point\u003c/button>\n \u003cejs-chart #chart>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='chartData' xName='x' yName='y'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class DynamicChartComponent {\n @ViewChild('chart') chart: ChartComponent;\n \n public chartData: Object[] = [\n { x: 'Jan', y: 35 },\n { x: 'Feb', y: 28 }\n ];\n \n addNewPoint(): void {\n let newPoint = { x: 'Mar', y: Math.floor(Math.random() * 50) };\n this.chart.series[0].addPoint(newPoint, 500); // 500ms animation\n }\n}\n```\n\n### Removing Data Points\n\nUse `removePoint` to delete data points by index:\n\n```typescript\nremovePointAtIndex(index: number): void {\n if (index >= 0 && index \u003c this.chartData.length) {\n this.chart.series[0].removePoint(index, 500);\n }\n}\n```\n\n### Replacing Entire Dataset\n\nUse `setData` for complete data refresh:\n\n```typescript\nrefreshData(): void {\n let newData = this.fetchNewDataSet();\n this.chart.series[0].setData(newData, 1000); // 1000ms animation\n}\n```\n\n### Interactive Add/Remove\n\nEnable users to add/remove points by clicking:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart (chartMouseClick)='chartMouseClick($event)'>\n \u003c!-- chart configuration -->\n \u003c/ejs-chart>\n `\n})\nexport class InteractiveChartComponent {\n chartMouseClick(args: IMouseEventArgs): void {\n if (args.target.includes('Point')) {\n // Remove clicked point\n let pointIndex = args.pointIndex;\n this.chart.series[0].removePoint(pointIndex);\n } else {\n // Add point at clicked location\n let xValue = args.axisData['primaryXAxis'];\n let yValue = args.axisData['primaryYAxis'];\n let newPoint = { x: xValue, y: yValue };\n this.chart.series[0].addPoint(newPoint);\n }\n }\n}\n```\n\n## Handling Empty Points\n\nData points with `null` or `undefined` values are treated as empty points.\n\n```typescript\npublic dataWithEmptyPoints: Object[] = [\n { x: 'Jan', y: 35 },\n { x: 'Feb', y: null }, // Empty point\n { x: 'Mar', y: 34 },\n { x: 'Apr', y: undefined }, // Empty point\n { x: 'May', y: 40 }\n];\n\n// Configure empty point behavior\n\u003ce-series \n [dataSource]='dataWithEmptyPoints'\n [emptyPointSettings]='emptyPointSettings'>\n\u003c/e-series>\n\npublic emptyPointSettings: Object = {\n mode: 'Average', // 'Gap', 'Zero', 'Average', 'Drop'\n fill: '#ff6347', // Custom color for empty points\n border: {\n width: 2,\n color: '#000000'\n }\n};\n```\n\n**Empty Point Modes:**\n- `Gap` - Leave blank space (default)\n- `Zero` - Treat as zero value\n- `Average` - Calculate average of adjacent points\n- `Drop` - Remove from series entirely\n\n## Offline Mode\n\nEnable offline mode to load all data once and handle operations client-side:\n\n```typescript\nimport { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';\n\npublic offlineData: DataManager = new DataManager({\n url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',\n adaptor: new ODataAdaptor(),\n offline: true // Enable offline mode\n});\n```\n\n**Use Cases:**\n- Small to medium datasets\n- Reducing server load\n- Improving responsiveness\n- Working with intermittent connectivity\n\n**Considerations:**\n- Entire dataset loaded at initialization\n- Higher initial load time\n- Increased memory usage\n\n## No Data Template\n\nDisplay custom content when no data is available:\n\n```typescript\n@Component({\n template: `\n \u003cejs-chart [noDataTemplate]='noDataTemplate'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='emptyData'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \n \u003cng-template #noDataTemplate>\n \u003cdiv style=\"text-align: center; padding: 50px;\">\n \u003ch3>No Data Available\u003c/h3>\n \u003cp>Please load data to view the chart\u003c/p>\n \u003cbutton (click)=\"loadData()\">Load Data\u003c/button>\n \u003c/div>\n \u003c/ng-template>\n `\n})\nexport class NoDataChartComponent {\n public emptyData: Object[] = [];\n \n loadData(): void {\n this.emptyData = this.fetchData();\n }\n}\n```\n\n## Performance Optimization\n\n### Large Datasets\n\nFor datasets with thousands of points:\n\n1. **Use Canvas Rendering:**\n```typescript\n\u003cejs-chart [enableCanvas]='true'>\n```\n\n2. **Disable Animations:**\n```typescript\npublic animation: Object = { enable: false };\n```\n\n3. **Implement Data Virtualization:**\n```typescript\n// Load data in chunks\npublic chartData: Object[] = [];\n\nngOnInit() {\n this.loadDataChunk(0, 1000); // Load first 1000 points\n}\n\nloadDataChunk(start: number, count: number) {\n let chunk = this.fetchDataRange(start, count);\n this.chartData = [...this.chartData, ...chunk];\n}\n```\n\n4. **Use Aggregation:**\n```typescript\n// Aggregate data before binding\npublic aggregatedData = this.aggregateByMonth(rawData);\n```\n\n### Throttling Updates\n\nFor real-time data streams:\n\n```typescript\nimport { Subject } from 'rxjs';\nimport { throttleTime } from 'rxjs/operators';\n\nexport class RealTimeChartComponent {\n private dataStream = new Subject\u003cany>();\n \n ngOnInit() {\n this.dataStream.pipe(\n throttleTime(1000) // Update chart max once per second\n ).subscribe(data => {\n this.updateChart(data);\n });\n }\n \n onDataReceived(newData: any) {\n this.dataStream.next(newData);\n }\n}\n```\n\n## Best Practices\n\n1. **Choose the Right Data Binding Method:**\n - Local data for small, static datasets\n - Remote data for large, server-managed data\n - Lazy loading for very large scrollable datasets\n\n2. **Optimize Data Structure:**\n - Keep JSON flat when possible\n - Use consistent field naming\n - Remove unnecessary fields\n\n3. **Handle Loading States:**\n```typescript\npublic isLoading: boolean = true;\n\nfetchData() {\n this.isLoading = true;\n this.dataService.getData().subscribe(\n data => {\n this.chartData = data;\n this.isLoading = false;\n },\n error => {\n console.error('Error loading data:', error);\n this.isLoading = false;\n }\n );\n}\n```\n\n4. **Implement Error Handling:**\n```typescript\npublic errorMessage: string = '';\n\nloadRemoteData() {\n this.dataManager.executeQuery(this.query)\n .then((e: any) => {\n this.chartData = e.result;\n })\n .catch(error => {\n this.errorMessage = 'Failed to load data: ' + error.message;\n console.error(error);\n });\n}\n```\n\n5. **Memory Management:**\n```typescript\nngOnDestroy() {\n // Clear large datasets\n this.chartData = [];\n // Unsubscribe from observables\n this.subscription?.unsubscribe();\n}\n```\n\n## Troubleshooting\n\n### Data Not Displaying\n\n**Issue:** Chart shows no data\n**Solutions:**\n- Verify `xName` and `yName` match data field names (case-sensitive)\n- Check browser console for errors\n- Ensure data is not null or undefined\n- Verify data format matches series type\n\n```typescript\n// Debug data binding\nconsole.log('Chart Data:', this.chartData);\nconsole.log('X Field:', this.xName);\nconsole.log('Y Field:', this.yName);\n```\n\n### CORS Errors with Remote Data\n\n**Issue:** Cross-origin request blocked\n**Solutions:**\n- Enable CORS on server\n- Use proxy configuration in development\n- Set `crossDomain: true` in DataManager\n\n```typescript\npublic remoteData: DataManager = new DataManager({\n url: 'https://api.example.com/data',\n adaptor: new WebApiAdaptor(),\n crossDomain: true,\n headers: [{ 'Content-Type': 'application/json' }]\n});\n```\n\n### Performance Issues\n\n**Issue:** Chart slow with large datasets\n**Solutions:**\n- Enable canvas rendering\n- Implement data aggregation\n- Use lazy loading\n- Reduce point count through sampling\n\n### Empty Points Not Working\n\n**Issue:** Empty points not rendered as expected\n**Solutions:**\n- Ensure values are exactly `null` or `undefined`\n- Check `emptyPointSettings.mode` configuration\n- Verify series type supports empty points\n\n## Advanced Scenarios\n\n### Real-Time Data Streaming\n\n```typescript\nimport { WebSocketSubject } from 'rxjs/webSocket';\n\nexport class RealTimeChartComponent {\n private socket$: WebSocketSubject\u003cany>;\n public chartData: Object[] = [];\n private maxPoints: number = 50;\n \n ngOnInit() {\n this.socket$ = new WebSocketSubject('ws://localhost:8080/data');\n \n this.socket$.subscribe(\n data => {\n this.chartData.push(data);\n \n // Keep only last N points\n if (this.chartData.length > this.maxPoints) {\n this.chartData.shift();\n }\n \n this.chart.series[0].setData(this.chartData);\n }\n );\n }\n \n ngOnDestroy() {\n this.socket$.complete();\n }\n}\n```\n\n### Combining Multiple Data Sources\n\n```typescript\nimport { forkJoin } from 'rxjs';\n\nloadMultipleDataSources() {\n forkJoin({\n sales: this.api.getSalesData(),\n forecast: this.api.getForecastData(),\n targets: this.api.getTargetsData()\n }).subscribe(results => {\n this.chartData = this.combineData(results);\n });\n}\n\ncombineData(results: any): Object[] {\n return results.sales.map((item: any, index: number) => ({\n month: item.month,\n sales: item.value,\n forecast: results.forecast[index]?.value,\n target: results.targets[index]?.value\n }));\n}\n```\n\n### Caching Strategy\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { Observable, of } from 'rxjs';\nimport { tap } from 'rxjs/operators';\n\n@Injectable()\nexport class ChartDataService {\n private cache = new Map\u003cstring, any>();\n private cacheDuration = 5 * 60 * 1000; // 5 minutes\n \n getData(key: string): Observable\u003cany> {\n let cached = this.cache.get(key);\n \n if (cached && Date.now() - cached.timestamp \u003c this.cacheDuration) {\n return of(cached.data);\n }\n \n return this.http.get(`/api/data/${key}`).pipe(\n tap(data => {\n this.cache.set(key, {\n data: data,\n timestamp: Date.now()\n });\n })\n );\n }\n}\n```\n\n## API Reference Summary\n\n### Data Binding Properties\n\n| Property | Type | Description | API Reference |\n|----------|------|-------------|---------------|\n| dataSource | Object[] \\| DataManager | Chart data source | [ChartModel.dataSource](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#dataSource), [Series.dataSource](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dataSource) |\n| xName | string | X-axis field name | [Series.xName](https://ej2.syncfusion.com/angular/documentation/api/chart/series#xName) |\n| yName | string | Y-axis field name | [Series.yName](https://ej2.syncfusion.com/angular/documentation/api/chart/series#yName) |\n| query | Query | DataManager query | [Series.query](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#query) |\n| high | string | High value field (financial/range series) | [Series.high](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#high) |\n| low | string | Low value field (financial/range series) | [Series.low](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#low) |\n| open | string | Open value field (financial series) | [Series.open](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#open) |\n| close | string | Close value field (financial series) | [Series.close](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#close) |\n| size | string | Size field (bubble series) | [Series.size](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#size) |\n| pointColorMapping | string | Color field for point coloring | [Series.pointColorMapping](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#pointColorMapping) |\n| colorName | string | Color mapping field for range colors | [Series.colorName](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#colorName) |\n\n### Empty Point Handling\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| EmptyPointSettingsModel | Empty point configuration interface | [emptyPointSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel) |\n| EmptyPointSettings | Empty point settings class | [emptyPointSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettings) |\n| EmptyPointMode | Empty point handling modes (Gap, Zero, Average, Drop) | [emptyPointMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointMode) |\n\n**Series Property:** [Series.emptyPointSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#emptyPointSettings)\n\n### Financial Data Fields\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| FinancialDataFields | Interface for OHLC data structure | [financialDataFields.md](https://ej2.syncfusion.com/angular/documentation/api/chart/financialDataFields) |\n\n### Data Events\n\n| Event | Interface | Description | API Reference |\n|-------|-----------|-------------|---------------|\n| load | ILoadedEventArgs | Before chart loads - ideal for data preparation | [ChartModel.load](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#load) |\n| loaded | ILoadedEventArgs | After chart loads with data | [ChartModel.loaded](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#loaded) |\n\n### Performance Properties\n\n| Property | Type | Default | Description | API Reference |\n|----------|------|---------|-------------|---------------|\n| enableCanvas | boolean | false | Use canvas rendering for large datasets | [ChartModel.enableCanvas](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#enableCanvas) |\n| enableAnimation | boolean | true | Enable/disable animations | [ChartModel.enableAnimation](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#enableAnimation) |\n| enableComplexProperty | boolean | false | Improve performance through data mapping | [Series.enableComplexProperty](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#enableComplexProperty) |\n\n### Data Manager Integration\n\n**External Library:** @syncfusion/ej2-data\n\n**Key Classes:**\n- DataManager - Main data management class\n- Query - Query builder for filtering, sorting, paging\n- Predicate - Condition builder\n- ODataAdaptor - OData service adapter\n- WebApiAdaptor - ASP.NET Web API adapter\n- UrlAdaptor - Generic REST API adapter\n- CustomDataAdaptor - Custom adapter implementation\n\n**Documentation:** See [ej2-data documentation](https://ej2.syncfusion.com/angular/documentation/data/)\n\n---\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":25323,"content_sha256":"5dda1260e264391869c42a9b5d938a21f7c1df7a3bb3b2badd361abe10b35f4a"},{"filename":"references/getting-started.md","content":"# Getting Started with Syncfusion Angular Chart\n\nThis guide covers the complete setup process for integrating the Syncfusion Angular Chart component into your Angular application, from installation through creating your first chart.\n\n## Prerequisites\n\n### System Requirements\n\nBefore starting, ensure your development environment meets these requirements:\n\n- **Node.js:** Version 18.19 or later\n- **npm:** Version 10.x or later\n- **Angular CLI:** Version 19 or later (supports Angular 21)\n- **Supported Browsers:** Chrome, Firefox, Safari, Edge (latest versions)\n\n### Angular Version Compatibility\n\nThe Syncfusion Angular Chart component supports Angular 19, 20, 21, and other recent versions. For detailed compatibility information, refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility).\n\n**Note:** Starting from Angular 19, standalone components are the default architecture. This guide uses the modern standalone approach.\n\n## Setup Angular Environment\n\n### Install Angular CLI\n\nIf you haven't installed Angular CLI globally, run:\n\n```bash\nnpm install -g @angular/cli\n```\n\nTo install a specific version:\n\n```bash\nnpm install -g @angular/[email protected]\n```\n\n### Create a New Angular Application\n\nGenerate a new Angular application:\n\n```bash\nng new my-chart-app\n```\n\nDuring setup, you'll be prompted for configuration:\n\n**Stylesheet Format:**\n```\n? Which stylesheet format would you like to use?\n> CSS\n Sass (SCSS)\n Sass (Indented)\n Less\n```\n\n**Server-Side Rendering (SSR):**\nChoose based on your requirements. For client-side only applications, select \"No\".\n\n**AI Tool Integration:**\nSelect your preferred AI tool or choose \"none\".\n\nNavigate to your project:\n\n```bash\ncd my-chart-app\n```\n\n## Installing Syncfusion Chart Package\n\n### Using ng add (Recommended)\n\nThe simplest way to add the Chart component:\n\n```bash\nng add @syncfusion/ej2-angular-charts\n```\n\nThis command automatically:\n- Adds `@syncfusion/ej2-angular-charts` package and peer dependencies to `package.json`\n- Imports the Chart module in your application\n- Configures necessary dependencies\n\n### Manual Installation\n\nAlternatively, install manually using npm:\n\n```bash\nnpm install @syncfusion/ej2-angular-charts --save\n```\n\n## Registering Syncfusion License\n\nSyncfusion is a commercial library requiring a valid license. Register your license key to avoid watermarks:\n\n### Get a License Key\n\n1. **Free Trial:** Get a 30-day trial at [syncfusion.com](https://www.syncfusion.com/downloads)\n2. **Community License:** Free for qualifying individuals/organizations\n3. **Commercial License:** For commercial projects\n\n### Register the License\n\n**For Angular 19+ (with app.config.ts):**\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from '@angular/core';\nimport { registerLicense } from '@syncfusion/ej2-base';\n\n// Register Syncfusion license key\nregisterLicense('YOUR_LICENSE_KEY_HERE');\n\nexport const appConfig: ApplicationConfig = {\n providers: []\n};\n```\n\n**For Angular 18 and below (with main.ts):**\n\n```typescript\n// main.ts\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './app/app.component';\nimport { registerLicense } from '@syncfusion/ej2-base';\n\n// Register Syncfusion license key\nregisterLicense('YOUR_LICENSE_KEY_HERE');\n\nbootstrapApplication(AppComponent);\n```\n\n## Adding CSS Themes\n\nSyncfusion components require CSS themes for styling. Add theme imports to your global styles file.\n\n### Available Themes\n\n- **Material:** Material Design theme\n- **Bootstrap:** Bootstrap theme (4 and 5)\n- **Fabric:** Microsoft Fabric theme\n- **Tailwind:** Tailwind CSS theme\n- **Bootstrap 5:** Bootstrap 5 design\n- **Fluent:** Microsoft Fluent theme\n- **Material 3:** Material Design 3\n\n### Import Theme CSS\n\n**Option 1: Add to styles.css (or styles.scss)**\n\n```css\n/* styles.css */\n@import '../node_modules/@syncfusion/ej2-base/styles/material.css';\n@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';\n@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';\n@import '../node_modules/@syncfusion/ej2-angular-charts/styles/material.css';\n```\n\n**Option 2: Add to angular.json**\n\n```json\n{\n \"projects\": {\n \"my-chart-app\": {\n \"architect\": {\n \"build\": {\n \"options\": {\n \"styles\": [\n \"node_modules/@syncfusion/ej2-base/styles/material.css\",\n \"node_modules/@syncfusion/ej2-buttons/styles/material.css\",\n \"node_modules/@syncfusion/ej2-popups/styles/material.css\",\n \"node_modules/@syncfusion/ej2-angular-charts/styles/material.css\",\n \"src/styles.css\"\n ]\n }\n }\n }\n }\n }\n}\n```\n\n**For Bootstrap theme, use:**\n```css\n@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';\n@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';\n@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';\n@import '../node_modules/@syncfusion/ej2-angular-charts/styles/bootstrap5.css';\n```\n\n## Creating Your First Chart\n\n### Basic Line Chart Example\n\n**For Angular 20+ (app.ts structure):**\n\n```typescript\n// app.ts\nimport { Component } from '@angular/core';\nimport { ChartModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ChartModule],\n template: `\n \u003cdiv style=\"padding: 20px;\">\n \u003ch2>Sales Report\u003c/h2>\n \u003cejs-chart \n id=\"chart-container\"\n [primaryXAxis]=\"primaryXAxis\"\n [primaryYAxis]=\"primaryYAxis\"\n [title]=\"title\">\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]=\"chartData\" \n type=\"Line\" \n xName=\"month\" \n yName=\"sales\"\n name=\"Sales\"\n width=\"2\">\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \u003c/div>\n `,\n styles: [`\n #chart-container {\n height: 400px;\n width: 100%;\n }\n `]\n})\nexport class App {\n public primaryXAxis = {\n valueType: 'Category',\n title: 'Month'\n };\n \n public primaryYAxis = {\n title: 'Sales (in USD)',\n labelFormat: '${value}K'\n };\n \n public title = 'Monthly Sales Analysis';\n \n public chartData = [\n { month: 'Jan', sales: 35 },\n { month: 'Feb', sales: 28 },\n { month: 'Mar', sales: 34 },\n { month: 'Apr', sales: 32 },\n { month: 'May', sales: 40 },\n { month: 'Jun', sales: 32 },\n { month: 'Jul', sales: 35 },\n { month: 'Aug', sales: 55 },\n { month: 'Sep', sales: 38 },\n { month: 'Oct', sales: 30 },\n { month: 'Nov', sales: 25 },\n { month: 'Dec', sales: 32 }\n ];\n}\n\nexport default App;\n```\n\n**For Angular 19 and below (app.component.ts structure):**\n\n```typescript\n// app.component.ts\nimport { Component } from '@angular/core';\nimport { ChartModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ChartModule],\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n public primaryXAxis = {\n valueType: 'Category',\n title: 'Month'\n };\n \n public primaryYAxis = {\n title: 'Sales (in USD)',\n labelFormat: '${value}K'\n };\n \n public title = 'Monthly Sales Analysis';\n \n public chartData = [\n { month: 'Jan', sales: 35 },\n { month: 'Feb', sales: 28 },\n { month: 'Mar', sales: 34 },\n { month: 'Apr', sales: 32 },\n { month: 'May', sales: 40 },\n { month: 'Jun', sales: 32 }\n ];\n}\n```\n\n```html\n\u003c!-- app.component.html -->\n\u003cdiv style=\"padding: 20px;\">\n \u003ch2>Sales Report\u003c/h2>\n \u003cejs-chart \n id=\"chart-container\"\n [primaryXAxis]=\"primaryXAxis\"\n [primaryYAxis]=\"primaryYAxis\"\n [title]=\"title\">\n \u003ce-series-collection>\n \u003ce-series \n [dataSource]=\"chartData\" \n type=\"Line\" \n xName=\"month\" \n yName=\"sales\"\n name=\"Sales\">\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n\u003c/div>\n```\n\n```css\n/* app.component.css */\n#chart-container {\n height: 400px;\n width: 100%;\n}\n```\n\n## Running the Application\n\nStart the development server:\n\n```bash\nng serve\n```\n\nOr specify a port:\n\n```bash\nng serve --port 4200\n```\n\nOpen your browser and navigate to:\n```\nhttp://localhost:4200\n```\n\nYou should see your chart rendered with the sample data.\n\n## Understanding the Chart Structure\n\n### Key Components\n\n**1. Chart Container (`\u003cejs-chart>`)**\n- Main chart component\n- Contains all chart configuration\n- API Reference: See [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) for all available properties\n\n**2. Series Collection (`\u003ce-series-collection>`)**\n- Container for one or more series\n- Each series represents a data set\n- API Reference: See [SeriesDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective)\n\n**3. Individual Series (`\u003ce-series>`)**\n- Defines data source, type, and configuration\n- Multiple series can be added for comparison\n- API Reference: See [Series](https://ej2.syncfusion.com/angular/documentation/api/chart/series) for all series properties\n\n### Essential Properties\n\n**Chart Level Properties:**\n\n| Property | Type | Description | API Reference |\n|----------|------|-------------|---------------|\n| `primaryXAxis` | AxisModel | X-axis configuration including valueType, title, range, labels | [AxisModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) |\n| `primaryYAxis` | AxisModel | Y-axis configuration including title, range, format, intervals | [AxisModel](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) |\n| `title` | string | Chart title text displayed at the top | [ChartModel.title](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#title) |\n| `width` | string | Chart width (e.g., '100%', '800px') | [ChartModel.width](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#width) |\n| `height` | string | Chart height (e.g., '400px') | [ChartModel.height](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#height) |\n| `dataSource` | Object[] \\| DataManager | Data source for the chart | [ChartModel.dataSource](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#dataSource) |\n| `tooltip` | TooltipSettingsModel | Tooltip configuration | [TooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel) |\n| `legend` | LegendSettingsModel | Legend configuration | [LegendSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) |\n\n**Series Level Properties:**\n\n| Property | Type | Default | Description | API Reference |\n|----------|------|---------|-------------|---------------|\n| `dataSource` | Object[] \\| DataManager | '' | Data array or DataManager instance | [Series.dataSource](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dataSource) |\n| `type` | ChartSeriesType | 'Line' | Chart type: Line, Column, Bar, Area, Pie, etc. | [Series.type](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) |\n| `xName` | string | '' | Property name for x-axis values in data objects | [Series.xName](https://ej2.syncfusion.com/angular/documentation/api/chart/series#xName) |\n| `yName` | string | '' | Property name for y-axis values in data objects | [Series.yName](https://ej2.syncfusion.com/angular/documentation/api/chart/series#yName) |\n| `name` | string | '' | Series name displayed in legend and tooltip | [Series.name](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#name) |\n| `width` | number | 2 | Line width for line-based series | [Series.width](https://ej2.syncfusion.com/angular/documentation/api/chart/series#width) |\n| `fill` | string | null | Series fill color | [Series.fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) |\n| `opacity` | number | 1 | Series opacity (0 to 1) | [Series.opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) |\n| `marker` | MarkerSettingsModel | - | Marker configuration for data points | [MarkerSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n\n## Common Initial Configurations\n\n### Setting Chart Dimensions\n\nThe chart component supports flexible sizing through `width` and `height` properties.\n\n**API Reference:** [ChartModel.width](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#width), [ChartModel.height](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#height)\n\n```typescript\n// Fixed dimensions\n\u003cejs-chart width=\"800px\" height=\"400px\">\n\u003c/ejs-chart>\n\n// Responsive (percentage)\n\u003cejs-chart width=\"100%\" height=\"350px\">\n\u003c/ejs-chart>\n```\n\n### Adding Multiple Series\n\nMultiple series allow comparison of different data sets on the same chart.\n\n**API Reference:** [SeriesDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective), [Series.name](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#name)\n\n```typescript\npublic data1 = [{ x: 'Jan', y: 35 }, { x: 'Feb', y: 28 }];\npublic data2 = [{ x: 'Jan', y: 25 }, { x: 'Feb', y: 33 }];\n```\n\n```html\n\u003cejs-chart>\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"Column\" xName=\"x\" yName=\"y\" name=\"Product A\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data2\" type=\"Column\" xName=\"x\" yName=\"y\" name=\"Product B\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Basic Tooltip\n\nEnable tooltips to display data point information on hover.\n\n**API Reference:** [TooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel)\n\n**Key Properties:**\n- `enable` (boolean, default: false): Enable/disable tooltip\n- `format` (string): Customize tooltip display format\n- `shared` (boolean, default: false): Show all series data in one tooltip\n\n```typescript\npublic tooltip = { \n enable: true,\n format: '${point.x}: ${point.y}',\n shared: false\n};\n```\n\n```html\n\u003cejs-chart [tooltip]=\"tooltip\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n## Troubleshooting\n\n### Chart Not Rendering\n\n**Issue:** Blank space where chart should appear\n\n**Solutions:**\n1. Verify CSS theme is imported\n2. Check chart container has height defined\n3. Ensure license is registered (check browser console for warnings)\n4. Verify data source has valid data\n\n### License Warning/Watermark\n\n**Issue:** \"Trial Expired\" or watermark appears on chart\n\n**Solution:**\n- Register valid license key using `registerLicense()` in app.config.ts or main.ts\n- Get trial license from syncfusion.com\n\n### Module Not Found Error\n\n**Issue:** `Cannot find module '@syncfusion/ej2-angular-charts'`\n\n**Solution:**\n```bash\nnpm install @syncfusion/ej2-angular-charts --save\n```\n\n### Build Errors with Standalone Components\n\n**Issue:** Component not recognized\n\n**Solution:**\n- Ensure `ChartModule` is imported in the `imports` array\n- Verify `standalone: true` is set in component decorator\n\n## API Reference Summary\n\nThis section provides quick links to the most commonly used APIs when getting started with Syncfusion Angular Charts.\n\n### Core Interfaces and Classes\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| ChartModel | Main chart component configuration with 40+ properties | [chartModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) |\n| AxisModel | Axis configuration with 50+ properties for X/Y axes | [axisModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel) |\n| SeriesDirective | Series configuration with 60+ properties | [seriesDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective) |\n| TooltipSettingsModel | Tooltip appearance and behavior | [tooltipSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel) |\n| LegendSettingsModel | Legend configuration | [legendSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) |\n| MarkerSettingsModel | Data point marker configuration | [markerSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n| DataLabelSettingsModel | Data label configuration | [dataLabelSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel) |\n\n### Essential Events\n\n| Event | Interface | Description | API Reference |\n|-------|-----------|-------------|---------------|\n| `load` | ILoadedEventArgs | Triggered before chart rendering | [ChartModel.load](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#load) |\n| `loaded` | ILoadedEventArgs | Triggered after chart loads | [ChartModel.loaded](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#loaded) |\n| `pointRender` | IPointRenderEventArgs | Triggered before rendering each point | [IPointRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointRenderEventArgs) |\n| `seriesRender` | ISeriesRenderEventArgs | Triggered before rendering each series | [ISeriesRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs) |\n| `tooltipRender` | ITooltipRenderEventArgs | Triggered before tooltip rendering | [ITooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iTooltipRenderEventArgs) |\n| `axisLabelRender` | IAxisLabelRenderEventArgs | Triggered before axis label rendering | [IAxisLabelRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iAxisLabelRenderEventArgs) |\n\n### Enumerations\n\n| Enum | Description | API Reference |\n|------|-------------|---------------|\n| ChartSeriesType | Available series types (Line, Column, Bar, Area, etc.) | [chartSeriesType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSeriesType) |\n| ValueType | Axis value types (Double, DateTime, Category, Logarithmic) | [valueType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/valueType) |\n| ChartTheme | Available themes (Material, Bootstrap, Fabric, etc.) | [chartTheme.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartTheme) |\n| LegendPosition | Legend position options | [legendPosition.md](https://ej2.syncfusion.com/angular/documentation/api/chart/legendPosition) |\n\n## Next Steps\n\nNow that you have a basic chart running:\n\n1. **Explore Series Types:** Try different chart types (Column, Bar, Area, Pie) by changing the `type` property - See [series-types.md](./series-types.md)\n2. **Add Interactivity:** Enable tooltips, zooming, and crosshair features - See [interactive-features.md](./interactive-features.md)\n3. **Customize Appearance:** Apply different themes and customize colors - See [customization.md](./customization.md)\n4. **Bind Dynamic Data:** Connect to APIs or services for real-time data - See [data-binding.md](./data-binding.md)\n5. **Add Chart Elements:** Include legends, data labels, and markers - See [chart-elements.md](./chart-elements.md)\n6. **Configure Axes:** Customize axis properties and layout - See [axes-and-layout.md](./axes-and-layout.md)\n\nRefer to the other reference files for detailed guidance on each feature area.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":19308,"content_sha256":"41f12a04b335e7bf81e28e1837c9016379e30d30e2b569a78edf4ad17915d65e"},{"filename":"references/interactive-features.md","content":"# Interactive Chart Features\n\nInteractive features enhance user engagement and data exploration. This guide covers zooming, panning, tooltips, crosshair, trackball, selection, data editing, and synchronized charts.\n\n## Table of Contents\n\n- [Zooming](#zooming)\n- [Panning](#panning)\n- [Tooltip](#tooltip)\n- [Crosshair](#crosshair)\n- [Trackball](#trackball)\n- [Selection](#selection)\n- [Data Editing](#data-editing)\n- [Synchronized Charts](#synchronized-charts)\n\n## Zooming\n\nZooming allows users to focus on specific data regions for detailed analysis.\n\n**API Reference:**\n- [ZoomSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettingsModel) - Complete zoom configuration\n- [ZoomSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings) - Zoom settings class\n- [ZoomMode](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomMode) - Zoom mode enum (X, Y, XY)\n- [ToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/chart/toolbarItems) - Zoom toolbar items enum\n- [IZoomingEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iZoomingEventArgs) - Zooming event interface\n- [IZoomCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iZoomCompleteEventArgs) - Zoom complete event interface\n\n**Key Events:**\n- [ChartModel.onZooming](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#onZooming) - Triggered during zoom\n- [ChartModel.zoomComplete](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#zoomComplete) - Triggered after zoom completes\n\n### Enable Zooming\n\n**API Properties:**\n- [ZoomSettings.enableSelectionZooming](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings#enableSelectionZooming) (boolean, default: false)\n- [ZoomSettings.enableMouseWheelZooming](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings#enableMouseWheelZooming) (boolean, default: false)\n- [ZoomSettings.enablePinchZooming](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings#enablePinchZooming) (boolean, default: false)\n- [ZoomSettings.enableScrollbar](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings#enableScrollbar) (boolean, default: false)\n- [ZoomSettings.mode](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings#mode) - [ZoomMode](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomMode) enum (default: 'XY')\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ChartModule, ZoomService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-chart',\n standalone: true,\n imports: [ChartModule],\n providers: [ZoomService], // Required\n template: `\n \u003cejs-chart [zoomSettings]=\"zoomSettings\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class ChartComponent {\n public zoomSettings = {\n enableSelectionZooming: true,\n enableMouseWheelZooming: true,\n enablePinchZooming: true,\n enableScrollbar: false\n };\n \n public data = [/* data */];\n}\n```\n\n### Zoom Types\n\n**Selection Zooming:**\n```typescript\npublic zoomSettings = {\n enableSelectionZooming: true, // Drag to select region\n mode: 'XY' // X, Y, or XY\n};\n```\n\n**Mouse Wheel Zooming:**\n```typescript\npublic zoomSettings = {\n enableMouseWheelZooming: true // Scroll to zoom\n};\n```\n\n**Pinch Zooming:**\n```typescript\npublic zoomSettings = {\n enablePinchZooming: true // Touch pinch gesture\n};\n```\n\n### Zoom Toolbar\n\nDisplay toolbar with zoom controls.\n\n```typescript\npublic zoomSettings = {\n enableSelectionZooming: true,\n mode: 'XY',\n toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']\n};\n```\n\n**Toolbar Items:**\n- `Zoom`: Enable selection zoom\n- `ZoomIn`: Zoom in incrementally\n- `ZoomOut`: Zoom out incrementally\n- `Pan`: Enable panning mode\n- `Reset`: Reset to original view\n\n### Zoom Mode\n\nControl which axes can be zoomed.\n\n```typescript\npublic zoomSettings = {\n enableSelectionZooming: true,\n mode: 'X' // X, Y, or XY\n};\n```\n\n- `X`: Zoom only horizontally\n- `Y`: Zoom only vertically\n- `XY`: Zoom both directions (default)\n\n### Zoom with Scrollbar\n\nAdd scrollbar for navigating zoomed area.\n\n```typescript\npublic zoomSettings = {\n enableSelectionZooming: true,\n enableScrollbar: true\n};\n```\n\n### Programmatic Zoom\n\n```typescript\nimport { ViewChild } from '@angular/core';\nimport { ChartComponent as SyncfusionChart } from '@syncfusion/ej2-angular-charts';\n\nexport class AppComponent {\n @ViewChild('chart') public chart: SyncfusionChart;\n \n public zoomIn() {\n this.chart.zoomModule.zoomIn();\n }\n \n public zoomOut() {\n this.chart.zoomModule.zoomOut();\n }\n \n public zoomByRange(start: number, end: number) {\n this.chart.zoomModule.zoom(start, end);\n }\n \n public resetZoom() {\n this.chart.zoomModule.reset();\n }\n}\n```\n\n```html\n\u003cejs-chart #chart [zoomSettings]=\"zoomSettings\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n\u003cbutton (click)=\"zoomIn()\">Zoom In\u003c/button>\n\u003cbutton (click)=\"zoomOut()\">Zoom Out\u003c/button>\n\u003cbutton (click)=\"resetZoom()\">Reset\u003c/button>\n```\n\n## Panning\n\nMove the view within a zoomed chart.\n\n### Enable Panning\n\n```typescript\npublic zoomSettings = {\n enableSelectionZooming: true,\n enablePan: true // Enable panning after zoom\n};\n```\n\n**Usage:**\n1. Zoom into chart\n2. Click and drag to pan\n3. Or use Pan button in toolbar\n\n### Pan Mode\n\n```typescript\npublic zoomSettings = {\n enablePan: true,\n mode: 'X' // Pan only horizontally\n};\n```\n\n## Tooltip\n\nTooltips display data point information on hover or touch.\n\n### Basic Tooltip\n\n```typescript\nimport { TooltipService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n providers: [TooltipService], // Required\n // ...\n})\nexport class ChartComponent {\n public tooltip = {\n enable: true\n };\n}\n```\n\n```html\n\u003cejs-chart [tooltip]=\"tooltip\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\" name=\"Sales\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Tooltip Formatting\n\n```typescript\npublic tooltip = {\n enable: true,\n format: '${series.name}: ${point.y}K', // Custom format\n header: 'Month: ${point.x}' // Tooltip header\n};\n```\n\n**Format Placeholders:**\n- `${series.name}`: Series name\n- `${point.x}`: X value\n- `${point.y}`: Y value\n- `${point.percentage}`: Percentage (pie charts)\n\n### Tooltip Styling\n\n```typescript\npublic tooltip = {\n enable: true,\n fill: '#333',\n opacity: 0.9,\n textStyle: {\n color: 'white',\n size: '14px',\n fontWeight: 'Bold'\n },\n border: {\n width: 2,\n color: '#FF5733'\n }\n};\n```\n\n### Shared Tooltip\n\nShow data from all series at the same x-position.\n\n```typescript\npublic tooltip = {\n enable: true,\n shared: true // Show all series values\n};\n```\n\n### Custom Tooltip Template\n\n```html\n\u003cejs-chart [tooltip]=\"tooltip\">\n \u003cng-template #tooltipTemplate let-data>\n \u003cdiv style=\"background: white; padding: 10px; border: 2px solid #ccc; border-radius: 5px;\">\n \u003cb>{{data.x}}\u003c/b>\u003cbr/>\n Sales: ${{data.y}}K\u003cbr/>\n \u003cspan [style.color]=\"data.point.color\">●\u003c/span> {{data.series.name}}\n \u003c/div>\n \u003c/ng-template>\n \u003ce-series-collection>\n \u003c!-- series -->\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Tooltip Events\n\n```typescript\npublic tooltipRender(args: any) {\n // Customize tooltip before rendering\n args.text = `Custom: ${args.data.pointY}`;\n}\n```\n\n```html\n\u003cejs-chart [tooltip]=\"tooltip\" (tooltipRender)=\"tooltipRender($event)\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n## Crosshair\n\nCrosshair shows vertical and horizontal lines at cursor position for precise value reading.\n\n### Basic Crosshair\n\n```typescript\nimport { CrosshairService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n providers: [CrosshairService], // Required\n // ...\n})\nexport class ChartComponent {\n public crosshair = {\n enable: true\n };\n}\n```\n\n```html\n\u003cejs-chart [crosshair]=\"crosshair\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Crosshair Line Style\n\n```typescript\npublic crosshair = {\n enable: true,\n lineType: 'Both', // Vertical, Horizontal, Both\n line: {\n width: 2,\n color: 'red',\n dashArray: '5,5'\n }\n};\n```\n\n### Crosshair Label\n\n```typescript\npublic crosshair = {\n enable: true,\n lineType: 'Both'\n};\n\npublic primaryXAxis = {\n crosshairTooltip: {\n enable: true,\n fill: '#FF5733',\n textStyle: { color: 'white' }\n }\n};\n\npublic primaryYAxis = {\n crosshairTooltip: {\n enable: true,\n fill: '#3498db',\n textStyle: { color: 'white' }\n }\n};\n```\n\n## Trackball\n\nTrackball highlights the nearest data point with tooltip as cursor moves.\n\n### Basic Trackball\n\n```typescript\nimport { TooltipService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n providers: [TooltipService],\n // ...\n})\nexport class ChartComponent {\n public tooltip = {\n enable: true,\n shared: true // Required for trackball\n };\n \n public crosshair = {\n enable: true,\n lineType: 'Vertical'\n };\n}\n```\n\n```html\n\u003cejs-chart [tooltip]=\"tooltip\" [crosshair]=\"crosshair\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"Line\" xName=\"x\" yName=\"y\" name=\"Series 1\" [marker]=\"marker\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data2\" type=\"Line\" xName=\"x\" yName=\"y\" name=\"Series 2\" [marker]=\"marker\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n**Trackball shows:**\n- Tooltip with all series values at x-position\n- Marker on each series at nearest point\n- Vertical crosshair line\n\n## Selection\n\nSelect data points, series, or regions for highlighting or further actions.\n\n### Point Selection\n\n```typescript\nimport { SelectionService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n providers: [SelectionService], // Required\n // ...\n})\nexport class ChartComponent {\n public selectionMode = 'Point'; // Point, Series, Cluster, DragXY, DragX, DragY\n \n public selectionSettings = {\n enable: true,\n mode: 'Point'\n };\n}\n```\n\n```html\n\u003cejs-chart [selectionMode]=\"selectionMode\" (chartMouseClick)=\"onChartClick($event)\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Column\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Selection Modes\n\n**Point:** Select individual data points\n```typescript\npublic selectionMode = 'Point';\n```\n\n**Series:** Select entire series\n```typescript\npublic selectionMode = 'Series';\n```\n\n**Cluster:** Select all points at same x-value (column charts)\n```typescript\npublic selectionMode = 'Cluster';\n```\n\n**Drag Selection:** Select region by dragging\n```typescript\npublic selectionMode = 'DragXY'; // DragX, DragY, DragXY\n```\n\n### Selection Styling\n\n```typescript\npublic selectionSettings = {\n enable: true,\n mode: 'Point',\n pattern: 'DiagonalForward' // None, Dots, DiagonalForward, DiagonalBackward, etc.\n};\n```\n\n**Selection Patterns:**\n- None (solid fill)\n- Dots\n- DiagonalForward\n- Cross\n- HorizontalDash\n- VerticalDash\n- Rectangle\n- Box\n- VerticalStripe\n- HorizontalStripe\n\n### Programmatic Selection\n\n```typescript\nimport { ViewChild } from '@angular/core';\nimport { ChartComponent as SyncfusionChart } from '@syncfusion/ej2-angular-charts';\n\nexport class AppComponent {\n @ViewChild('chart') public chart: SyncfusionChart;\n \n public selectDataPoint(seriesIndex: number, pointIndex: number) {\n this.chart.selectedDataIndexes = [{ series: seriesIndex, point: pointIndex }];\n this.chart.dataBind();\n }\n}\n```\n\n### Selection Events\n\n```typescript\npublic onChartClick(args: any) {\n console.log('Selected:', args.selectedDataValues);\n}\n\npublic onSelectionComplete(args: any) {\n console.log('Selection completed:', args);\n}\n```\n\n```html\n\u003cejs-chart (chartMouseClick)=\"onChartClick($event)\" \n (selectionComplete)=\"onSelectionComplete($event)\">\n \u003c!-- series -->\n\u003c/ejs-chart>\n```\n\n## Data Editing\n\nEdit data by dragging points (line/scatter charts).\n\n### Enable Data Editing\n\n```typescript\nimport { DataEditingService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n providers: [DataEditingService], // Required\n // ...\n})\nexport class ChartComponent {\n public data = [\n { x: 'Jan', y: 35 },\n { x: 'Feb', y: 28 },\n { x: 'Mar', y: 34 }\n ];\n}\n```\n\n```html\n\u003cejs-chart>\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\"\n [dragSettings]=\"{ enable: true }\" [marker]=\"{ visible: true, width: 10, height: 10 }\">\n \u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Drag Settings\n\n```typescript\npublic dragSettings = {\n enable: true,\n minY: 0, // Minimum Y value\n maxY: 100 // Maximum Y value\n};\n```\n\n### Drag Events\n\n```typescript\npublic onDragStart(args: any) {\n console.log('Drag started:', args.data);\n}\n\npublic onDragEnd(args: any) {\n console.log('New value:', args.data.y);\n // Update backend/state with new value\n}\n```\n\n```html\n\u003ce-series [dragSettings]=\"dragSettings\" \n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\">\n\u003c/e-series>\n```\n\n## Synchronized Charts\n\nLink multiple charts so interactions (zoom, tooltip, crosshair) affect all.\n\n### Setup Synchronized Charts\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { ChartComponent as SyncfusionChart } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-sync-charts',\n template: `\n \u003cejs-chart #chart1 [primaryXAxis]=\"primaryXAxis\" [zoomSettings]=\"zoomSettings\"\n (chartMouseMove)=\"onMouseMove($event, 1)\"\n (zoomComplete)=\"onZoomComplete($event)\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"Line\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n \n \u003cejs-chart #chart2 [primaryXAxis]=\"primaryXAxis\" [zoomSettings]=\"zoomSettings\"\n (chartMouseMove)=\"onMouseMove($event, 2)\"\n (zoomComplete)=\"onZoomComplete($event)\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data2\" type=\"Line\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class SyncChartsComponent {\n @ViewChild('chart1') public chart1: SyncfusionChart;\n @ViewChild('chart2') public chart2: SyncfusionChart;\n \n public primaryXAxis = { valueType: 'Category' };\n public zoomSettings = { enableSelectionZooming: true, mode: 'X' };\n \n public data1 = [/* data */];\n public data2 = [/* data */];\n \n public onMouseMove(args: any, chartId: number) {\n // Sync crosshair position\n if (chartId === 1 && this.chart2) {\n // Update chart2 crosshair\n } else if (chartId === 2 && this.chart1) {\n // Update chart1 crosshair\n }\n }\n \n public onZoomComplete(args: any) {\n const zoomFactor = args.currentZoomFactor;\n const zoomPosition = args.currentZoomPosition;\n \n // Apply same zoom to both charts\n if (this.chart1) {\n this.chart1.zoomModule.zoom(zoomFactor, zoomPosition);\n }\n if (this.chart2) {\n this.chart2.zoomModule.zoom(zoomFactor, zoomPosition);\n }\n }\n}\n```\n\n### Sync Crosshair\n\n```typescript\npublic onMouseMove(args: any) {\n const charts = [this.chart1, this.chart2, this.chart3];\n \n charts.forEach(chart => {\n if (chart && chart.crosshairModule) {\n chart.crosshairModule.show(args.x, args.y);\n }\n });\n}\n```\n\n### Sync Tooltip\n\n```typescript\npublic onMouseMove(args: any) {\n const charts = [this.chart1, this.chart2];\n \n charts.forEach(chart => {\n if (chart && chart.tooltipModule) {\n chart.tooltipModule.show(args.x, args.y);\n }\n });\n}\n```\n\n## Best Practices\n\n### Zooming\n- Enable selection + mouse wheel for flexibility\n- Show zoom toolbar for user guidance\n- Add scrollbar for long time-series data\n\n### Tooltip\n- Use shared tooltip for multi-series charts\n- Format values for readability ($, %, K, M)\n- Keep tooltip content concise\n\n### Crosshair\n- Combine with tooltip for maximum info\n- Use trackball for multi-series comparison\n- Style crosshair lines to stand out\n\n### Selection\n- Provide visual feedback (patterns, colors)\n- Handle selection events to take action\n- Clear instructions for drag selection\n\n### Synchronized Charts\n- Ensure same x-axis scale/range\n- Sync only related interactions\n- Test performance with many charts\n\n## Common Pitfalls\n\n1. **Missing Service Providers:** Forgetting to inject required services (ZoomService, TooltipService, etc.)\n2. **Performance Issues:** Too many interactions on large datasets\n3. **Conflicting Features:** Zoom + drag selection can interfere\n4. **Poor UX:** No instructions for users on how to interact\n5. **Tooltip Overlap:** Multiple tooltips competing for space\n\n## Performance Tips\n\n- Disable animations during zooming: `animation: { enable: false }`\n- Use canvas rendering for large datasets: `enableCanvas: true`\n- Debounce mouse events in synchronized charts\n- Limit tooltip updates to necessary data only\n\nRefer to the advanced-features reference for event handling and API methods.\n\n## API Reference Summary\n\n### Zoom Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| ZoomSettingsModel | Complete zoom configuration interface | [zoomSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettingsModel) |\n| ZoomSettings | Zoom settings class | [zoomSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettings) |\n| ZoomMode | Zoom mode enum (X, Y, XY) | [zoomMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomMode) |\n| ToolbarItems | Toolbar items enum | [toolbarItems.md](https://ej2.syncfusion.com/angular/documentation/api/chart/toolbarItems) |\n| ScrollbarSettings | Scrollbar configuration | [scrollbarSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/scrollbarSettings) |\n| ScrollbarSettingsModel | Scrollbar model interface | [scrollbarSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/scrollbarSettingsModel) |\n\n### Tooltip Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| TooltipSettingsModel | Complete tooltip configuration interface | [tooltipSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel) |\n| TooltipSettings | Tooltip settings class | [tooltipSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettings) |\n| TooltipPosition | Tooltip position enum | [tooltipPosition.md](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipPosition) |\n| FadeOutMode | Tooltip fade-out behavior | [fadeOutMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/fadeOutMode) |\n\n### Crosshair Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| CrosshairSettingsModel | Crosshair configuration interface | [crosshairSettingsModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettingsModel) |\n| CrosshairSettings | Crosshair settings class | [crosshairSettings.md](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings) |\n| CrosshairTooltipModel | Crosshair tooltip configuration | [crosshairTooltipModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltipModel) |\n\n### Selection Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| SelectionMode | Selection mode enum (Point, Series, Cluster, DragXY, etc.) | [selectionMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/selectionMode) |\n| SelectionPattern | Selection pattern enum (None, Dots, DiagonalForward, etc.) | [selectionPattern.md](https://ej2.syncfusion.com/angular/documentation/api/chart/selectionPattern) |\n| HighlightMode | Highlight mode enum (None, Point, Series, etc.) | [highlightMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/highlightMode) |\n\n### Key Properties Reference\n\n| Feature | Important Properties | API Reference |\n|---------|---------------------|---------------|\n| **Zooming** | enableSelectionZooming, enableMouseWheelZooming, mode, toolbarItems | [ZoomSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettingsModel) |\n| **Panning** | enablePan (via ZoomSettings) | [ZoomSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/zoomSettingsModel) |\n| **Tooltip** | enable, format, shared, fill, border, template | [TooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel) |\n| **Crosshair** | enable, line, lineType, dashArray | [CrosshairSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettingsModel) |\n| **Selection** | selectionMode, selectionPattern, highlightMode | [ChartModel](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel) |\n| **Data Editing** | allowDataEdit (via Series) | [Series](https://ej2.syncfusion.com/angular/documentation/api/chart/series) |\n\n### Events for Interactive Features\n\n| Event | Interface | Description | API Reference |\n|-------|-----------|-------------|---------------|\n| onZooming | IZoomingEventArgs | Triggered during zoom operation | [ChartModel.onZooming](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#onZooming), [IZoomingEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iZoomingEventArgs) |\n| zoomComplete | IZoomCompleteEventArgs | Triggered after zoom completes | [ChartModel.zoomComplete](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#zoomComplete), [IZoomCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iZoomCompleteEventArgs) |\n| tooltipRender | ITooltipRenderEventArgs | Before tooltip rendering | [ChartModel.tooltipRender](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#tooltipRender), [ITooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iTooltipRenderEventArgs) |\n| sharedTooltipRender | ISharedTooltipRenderEventArgs | Before shared tooltip rendering | [ChartModel.sharedTooltipRender](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#sharedTooltipRender), [ISharedTooltipRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSharedTooltipRenderEventArgs) |\n| pointClick | IPointEventArgs | Point click event | [ChartModel.pointClick](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointClick), [IPointEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointEventArgs) |\n| pointDoubleClick | IPointEventArgs | Point double click | [ChartModel.pointDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointDoubleClick), [IPointEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointEventArgs) |\n| pointMove | IPointEventArgs | Mouse move over point | [ChartModel.pointMove](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointMove), [IPointEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iPointEventArgs) |\n| chartMouseClick | IMouseEventArgs | Chart mouse click | [ChartModel.chartMouseClick](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#chartMouseClick), [IMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| chartMouseMove | IMouseEventArgs | Mouse move on chart | [ChartModel.chartMouseMove](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#chartMouseMove), [IMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| chartMouseDown | IMouseEventArgs | Mouse down on chart | [ChartModel.chartMouseDown](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#chartMouseDown), [IMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| chartMouseUp | IMouseEventArgs | Mouse up on chart | [ChartModel.chartMouseUp](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#chartMouseUp), [IMouseEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iMouseEventArgs) |\n| selectionComplete | ISelectionCompleteEventArgs | After selection completes | [ChartModel.selectionComplete](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#selectionComplete), [ISelectionCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iSelectionCompleteEventArgs) |\n| drag | IDragCompleteEventArgs | During drag operation | [ChartModel.drag](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#drag) |\n| dragComplete | IDragCompleteEventArgs | After drag completes | [ChartModel.dragComplete](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#dragComplete), [IDragCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iDragCompleteEventArgs) |\n| scrollStart | IScrollEventArgs | Scrollbar scroll start | [ChartModel.scrollStart](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#scrollStart), [IScrollEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iScrollEventArgs) |\n| scrollEnd | IScrollEventArgs | Scrollbar scroll end | [ChartModel.scrollEnd](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#scrollEnd), [IScrollEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iScrollEventArgs) |\n| scrollChanged | IScrollEventArgs | Scrollbar scroll change | [ChartModel.scrollChanged](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#scrollChanged), [IScrollEventArgs](https://ej2.syncfusion.com/angular/documentation/api/chart/iScrollEventArgs) |\n\n### Required Services\n\n| Feature | Service | Import |\n|---------|---------|--------|\n| Zooming, Panning | ZoomService | @syncfusion/ej2-angular-charts |\n| Tooltip | TooltipService | @syncfusion/ej2-angular-charts |\n| Crosshair | CrosshairService | @syncfusion/ej2-angular-charts |\n| Selection | SelectionService | @syncfusion/ej2-angular-charts |\n| Data Editing | DataEditingService | @syncfusion/ej2-angular-charts |\n\n**Note:** When using `ChartAllModule`, all services are automatically provided.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":26351,"content_sha256":"39001cc1123a0c8f8b5457084de33b38d5262782729aa0dd18176019d023fec5"},{"filename":"references/series-types.md","content":"# Chart Series Types\n\nThe Syncfusion Angular Chart component supports 25+ series types for visualizing different kinds of data. This guide covers all available series types, their use cases, and implementation examples.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Line Series](#line-series)\n - [Line](#line)\n - [Step Line](#step-line)\n - [Spline](#spline)\n - [Stacked Line](#stacked-line)\n - [Multi-colored Line](#multi-colored-line)\n- [Area Series](#area-series)\n - [Area](#area)\n - [Stacked Area](#stacked-area)\n - [100% Stacked Area](#100-stacked-area)\n - [Range Area](#range-area)\n - [Spline Range Area](#spline-range-area)\n- [Column and Bar Series](#column-and-bar-series)\n - [Column](#column)\n - [Bar](#bar)\n - [Stacked Column/Bar](#stacked-columnbar)\n - [100% Stacked Column/Bar](#100-stacked-columnbar)\n - [Range Column](#range-column)\n- [Financial Series](#financial-series)\n - [Candlestick](#candlestick)\n - [Hilo](#hilo)\n - [HiloOpenClose](#hiloopenclose)\n- [Statistical Series](#statistical-series)\n - [Box and Whisker](#box-and-whisker)\n - [Histogram](#histogram)\n - [Pareto](#pareto)\n - [Error Bar](#error-bar)\n- [Specialized Series](#specialized-series)\n - [Scatter](#scatter)\n - [Bubble](#bubble)\n - [Polar](#polar)\n - [Radar](#radar)\n - [Waterfall](#waterfall)\n - [Vertical Chart](#vertical-chart)\n- [Choosing the Right Series Type](#choosing-the-right-series-type)\n- [Combining Multiple Series](#combining-multiple-series)\n\n## Overview\n\nEach series type is optimized for specific data visualization scenarios. The `type` property on the `\u003ce-series>` element determines which series type to render.\n\n**API Reference:** \n- [Series.type](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) - ChartSeriesType enum with all available series types\n- [ChartSeriesType](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSeriesType) - Enum listing all 25+ series types\n- [SeriesDirective](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective) - Complete series configuration properties\n\n**Basic Syntax:**\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\">\u003c/e-series>\n```\n\n**Common Series Properties:**\n\n| Property | Type | Default | Description | API Reference |\n|----------|------|---------|-------------|---------------|\n| `type` | ChartSeriesType | 'Line' | Series type (Line, Column, Bar, Area, etc.) | [Series.type](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) |\n| `dataSource` | Object[] | '' | Series data array or DataManager | [Series.dataSource](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dataSource) |\n| `xName` | string | '' | X-axis field name | [Series.xName](https://ej2.syncfusion.com/angular/documentation/api/chart/series#xName) |\n| `yName` | string | '' | Y-axis field name | [Series.yName](https://ej2.syncfusion.com/angular/documentation/api/chart/series#yName) |\n| `name` | string | '' | Series name for legend | [Series.name](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#name) |\n| `fill` | string | null | Series fill color | [Series.fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) |\n| `width` | number | 2 | Line/border width | [Series.width](https://ej2.syncfusion.com/angular/documentation/api/chart/series#width) |\n| `opacity` | number | 1 | Series opacity (0-1) | [Series.opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) |\n| `marker` | MarkerSettingsModel | - | Data point markers | [MarkerSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n\n## Line Series\n\nLine series visualize trends and changes over continuous data.\n\n### Line\n\nClassic line chart connecting data points with straight lines.\n\n**Use Case:** Trend analysis, time-series data, continuous data tracking\n\n**Example:**\n```typescript\nimport { Component } from '@angular/core';\nimport { ChartModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-line-chart',\n standalone: true,\n imports: [ChartModule],\n template: `\n \u003cejs-chart [primaryXAxis]=\"primaryXAxis\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"month\" yName=\"sales\" \n name=\"Sales\" width=\"2\" [marker]=\"marker\">\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class LineChartComponent {\n public data = [\n { month: 'Jan', sales: 35 },\n { month: 'Feb', sales: 28 },\n { month: 'Mar', sales: 34 },\n { month: 'Apr', sales: 32 },\n { month: 'May', sales: 40 }\n ];\n \n public primaryXAxis = { valueType: 'Category' };\n public marker = { visible: true, width: 10, height: 10 };\n}\n```\n\n### Step Line\n\nConnects points with horizontal and vertical segments, emphasizing discrete changes.\n\n**Use Case:** Step functions, discrete value changes, inventory levels\n\n**Example:**\n```typescript\n\u003ce-series [dataSource]=\"data\" type=\"StepLine\" xName=\"x\" yName=\"y\" width=\"2\">\u003c/e-series>\n```\n\n### Spline\n\nSmoothed line using spline interpolation for elegant curves.\n\n**Use Case:** Smooth trend visualization, predictions, aesthetic presentations\n\n**Example:**\n```typescript\npublic splineData = [\n { x: 'Jan', y: 35 }, { x: 'Feb', y: 28 }, { x: 'Mar', y: 34 },\n { x: 'Apr', y: 32 }, { x: 'May', y: 40 }, { x: 'Jun', y: 32 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"splineData\" type=\"Spline\" xName=\"x\" yName=\"y\" width=\"2\">\u003c/e-series>\n```\n\n### Stacked Line\n\nMultiple line series stacked vertically to show cumulative values.\n\n**Use Case:** Cumulative trends, part-to-whole over time\n\n**Example:**\n```typescript\npublic data1 = [{ x: 'Jan', y: 10 }, { x: 'Feb', y: 20 }, { x: 'Mar', y: 15 }];\npublic data2 = [{ x: 'Jan', y: 15 }, { x: 'Feb', y: 10 }, { x: 'Mar', y: 20 }];\npublic data3 = [{ x: 'Jan', y: 20 }, { x: 'Feb', y: 15 }, { x: 'Mar', y: 18 }];\n```\n\n```html\n\u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"StackingLine\" xName=\"x\" yName=\"y\" name=\"Product A\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data2\" type=\"StackingLine\" xName=\"x\" yName=\"y\" name=\"Product B\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data3\" type=\"StackingLine\" xName=\"x\" yName=\"y\" name=\"Product C\">\u003c/e-series>\n\u003c/e-series-collection>\n```\n\n### Multi-colored Line\n\nLine segments colored based on value ranges or conditions.\n\n**Use Case:** Highlighting thresholds, color-coding performance zones\n\n**Example:**\n```typescript\npublic data = [\n { x: 'Jan', y: 35, color: 'green' },\n { x: 'Feb', y: 28, color: 'red' },\n { x: 'Mar', y: 34, color: 'green' },\n { x: 'Apr', y: 32, color: 'orange' }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"data\" type=\"MultiColoredLine\" xName=\"x\" yName=\"y\" \n pointColorMapping=\"color\" width=\"3\">\n\u003c/e-series>\n```\n\n## Area Series\n\nArea series show magnitude with filled regions beneath lines.\n\n### Area\n\nFills the area between the line and axis.\n\n**Use Case:** Volume visualization, magnitude emphasis, filled trends\n\n**Example:**\n```typescript\n\u003ce-series [dataSource]=\"data\" type=\"Area\" xName=\"x\" yName=\"y\" \n name=\"Sales\" opacity=\"0.5\" fill=\"#E94649\">\n\u003c/e-series>\n```\n\n### Stacked Area\n\nMultiple area series stacked to show cumulative contribution.\n\n**Use Case:** Part-to-whole trends, market share over time\n\n**Example:**\n```html\n\u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"StackingArea\" xName=\"x\" yName=\"y\" name=\"Product A\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data2\" type=\"StackingArea\" xName=\"x\" yName=\"y\" name=\"Product B\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data3\" type=\"StackingArea\" xName=\"x\" yName=\"y\" name=\"Product C\">\u003c/e-series>\n\u003c/e-series-collection>\n```\n\n### 100% Stacked Area\n\nNormalized stacked areas scaled to 100% for proportional comparison.\n\n**Use Case:** Percentage composition over time, relative proportions\n\n**Example:**\n```html\n\u003ce-series-collection>\n \u003ce-series [dataSource]=\"data1\" type=\"StackingArea100\" xName=\"x\" yName=\"y\" name=\"Desktop\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data2\" type=\"StackingArea100\" xName=\"x\" yName=\"y\" name=\"Mobile\">\u003c/e-series>\n \u003ce-series [dataSource]=\"data3\" type=\"StackingArea100\" xName=\"x\" yName=\"y\" name=\"Tablet\">\u003c/e-series>\n\u003c/e-series-collection>\n```\n\n### Range Area\n\nDisplays min-max value ranges as filled areas.\n\n**Use Case:** Temperature ranges, confidence intervals, variability bands\n\n**Example:**\n```typescript\npublic rangeData = [\n { x: 'Jan', low: 15, high: 25 },\n { x: 'Feb', low: 17, high: 28 },\n { x: 'Mar', low: 20, high: 32 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"rangeData\" type=\"RangeArea\" \n xName=\"x\" low=\"low\" high=\"high\" opacity=\"0.4\">\n\u003c/e-series>\n```\n\n### Spline Range Area\n\nSmooth (spline) version of range area for refined presentation.\n\n**Example:**\n```html\n\u003ce-series [dataSource]=\"rangeData\" type=\"SplineRangeArea\" \n xName=\"x\" low=\"low\" high=\"high\">\n\u003c/e-series>\n```\n\n## Column and Bar Series\n\nVertical (column) and horizontal (bar) series for categorical comparisons.\n\n### Column\n\nVertical bars for straightforward category comparison.\n\n**Use Case:** Category comparison, period-over-period analysis\n\n**API Properties:**\n- [Series.type](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) = 'Column'\n- [Series.columnWidth](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#columnWidth) - Column width (default: null, auto-calculated as 0.7)\n- [Series.columnSpacing](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#columnSpacing) - Space between columns (default: 0, range: 0-1)\n- [Series.columnFacet](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#columnFacet) - Column shape: 'Rectangle' or 'Cylinder' (default: 'Rectangle')\n- [Series.columnWidthInPixel](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#columnWidthInPixel) - Column width in pixels (default: null)\n- [Series.cornerRadius](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#cornerRadius) - Rounded corners configuration ([CornerRadiusModel](https://ej2.syncfusion.com/angular/documentation/api/chart/cornerRadiusModel))\n- [Series.border](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#border) - Column border settings ([BorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel))\n\n**Example:**\n```typescript\npublic columnData = [\n { country: 'USA', sales: 50 },\n { country: 'China', sales: 65 },\n { country: 'India', sales: 45 },\n { country: 'Japan', sales: 40 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"columnData\" type=\"Column\" \n xName=\"country\" yName=\"sales\" name=\"Sales\">\n\u003c/e-series>\n```\n\n### Bar\n\nHorizontal bars, ideal for long category labels.\n\n**Use Case:** Rankings, long labels, horizontal comparisons\n\n**Example:**\n```html\n\u003ce-series [dataSource]=\"columnData\" type=\"Bar\" \n xName=\"country\" yName=\"sales\">\n\u003c/e-series>\n```\n\n### Stacked Column/Bar\n\nMultiple series stacked within single bars to show component contributions.\n\n**Use Case:** Component breakdown, segment analysis\n\n**Example:**\n```html\n\u003ce-series-collection>\n \u003ce-series [dataSource]=\"q1Data\" type=\"StackingColumn\" xName=\"month\" yName=\"sales\" name=\"Q1\">\u003c/e-series>\n \u003ce-series [dataSource]=\"q2Data\" type=\"StackingColumn\" xName=\"month\" yName=\"sales\" name=\"Q2\">\u003c/e-series>\n \u003ce-series [dataSource]=\"q3Data\" type=\"StackingColumn\" xName=\"month\" yName=\"sales\" name=\"Q3\">\u003c/e-series>\n\u003c/e-series-collection>\n```\n\n**For horizontal stacking:**\n```html\n\u003ce-series type=\"StackingBar\" ...>\u003c/e-series>\n```\n\n### 100% Stacked Column/Bar\n\nNormalized to 100% for proportional comparison.\n\n**Example:**\n```html\n\u003ce-series [dataSource]=\"data1\" type=\"StackingColumn100\" xName=\"x\" yName=\"y\">\u003c/e-series>\n\u003ce-series [dataSource]=\"data2\" type=\"StackingColumn100\" xName=\"x\" yName=\"y\">\u003c/e-series>\n```\n\n### Range Column\n\nShows high-low value ranges as columns.\n\n**Use Case:** Temperature ranges, price ranges, min-max comparisons\n\n**Example:**\n```typescript\npublic rangeColumnData = [\n { x: 'Jan', low: 10, high: 20 },\n { x: 'Feb', low: 15, high: 30 },\n { x: 'Mar', low: 18, high: 35 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"rangeColumnData\" type=\"RangeColumn\" \n xName=\"x\" low=\"low\" high=\"high\">\n\u003c/e-series>\n```\n\n## Financial Series\n\nSpecialized series for financial and stock market data.\n\n**API Reference:** [FinancialDataFields](https://ej2.syncfusion.com/angular/documentation/api/chart/financialDataFields) - Interface for OHLC data fields\n\n### Candlestick\n\nOHLC bars with color coding for price direction (bullish/bearish).\n\n**Use Case:** Stock price analysis, OHLC data visualization\n\n**API Properties:**\n- [Series.type](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) = 'Candle'\n- [Series.open](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#open) - Open price field name\n- [Series.high](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#high) - High price field name \n- [Series.low](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#low) - Low price field name\n- [Series.close](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#close) - Close price field name\n- [Series.bearFillColor](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#bearFillColor) - Color for bearish candles (default: null)\n- [Series.bullFillColor](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#bullFillColor) - Color for bullish candles (default: null)\n- [Series.enableSolidCandles](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#enableSolidCandles) - Enable solid candle rendering (default: false)\n\n**Example:**\n```typescript\npublic stockData = [\n { date: new Date(2024, 1, 1), open: 120, high: 135, low: 110, close: 130 },\n { date: new Date(2024, 1, 2), open: 130, high: 145, low: 125, close: 140 },\n { date: new Date(2024, 1, 3), open: 140, high: 150, low: 135, close: 138 },\n { date: new Date(2024, 1, 4), open: 138, high: 142, low: 128, close: 135 }\n];\n\npublic primaryXAxis = { valueType: 'DateTime' };\n```\n\n```html\n\u003cejs-chart [primaryXAxis]=\"primaryXAxis\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"stockData\" type=\"Candle\" \n xName=\"date\" open=\"open\" high=\"high\" low=\"low\" close=\"close\"\n bearFillColor=\"#e74c3c\" bullFillColor=\"#2ecc71\">\n \u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n### Hilo\n\nShows only high and low values per period for compact volatility view.\n\n**Use Case:** Price volatility, range visualization\n\n**Example:**\n```html\n\u003ce-series [dataSource]=\"stockData\" type=\"Hilo\" \n xName=\"date\" high=\"high\" low=\"low\">\n\u003c/e-series>\n```\n\n### HiloOpenClose\n\nFull OHLC representation with open/close markers.\n\n**Example:**\n```html\n\u003ce-series [dataSource]=\"stockData\" type=\"HiloOpenClose\" \n xName=\"date\" open=\"open\" high=\"high\" low=\"low\" close=\"close\">\n\u003c/e-series>\n```\n\n## Statistical Series\n\nSeries types for statistical analysis and distributions.\n\n### Box and Whisker\n\nDisplays distribution with median, quartiles, and outliers.\n\n**Use Case:** Statistical comparison, distribution analysis, outlier detection\n\n**Example:**\n```typescript\npublic boxData = [\n { x: 'Department A', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 35, 37, 38, 41, 43] },\n { x: 'Department B', y: [24, 25, 25, 26, 27, 28, 29, 30, 34, 36, 38] }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"boxData\" type=\"BoxAndWhisker\" \n xName=\"x\" yName=\"y\" [marker]=\"marker\">\n\u003c/e-series>\n```\n\n### Histogram\n\nDisplays frequency distribution of numeric data bins.\n\n**Use Case:** Distribution shape, frequency analysis, data spread\n\n**API Properties:**\n- [Series.type](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) = 'Histogram'\n- [Series.binInterval](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#binInterval) - Histogram bin width (default: null, auto-calculated)\n- [Series.showNormalDistribution](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#showNormalDistribution) - Show normal distribution curve (default: false)\n- [Series.columnWidth](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#columnWidth) - Column width (default: 1 for histogram)\n\n**Example:**\n```typescript\npublic histogramData = [\n { value: 5.250 }, { value: 7.750 }, { value: 8.275 },\n { value: 9.750 }, { value: 7.750 }, { value: 8.275 },\n { value: 6.250 }, { value: 5.750 }, { value: 8.275 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"histogramData\" type=\"Histogram\" \n yName=\"value\" binInterval=\"1\" showNormalDistribution=\"true\">\n\u003c/e-series>\n```\n\n### Pareto\n\nBar chart plus cumulative line for 80/20 analysis.\n\n**Use Case:** Quality control, identifying vital few, prioritization\n\n**Example:**\n```typescript\npublic paretoData = [\n { defectType: 'Defect A', count: 40 },\n { defectType: 'Defect B', count: 30 },\n { defectType: 'Defect C', count: 15 },\n { defectType: 'Defect D', count: 10 },\n { defectType: 'Defect E', count: 5 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"paretoData\" type=\"Pareto\" \n xName=\"defectType\" yName=\"count\" name=\"Defects\">\n\u003c/e-series>\n```\n\n### Error Bar\n\nAdds error/uncertainty ranges to data points.\n\n**Use Case:** Measurement uncertainty, confidence intervals, variance display\n\n**Example:**\n```typescript\npublic errorBarSettings = {\n visible: true,\n type: 'Fixed',\n verticalError: 3\n};\n```\n\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Line\" xName=\"x\" yName=\"y\" \n [errorBar]=\"errorBarSettings\">\n\u003c/e-series>\n```\n\n## Specialized Series\n\nUnique series types for specific visualization needs.\n\n### Scatter\n\nIndividual x/y points showing correlation or clusters.\n\n**Use Case:** Correlation analysis, cluster identification, relationship visualization\n\n**Example:**\n```typescript\npublic scatterData = [\n { height: 160, weight: 55 },\n { height: 165, weight: 62 },\n { height: 170, weight: 68 },\n { height: 175, weight: 75 },\n { height: 180, weight: 80 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"scatterData\" type=\"Scatter\" \n xName=\"height\" yName=\"weight\" [marker]=\"marker\">\n\u003c/e-series>\n```\n\n### Bubble\n\nScatter with point size encoding a third dimension.\n\n**Use Case:** Three-variable visualization, size-encoded data\n\n**Example:**\n```typescript\npublic bubbleData = [\n { x: 'USA', y: 50, size: 100 },\n { x: 'China', y: 65, size: 150 },\n { x: 'India', y: 45, size: 80 }\n];\n```\n\n```html\n\u003ce-series [dataSource]=\"bubbleData\" type=\"Bubble\" \n xName=\"x\" yName=\"y\" size=\"size\" minRadius=\"3\" maxRadius=\"8\">\n\u003c/e-series>\n```\n\n### Polar\n\nCircular chart with radial axes from center.\n\n**Use Case:** Cyclical data, directional data, circular patterns\n\n**Example:**\n```html\n\u003cejs-chart [primaryXAxis]=\"primaryXAxis\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Polar\" xName=\"x\" yName=\"y\" \n drawType=\"Line\">\n \u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n**drawType options:** Line, Column, Area, Scatter, Spline, StackingArea, StackingColumn\n\n### Radar\n\nSimilar to polar but with straight lines from center.\n\n**Use Case:** Multi-variable comparison, skill assessments, radar plots\n\n**Example:**\n```html\n\u003ce-series [dataSource]=\"data\" type=\"Radar\" xName=\"x\" yName=\"y\" \n drawType=\"Line\">\n\u003c/e-series>\n```\n\n### Waterfall\n\nShows sequential positive/negative contributions to cumulative total.\n\n**Use Case:** Financial reconciliations, cumulative effects, bridge charts\n\n**Example:**\n```typescript\npublic waterfallData = [\n { x: 'Starting', y: 100 },\n { x: 'Sales', y: 50 },\n { x: 'Costs', y: -30 },\n { x: 'Marketing', y: -15 },\n { x: 'Ending', y: 105 }\n];\n\npublic connector = { color: '#333', width: 1 };\n```\n\n```html\n\u003ce-series [dataSource]=\"waterfallData\" type=\"Waterfall\" \n xName=\"x\" yName=\"y\" intermediateSumIndexes=\"[3]\" \n sumIndexes=\"[4]\" [connector]=\"connector\">\n\u003c/e-series>\n```\n\n### Vertical Chart\n\nInverts chart orientation (rotates axes).\n\n**Use Case:** Alternative perspective, specific layout requirements\n\n**Example:**\n```html\n\u003cejs-chart isTransposed=\"true\">\n \u003ce-series-collection>\n \u003ce-series [dataSource]=\"data\" type=\"Column\" xName=\"x\" yName=\"y\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n## Choosing the Right Series Type\n\n| Data Type | Recommended Series |\n|-----------|-------------------|\n| **Trend over time** | Line, Spline, Area |\n| **Category comparison** | Column, Bar |\n| **Part-to-whole** | Stacked Column, Stacked Area, 100% Stacked |\n| **Distribution** | Histogram, Box & Whisker |\n| **Correlation** | Scatter, Bubble |\n| **Financial/Stock** | Candlestick, Hilo, HiloOpenClose |\n| **Range/Min-Max** | Range Area, Range Column |\n| **Prioritization** | Pareto |\n| **Sequential changes** | Waterfall |\n| **Cyclical patterns** | Polar, Radar |\n\n## Combining Multiple Series\n\nMix different series types in one chart for rich visualizations:\n\n```typescript\npublic data1 = [{ x: 'Jan', y: 35 }, { x: 'Feb', y: 28 }];\npublic data2 = [{ x: 'Jan', y: 40 }, { x: 'Feb', y: 45 }];\npublic data3 = [{ x: 'Jan', y: 30 }, { x: 'Feb', y: 25 }];\n```\n\n```html\n\u003cejs-chart>\n \u003ce-series-collection>\n \u003c!-- Column series for actuals -->\n \u003ce-series [dataSource]=\"data1\" type=\"Column\" xName=\"x\" yName=\"y\" name=\"Actual\">\u003c/e-series>\n \n \u003c!-- Line series for target -->\n \u003ce-series [dataSource]=\"data2\" type=\"Line\" xName=\"x\" yName=\"y\" name=\"Target\" width=\"2\">\u003c/e-series>\n \n \u003c!-- Area series for baseline -->\n \u003ce-series [dataSource]=\"data3\" type=\"Area\" xName=\"x\" yName=\"y\" name=\"Baseline\" opacity=\"0.3\">\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>\n```\n\n**Best Practices:**\n- Limit to 2-3 different series types per chart\n- Ensure visual hierarchy (emphasize primary data)\n- Use consistent color schemes\n- Consider axis scaling when combining types\n\n## Common Pitfalls\n\n1. **Wrong Series for Data Type:** Using line charts for categorical comparisons\n2. **Too Many Series:** Cluttered charts with 5+ series\n3. **Inconsistent Data Structure:** Different data formats across series\n4. **Missing Required Properties:** Forgetting `low`/`high` for range series, `open`/`close` for financial\n\n## Performance Considerations\n\n- **Large Datasets:** Use `enableCanvas` rendering for 10,000+ points\n- **Many Series:** Limit to 10-15 series per chart\n- **Animation:** Disable for real-time updates: `animation: { enable: false }`\n\nRefer to the data-binding reference for optimization techniques.\n\n## API Reference Summary\n\n### Core Series Configuration\n\n| API | Description | Documentation |\n|-----|-------------|---------------|\n| ChartSeriesType | Enum defining all 25+ series types | [chartSeriesType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSeriesType) |\n| SeriesDirective | Main series configuration with 60+ properties | [seriesDirective.md](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective) |\n| Series | Series class with methods and properties | [series.md](https://ej2.syncfusion.com/angular/documentation/api/chart/series) |\n| SeriesModel | Series interface/model definition | [seriesModel.md](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel) |\n\n### Series Type-Specific Properties\n\n| Series Type | Key Properties | API Reference |\n|-------------|----------------|---------------|\n| **Line/Spline** | width, dashArray, splineType | [Series.width](https://ej2.syncfusion.com/angular/documentation/api/chart/series#width), [SplineType](https://ej2.syncfusion.com/angular/documentation/api/chart/splineType) |\n| **Column/Bar** | columnWidth, columnSpacing, columnFacet, cornerRadius | [Series.columnWidth](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#columnWidth), [ColumnFacet](https://ej2.syncfusion.com/angular/documentation/api/chart/columnFacet) |\n| **Area** | opacity, fill, border | [Series.opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity), [BorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel) |\n| **Financial** | open, high, low, close, bearFillColor, bullFillColor, enableSolidCandles | [FinancialDataFields](https://ej2.syncfusion.com/angular/documentation/api/chart/financialDataFields) |\n| **Range** | low, high | [Series.low](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#low), [Series.high](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#high) |\n| **Bubble** | size, minRadius, maxRadius | [Series.size](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#size) |\n| **Polar/Radar** | drawType, isClosed | [ChartDrawType](https://ej2.syncfusion.com/angular/documentation/api/chart/chartDrawType), [Series.isClosed](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#isClosed) |\n| **Waterfall** | intermediateSumIndexes, sumIndexes, connector | [Series.connector](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#connector), [ConnectorModel](https://ej2.syncfusion.com/angular/documentation/api/chart/connectorModel) |\n| **Box & Whisker** | showMean, showOutliers, boxPlotMode | [Series.showMean](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#showMean), [BoxPlotMode](https://ej2.syncfusion.com/angular/documentation/api/chart/boxPlotMode) |\n| **Histogram** | binInterval, showNormalDistribution | [Series.binInterval](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#binInterval) |\n| **Pareto** | paretoOptions | [ParetoOptions](https://ej2.syncfusion.com/angular/documentation/api/chart/paretoOptions), [ParetoOptionsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/paretoOptionsModel) |\n\n### Styling and Appearance\n\n| Property | Type | Default | API Reference |\n|----------|------|---------|---------------|\n| fill | string | null | [Series.fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) |\n| opacity | number | 1 | [Series.opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) |\n| border | BorderModel | - | [BorderModel](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel) |\n| dashArray | string | '' | [Series.dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dashArray) |\n| animation | AnimationModel | - | [AnimationModel](https://ej2.syncfusion.com/angular/documentation/api/chart/animationModel) |\n\n### Data Point Customization\n\n| Feature | API Reference |\n|---------|---------------|\n| Markers | [MarkerSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel) |\n| Data Labels | [DataLabelSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel) |\n| Point Colors | [RangeColorSettingModel](https://ej2.syncfusion.com/angular/documentation/api/chart/rangeColorSettingModel) |\n| Empty Points | [EmptyPointSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel) |\n\n### Enumerations\n\n| Enum | Description | API Reference |\n|------|-------------|---------------|\n| ChartSeriesType | All series type values | [chartSeriesType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartSeriesType) |\n| ChartDrawType | Draw types for Polar/Radar | [chartDrawType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/chartDrawType) |\n| SplineType | Spline interpolation types | [splineType.md](https://ej2.syncfusion.com/angular/documentation/api/chart/splineType) |\n| BoxPlotMode | Box plot calculation modes | [boxPlotMode.md](https://ej2.syncfusion.com/angular/documentation/api/chart/boxPlotMode) |\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":27901,"content_sha256":"ca70df6d66979f4a392949d4d1e699c41133f8073bb88b84eb7d51fef9c166c6"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Implementing Syncfusion Angular Chart Component","type":"text"}]},{"type":"paragraph","content":[{"text":"A comprehensive guide for implementing the Syncfusion Angular Chart component, a high-performance, interactive data visualization library supporting 25+ chart types including line, bar, area, column, pie, financial, and specialized series. Optimized for responsive rendering, smooth interactions, and large datasets.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use This Skill","type":"text"}]},{"type":"paragraph","content":[{"text":"Use this skill when you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visualize Data:","type":"text","marks":[{"type":"strong"}]},{"text":" Display numerical data as charts, graphs, or plots in Angular applications","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Trend Analysis:","type":"text","marks":[{"type":"strong"}]},{"text":" Show data trends over time using line, spline, or area charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Comparisons:","type":"text","marks":[{"type":"strong"}]},{"text":" Compare categorical data using column, bar, or grouped charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Financial Data:","type":"text","marks":[{"type":"strong"}]},{"text":" Implement stock charts with candlestick, OHLC, or technical indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Statistical Analysis:","type":"text","marks":[{"type":"strong"}]},{"text":" Use box plots, histograms, or pareto charts for distributions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multi-dimensional Data:","type":"text","marks":[{"type":"strong"}]},{"text":" Display scatter plots or bubble charts for correlation analysis","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Real-time Monitoring:","type":"text","marks":[{"type":"strong"}]},{"text":" Create live-updating charts for dashboards or monitoring systems","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive Exploration:","type":"text","marks":[{"type":"strong"}]},{"text":" Add zooming, panning, crosshair, tooltips, or selection features","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom Visualizations:","type":"text","marks":[{"type":"strong"}]},{"text":" Combine multiple series types, axes, or create complex layouts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessible Charts:","type":"text","marks":[{"type":"strong"}]},{"text":" Implement WCAG-compliant charts with keyboard navigation and screen reader support","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"The Syncfusion Angular Chart is a feature-rich data visualization component with:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"25+ Series Types:","type":"text","marks":[{"type":"strong"}]},{"text":" Line, spline, step line, area, column, bar, scatter, bubble, pie, financial (candlestick, OHLC), statistical (box & whisker, histogram, pareto), polar, radar, waterfall, and more","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive Features:","type":"text","marks":[{"type":"strong"}]},{"text":" Zooming (selection, mouse wheel, pinch), panning, tooltips, crosshair, trackball, selection, data editing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple Axes:","type":"text","marks":[{"type":"strong"}]},{"text":" Support for primary, secondary, and multiple axes with different data types (numeric, datetime, logarithmic, category)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart Elements:","type":"text","marks":[{"type":"strong"}]},{"text":" Legends, data markers, data labels, annotations, trendlines, technical indicators, striplines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data Binding:","type":"text","marks":[{"type":"strong"}]},{"text":" Local arrays, remote data (OData, DataManager), JSON sources, dynamic updates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customization:","type":"text","marks":[{"type":"strong"}]},{"text":" Themes, CSS styling, color palettes, responsive design, animations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export & Print:","type":"text","marks":[{"type":"strong"}]},{"text":" Export to PDF, SVG, PNG, JPEG, CSV, XLSX formats","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility:","type":"text","marks":[{"type":"strong"}]},{"text":" WCAG compliance, keyboard navigation, ARIA attributes, internationalization, RTL support","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation and Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Install and set up the Chart component in an Angular project","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understand prerequisites and system requirements","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add the ","type":"text"},{"text":"@syncfusion/ej2-angular-charts","type":"text","marks":[{"type":"code_inline"}]},{"text":" package","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure CSS themes and imports","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create your first basic chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understand the chart module structure","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Series Types","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/series-types.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/series-types.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Choose the appropriate chart type for your data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement line series (line, step line, spline, stacked, multi-colored)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create area charts (area, stacked, 100% stacked, range, spline range)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build column and bar charts (column, bar, stacked, range)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visualize financial data (candlestick, hilo, hilo-open-close)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use statistical charts (box & whisker, histogram, pareto, error bar)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create specialized charts (scatter, bubble, polar, radar, waterfall, vertical)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Combine multiple series types in one chart","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart Elements","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/chart-elements.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/chart-elements.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure and customize legends (positioning, templates, styling)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add data markers to highlight points (shapes, sizes, visibility)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display data labels on chart elements (positioning, templates, formatting)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add custom annotations (text, shapes, images at specific coordinates)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Include trendlines (linear, exponential, polynomial, moving average)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add technical indicators (RSI, MACD, Bollinger Bands, EMA, SMA)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Highlight specific ranges with striplines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Apply gradient fills to series","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Axes and Layout","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/axes-and-layout.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/axes-and-layout.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure axis types (numeric, datetime, logarithmic, category)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Set up primary and secondary axes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add multiple axes for different data scales","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Format axis labels (rotation, alignment, multilevel labels)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customize gridlines and tick marks","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement axis crossing and inversed axes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create charts with multiple panes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure chart title, subtitle, and dimensions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Set chart margins and padding","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Interactive Features","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/interactive-features.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/interactive-features.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable zooming (selection zoom, mouse wheel zoom, pinch zoom, zoom toolbar)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement panning for navigating zoomed charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add tooltips (default, custom templates, shared tooltips)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable crosshair for precise value reading","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use trackball for multi-series point tracking","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement selection (point, series, cluster, drag selection)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable data editing by dragging points","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Synchronize multiple charts for coordinated interactions","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Data Binding","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/data-binding.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/data-binding.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bind local data (arrays of objects, JSON)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Connect to remote data sources (OData, RESTful APIs)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use DataManager for advanced data operations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Handle dynamic data updates and real-time data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Manage empty points and null values","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Map data fields to chart properties","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Optimize performance for large datasets","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Handle asynchronous data loading","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Customization","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/customization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/customization.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Apply built-in themes (Material, Bootstrap, Fabric, Tailwind, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customize chart appearance with CSS","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use Theme Studio for custom theme generation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure color palettes for series","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Style individual series with custom colors and patterns","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement responsive design for different screen sizes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure chart background, border, and area","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customize animation effects","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessibility","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/accessibility.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement WCAG 2.0/2.1 compliant charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable keyboard navigation (arrow keys, tab, enter)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure ARIA attributes for screen readers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Ensure proper color contrast and focus indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Support high contrast themes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement internationalization (i18n) for multiple languages","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable localization (l10n) for regional formats","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add RTL (right-to-left) support for appropriate languages","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure advanced accessibility features","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advanced Features","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/advanced-features.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/advanced-features.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Handle chart events (load, loaded, pointClick, seriesRender, axisLabelRender, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export charts (PDF, SVG, PNG, JPEG, CSV, XLSX)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement print functionality","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understand module injection for tree-shaking","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use different render methods (SVG, Canvas)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Configure animation settings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Handle empty point modes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Access chart API methods programmatically","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement advanced event-driven interactions","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Common Patterns and Examples","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/common-patterns.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/common-patterns.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"See complete examples for common use cases","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build a trend analysis dashboard","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create a financial stock chart with technical indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement real-time data monitoring with live updates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build multi-axis comparison charts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create distribution analysis visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Find troubleshooting solutions for common issues","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Learn performance optimization techniques","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Migrate from EJ1 to EJ2 Chart","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Follow best practices for chart implementation","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start Example","type":"text"}]},{"type":"paragraph","content":[{"text":"Here's a minimal example to create a basic line chart:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// app.component.ts\nimport { Component } from '@angular/core';\nimport { ChartModule } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ChartModule],\n template: `\n \u003cejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales'>\n \u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class AppComponent {\n public primaryXAxis = { valueType: 'Category' };\n public primaryYAxis = { title: 'Sales (in USD)' };\n public title = 'Monthly Sales Report';\n \n public chartData = [\n { month: 'Jan', sales: 35000 },\n { month: 'Feb', sales: 28000 },\n { month: 'Mar', sales: 34000 },\n { month: 'Apr', sales: 32000 },\n { month: 'May', sales: 40000 },\n { month: 'Jun', sales: 32000 }\n ];\n}","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// app.config.ts (for Angular 19+)\nimport { ApplicationConfig } from '@angular/core';\nimport { registerLicense } from '@syncfusion/ej2-base';\n\n// Register Syncfusion license (get free trial at syncfusion.com)\nregisterLicense('YOUR_LICENSE_KEY');\n\nexport const appConfig: ApplicationConfig = {\n providers: []\n};","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 1: Multi-Series Comparison Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"public chartData = [\n { month: 'Jan', product1: 35, product2: 28, product3: 34 },\n { month: 'Feb', product1: 28, product2: 44, product3: 32 },\n { month: 'Mar', product1: 34, product2: 48, product3: 41 }\n];","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"html"},"content":[{"text":"\u003cejs-chart [primaryXAxis]='primaryXAxis' [title]='title'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='chartData' type='Column' xName='month' yName='product1' name='Product A'>\u003c/e-series>\n \u003ce-series [dataSource]='chartData' type='Column' xName='month' yName='product2' name='Product B'>\u003c/e-series>\n \u003ce-series [dataSource]='chartData' type='Column' xName='month' yName='product3' name='Product C'>\u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 2: Interactive Chart with Zoom and Tooltip","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component } from '@angular/core';\nimport { ChartModule, ZoomService, TooltipService } from '@syncfusion/ej2-angular-charts';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ChartModule],\n providers: [ZoomService, TooltipService],\n template: `\n \u003cejs-chart [zoomSettings]='zoomSettings' [tooltip]='tooltip'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='data' type='Line' xName='x' yName='y'>\u003c/e-series>\n \u003c/e-series-collection>\n \u003c/ejs-chart>\n `\n})\nexport class AppComponent {\n public zoomSettings = {\n enableSelectionZooming: true,\n enableMouseWheelZooming: true,\n enablePinchZooming: true,\n enablePan: true\n };\n \n public tooltip = { enable: true };\n public data = [/* your data */];\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 3: Financial Stock Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"public stockData = [\n { date: new Date(2024, 1, 1), open: 120, high: 135, low: 110, close: 130, volume: 1000000 },\n { date: new Date(2024, 1, 2), open: 130, high: 145, low: 125, close: 140, volume: 1200000 }\n // ... more data\n];","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"html"},"content":[{"text":"\u003cejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>\n \u003ce-series-collection>\n \u003ce-series [dataSource]='stockData' type='Candle' \n xName='date' high='high' low='low' open='open' close='close'>\n \u003c/e-series>\n \u003c/e-series-collection>\n\u003c/ejs-chart>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Configuration Options","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Series Configuration","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart type (Line, Column, Bar, Area, Scatter, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]},{"text":": Data array for the series","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"xName","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"yName","type":"text","marks":[{"type":"code_inline"}]},{"text":": Property names for x and y values","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"name","type":"text","marks":[{"type":"code_inline"}]},{"text":": Series name for legend","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"marker","type":"text","marks":[{"type":"code_inline"}]},{"text":": Marker configuration for data points","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"fill","type":"text","marks":[{"type":"code_inline"}]},{"text":": Series color","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Axis Configuration","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"valueType","type":"text","marks":[{"type":"code_inline"}]},{"text":": Axis type (Double, DateTime, Category, Logarithmic)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]},{"text":": Axis title text","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"minimum","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"maximum","type":"text","marks":[{"type":"code_inline"}]},{"text":": Axis range","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"interval","type":"text","marks":[{"type":"code_inline"}]},{"text":": Label interval","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"labelFormat","type":"text","marks":[{"type":"code_inline"}]},{"text":": Format string for labels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"opposedPosition","type":"text","marks":[{"type":"code_inline"}]},{"text":": Position axis on opposite side","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chart Configuration","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart title","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"height","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart dimensions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"theme","type":"text","marks":[{"type":"code_inline"}]},{"text":": Built-in theme name","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"background","type":"text","marks":[{"type":"code_inline"}]},{"text":": Chart background color","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"legendSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":": Legend configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"zoomSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":": Zoom configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"tooltip","type":"text","marks":[{"type":"code_inline"}]},{"text":": Tooltip configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Business Dashboards:","type":"text","marks":[{"type":"strong"}]},{"text":" Display KPIs, sales trends, revenue comparisons","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Financial Applications:","type":"text","marks":[{"type":"strong"}]},{"text":" Stock charts, portfolio performance, technical analysis","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Analytics Platforms:","type":"text","marks":[{"type":"strong"}]},{"text":" User behavior, traffic analysis, conversion funnels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Scientific Visualization:","type":"text","marks":[{"type":"strong"}]},{"text":" Experimental data, statistical distributions, correlation analysis","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Monitoring Systems:","type":"text","marks":[{"type":"strong"}]},{"text":" Real-time metrics, system performance, IoT data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Reporting Tools:","type":"text","marks":[{"type":"strong"}]},{"text":" Automated reports, data exports, scheduled visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Educational Applications:","type":"text","marks":[{"type":"strong"}]},{"text":" Math graphs, statistics teaching, data science demonstrations","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Next Steps","type":"text"}]},{"type":"paragraph","content":[{"text":"After creating your basic chart:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Explore different series types for your specific data visualization needs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add interactive features like zooming and tooltips for better user experience","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customize appearance with themes and styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement data binding for dynamic data sources","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Ensure accessibility compliance for all users","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export and print capabilities for sharing visualizations","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"For detailed implementation guidance, refer to the specific reference files listed in the navigation guide above.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"API Reference Documentation","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Complete API Guide:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api-reference.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-reference.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"The Syncfusion Angular Chart component provides 200+ API documentation files covering:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Core APIs:","type":"text","marks":[{"type":"strong"}]},{"text":" ChartModel (40+ properties), AxisModel (50+ properties), SeriesDirective (60+ properties)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart Elements:","type":"text","marks":[{"type":"strong"}]},{"text":" Legend, Markers, Data Labels, Tooltip, Annotations, Trendlines, Technical Indicators, Striplines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive Features:","type":"text","marks":[{"type":"strong"}]},{"text":" Zooming, Panning, Crosshair, Selection, Drag Settings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Events:","type":"text","marks":[{"type":"strong"}]},{"text":" 40+ event interfaces (ILoadedEventArgs, IPointRenderEventArgs, IZoomingEventArgs, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enumerations:","type":"text","marks":[{"type":"strong"}]},{"text":" 50+ enums (ChartSeriesType, ValueType, ChartTheme, SelectionMode, ExportType, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Utilities:","type":"text","marks":[{"type":"strong"}]},{"text":" BorderModel, FontModel, MarginModel, AnimationModel, and more","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"All API documentation is available at https://ej2.syncfusion.com/angular/documentation/api/chart/. See ","type":"text"},{"text":"references/api-reference.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-reference.md","title":null}}]},{"text":" for comprehensive API navigation and documentation structure.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Each reference guide (getting-started.md, series-types.md, axes-and-layout.md, etc.) links to the official online API documentation throughout the content.","type":"text"}]}]},"metadata":{"date":"2026-06-05","name":"syncfusion-angular-chart","author":"@skillopedia","source":{"stars":0,"repo_name":"angular-ui-components-skills","origin_url":"https://github.com/syncfusion/angular-ui-components-skills/blob/HEAD/skills/syncfusion-angular-chart/SKILL.md","repo_owner":"syncfusion","body_sha256":"de9d52e5f90bd0e894045588e319e5cc291b7555f524d160ce2df910f0f29287","cluster_key":"96be6237c122adc0f7fd0510c5bd7966333ac137834c0bea1c0177295fcfc0cb","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/angular-ui-components-skills/skills/syncfusion-angular-chart/SKILL.md","attachments":[{"id":"0d772d3b-8de1-5e1c-ae27-b6ce0d942fe4","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0d772d3b-8de1-5e1c-ae27-b6ce0d942fe4/attachment.md","path":"references/accessibility.md","size":24966,"sha256":"d79a5e8cc734a4100b3522dbd733d6065029702dda3804ef18df69bea0f562c2","contentType":"text/markdown; charset=utf-8"},{"id":"6fbface2-a255-5420-93a1-b7ac6cd6dd9a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/6fbface2-a255-5420-93a1-b7ac6cd6dd9a/attachment.md","path":"references/advanced-features.md","size":34981,"sha256":"403efc80ebad0c0cbd6d54f8f620ebf9ce668f6825b5a7cd70059ca21e5817e3","contentType":"text/markdown; charset=utf-8"},{"id":"8c173185-0100-5d7f-9eb4-ebc996c6e870","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/8c173185-0100-5d7f-9eb4-ebc996c6e870/attachment.md","path":"references/api-reference.md","size":41147,"sha256":"e1739116357da7230b11e0987aae77e588fd7f478af2a09552c510c0a25f4d12","contentType":"text/markdown; charset=utf-8"},{"id":"a589434a-6136-5b0e-b280-a9116b704c39","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a589434a-6136-5b0e-b280-a9116b704c39/attachment.md","path":"references/axes-and-layout.md","size":29526,"sha256":"6ef905d4047f0d3125eaf483cb6b701c2e68d0307e84a883566098ef4f6d4bb1","contentType":"text/markdown; charset=utf-8"},{"id":"12d6add3-786b-5d05-9e9c-d2922bc7cbd5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/12d6add3-786b-5d05-9e9c-d2922bc7cbd5/attachment.md","path":"references/chart-elements.md","size":25992,"sha256":"68a1e637d7f57672d405648a6e324a435fac451c72fae50381582961b38b7213","contentType":"text/markdown; charset=utf-8"},{"id":"6327fce6-67df-5d10-8149-d1658b710f45","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/6327fce6-67df-5d10-8149-d1658b710f45/attachment.md","path":"references/common-patterns.md","size":33487,"sha256":"5ee854fc0f03cf79ab9ca994ce9e0946ed296a80f6574ffa0fc7ac2e3f7ae77a","contentType":"text/markdown; charset=utf-8"},{"id":"b5536674-96d1-57ef-a926-f1b929a7869a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b5536674-96d1-57ef-a926-f1b929a7869a/attachment.md","path":"references/customization.md","size":20093,"sha256":"7e6350dda0db79c0f758e6b17ef3b0789fe008e34f938d849591057ea6dc0547","contentType":"text/markdown; charset=utf-8"},{"id":"a5a01e55-58f7-5702-9faf-79d1949fd6eb","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a5a01e55-58f7-5702-9faf-79d1949fd6eb/attachment.md","path":"references/data-binding.md","size":25323,"sha256":"5dda1260e264391869c42a9b5d938a21f7c1df7a3bb3b2badd361abe10b35f4a","contentType":"text/markdown; charset=utf-8"},{"id":"174fcba8-7890-5650-b323-0623183e1196","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/174fcba8-7890-5650-b323-0623183e1196/attachment.md","path":"references/getting-started.md","size":19308,"sha256":"41f12a04b335e7bf81e28e1837c9016379e30d30e2b569a78edf4ad17915d65e","contentType":"text/markdown; charset=utf-8"},{"id":"5497ae46-7bc9-5c38-894d-fbdcafb909d4","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/5497ae46-7bc9-5c38-894d-fbdcafb909d4/attachment.md","path":"references/interactive-features.md","size":26351,"sha256":"39001cc1123a0c8f8b5457084de33b38d5262782729aa0dd18176019d023fec5","contentType":"text/markdown; charset=utf-8"},{"id":"7f139568-3b7a-5baf-88e6-38e5d87ead90","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/7f139568-3b7a-5baf-88e6-38e5d87ead90/attachment.md","path":"references/series-types.md","size":27901,"sha256":"ca70df6d66979f4a392949d4d1e699c41133f8073bb88b84eb7d51fef9c166c6","contentType":"text/markdown; charset=utf-8"}],"bundle_sha256":"72e20422b532f6c6c577f9b3a1e79faf70fb2fb9af9755e98fb71f34de37d697","attachment_count":11,"text_attachments":11,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/syncfusion-angular-chart/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","metadata":{"author":"Syncfusion Inc","version":"33.1.44","category":"Data Visualization"},"import_tag":"clean-skills-v1","description":"Implement Syncfusion Angular Chart component for professional data visualization. Use this when creating or customizing charts such as line, bar, column, area, pie, financial (candlestick, OHLC), scatter, bubble, or stock charts. Supports axes configuration, series binding, legends, tooltips, zooming, real-time updates, technical indicators, themes, export, and accessibility features."}},"renderedAt":1782979317774}

Implementing Syncfusion Angular Chart Component A comprehensive guide for implementing the Syncfusion Angular Chart component, a high-performance, interactive data visualization library supporting 25+ chart types including line, bar, area, column, pie, financial, and specialized series. Optimized for responsive rendering, smooth interactions, and large datasets. When to Use This Skill Use this skill when you need to: - Visualize Data: Display numerical data as charts, graphs, or plots in Angular applications - Trend Analysis: Show data trends over time using line, spline, or area charts - Com…