import { Chart, LineSeries, DateTime, Legend, Tooltip, Category } from '@syncfusion/ej2-charts';

// Inject required modules
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category);

const data = [
  { month: 'Jan', sales: 21 },
  { month: 'Feb', sales: 24 },
  { month: 'Mar', sales: 36 },
  { month: 'Apr', sales: 38 },
  { month: 'May', sales: 54 }
];

const chart = new Chart({
  primaryXAxis: { valueType: 'Category' },
  title: 'Monthly Sales',
  tooltip: { enable: true },
  legendSettings:{ visible: true },
  series: [{
    dataSource: data,
    xName: 'month',
    yName: 'sales',
    type: 'Line',
    name: 'Sales'
  }]
}, '#chart');

series: [
  { dataSource: data, xName: 'month', yName: 'sales', type: 'Column', name: 'Sales' },
  { dataSource: data, xName: 'month', yName: 'revenue', type: 'Column', name: 'Revenue' }
]

series: [
  { dataSource: data, xName: 'category', yName: 'value1', type: 'StackingColumn' },
  { dataSource: data, xName: 'category', yName: 'value2', type: 'StackingColumn' }
],
legend: { visible: true, position: 'Bottom' }

// Update with new data
chart.series[0].dataSource = updatedData;
chart.refresh();

pointRender: (args: IPointRenderEventArgs) => {
  // Customize point on selection
},
selectionMode: 'Point'