// app.component.ts
import { Component } from '@angular/core';
import { ChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChartModule],
  template: `
    <ejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
      <e-series-collection>
        <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales'>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  `
})
export class AppComponent {
  public primaryXAxis = { valueType: 'Category' };
  public primaryYAxis = { title: 'Sales (in USD)' };
  public title = 'Monthly Sales Report';
  
  public chartData = [
    { month: 'Jan', sales: 35000 },
    { month: 'Feb', sales: 28000 },
    { month: 'Mar', sales: 34000 },
    { month: 'Apr', sales: 32000 },
    { month: 'May', sales: 40000 },
    { month: 'Jun', sales: 32000 }
  ];
}

// app.config.ts (for Angular 19+)
import { ApplicationConfig } from '@angular/core';
import { registerLicense } from '@syncfusion/ej2-base';

// Register Syncfusion license (get free trial at syncfusion.com)
registerLicense('YOUR_LICENSE_KEY');

export const appConfig: ApplicationConfig = {
  providers: []
};

public chartData = [
  { month: 'Jan', product1: 35, product2: 28, product3: 34 },
  { month: 'Feb', product1: 28, product2: 44, product3: 32 },
  { month: 'Mar', product1: 34, product2: 48, product3: 41 }
];

<ejs-chart [primaryXAxis]='primaryXAxis' [title]='title'>
  <e-series-collection>
    <e-series [dataSource]='chartData' type='Column' xName='month' yName='product1' name='Product A'></e-series>
    <e-series [dataSource]='chartData' type='Column' xName='month' yName='product2' name='Product B'></e-series>
    <e-series [dataSource]='chartData' type='Column' xName='month' yName='product3' name='Product C'></e-series>
  </e-series-collection>
</ejs-chart>

import { Component } from '@angular/core';
import { ChartModule, ZoomService, TooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChartModule],
  providers: [ZoomService, TooltipService],
  template: `
    <ejs-chart [zoomSettings]='zoomSettings' [tooltip]='tooltip'>
      <e-series-collection>
        <e-series [dataSource]='data' type='Line' xName='x' yName='y'></e-series>
      </e-series-collection>
    </ejs-chart>
  `
})
export class AppComponent {
  public zoomSettings = {
    enableSelectionZooming: true,
    enableMouseWheelZooming: true,
    enablePinchZooming: true,
    enablePan: true
  };
  
  public tooltip = { enable: true };
  public data = [/* your data */];
}

public stockData = [
  { date: new Date(2024, 1, 1), open: 120, high: 135, low: 110, close: 130, volume: 1000000 },
  { date: new Date(2024, 1, 2), open: 130, high: 145, low: 125, close: 140, volume: 1200000 }
  // ... more data
];

<ejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
  <e-series-collection>
    <e-series [dataSource]='stockData' type='Candle' 
              xName='date' high='high' low='low' open='open' close='close'>
    </e-series>
  </e-series-collection>
</ejs-chart>