apex charts angular

A Brief Tutorial on Using ApexCharts with Angular

Quick Installation

1. Install dependencies:

   npm i apexcharts ng-apexcharts
   

2. Import Module (app.module.ts)

Basic Line Chart Example

Component Template (app.component.html)

<apx-chart 
  [series]="chartOptions.series" 
  [chart]="chartOptions.chart"
  [xaxis]="chartOptions.xaxis" 
  [title]="chartOptions.title">
</apx-chart>

Component Class (app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  chartOptions = {
    series: [{ data: [10, 20, 30, 40] }],
    chart: { type: 'line' },
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] },
    title: { text: 'Basic Line Chart' }
  };
}

Key Features

1. Dynamic Updates

   updateChart() {
     const newData = this.chartOptions.series[0].data.map(() => 
       Math.floor(Math.random() * 100)
     );
     this.chartOptions = { ...this.chartOptions, series: [{ data: newData }] };
   }
   

2. Mixed Chart Types – Ability to use multiple chart types in one visualization.

Example Links

Basic Demo: Pie Chart

chartOptions = {
  series: [44, 55, 13],
  chart: { type: 'pie', width: 380 },
  labels: ['Team A', 'Team B', 'Team C']
};

Common Configurations

Styling

chartOptions = {
  chart: { foreColor: '#333' }, // Text color
  colors: ['#4CAF50', '#E91E63'], // Data colors
  grid: { borderColor: '#e0e0e0' } // Grid lines
};

Tooltip Customization

tooltip: {
  theme: 'dark',
  x: { show: false }, // Hide x-axis tooltip
  y: { formatter: (val: number) => `${val} users` } // Custom label
}

---

Tips for Troubleshooting

1. Chart Not Rendering?

   • Make sure NgApexchartsModule is imported.
   • Ensure there are no typos with option properties (e.g., xaxis vs xAxis).

2. Data Not Updating?

   • Assign the entire chartOptions object to enable Angular change detection.

3. Performance Issues?

   • Use ChangeDetectionStrategy.OnPush for optimization.
   • Debounce quick updates usingrxjs/debounceTime .

---

Why ApexCharts?

Free & Open Source

• MIT Licensed

Advanced Features

• Chart Annotations
• Data Labels
• Brush Charts

Native Angular Support

• Ready-to-use code snippets

For more advanced features like annotations, data labels, brush charts, and others, check out the ApexCharts Documentation.