Chart Library Documentation - JU-DEV-Bootcamps/ERAS GitHub Wiki

ApexCharts with ng-apexcharts

Modern JavaScript library for creating dynamic charts, and its Angular wrapper, ng-apexcharts, makes it easy to integrate into Angular applications.

Key Features

  • Supports a variety of chart types: heatmaps, bar charts, pie charts, line charts, and more.
  • Highly customizable and interactive visualizations.
  • Responsive design that adapts to different screen sizes.
  • Built-in theming options that can complement Angular Material’s styling.

Open Source & Community

  • License: Open source under MIT, free for most use cases.
  • Community: Actively maintained with regular updates and support.

Installation

npm install apexcharts ng-apexcharts

Package.json Dependencies

Add these dependencies:

{
  "dependencies": {
    "apexcharts": "^3.47.0",
    "ng-apexcharts": "^19.0.0"
  }
}

Usage in Standalone Components

import { NgApexchartsModule } from 'ng-apexcharts';

@Component({
  standalone: true,
  imports: [NgApexchartsModule]
})

Example Heat Map Implementation

import { Component } from '@angular/core';
import { NgApexchartsModule } from 'ng-apexcharts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgApexchartsModule],
  template: `
    <div style="text-align: center">
      <apx-chart
        [series]="chartOptions.series"
        [chart]="chartOptions.chart"
        [xaxis]="chartOptions.xaxis"
        [yaxis]="chartOptions.yaxis"
        [colors]="chartOptions.colors"
        [plotOptions]="chartOptions.plotOptions"
        [title]="chartOptions.title"
      >
      </apx-chart>
    </div>
  `,
  styles: [],
})
export class AppComponent {
  public chartOptions: any;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: 'Catastrophic',
          data: [5, 4, 3, 2, 1],
        },
        {
          name: 'Significant',
          data: [4, 3, 3, 2, 1],
        },
        {
          name: 'Moderate',
          data: [3, 3, 2, 2, 1],
        },
        {
          name: 'Low',
          data: [2, 2, 2, 1, 1],
        },
        {
          name: 'Negligible',
          data: [1, 1, 1, 1, 1],
        },
      ],
      chart: {
        type: 'heatmap',
        height: 500,
        width: 800,
      },
      title: {
        text: 'Risk Heatmap',
      },
      xaxis: {
        categories: [
          'Improbable',
          'Remote',
          'Occasional',
          'Probable',
          'Frequent',
        ],
      },
      yaxis: {
        categories: [
          'Catastrophic',
          'Significant',
          'Moderate',
          'Low',
          'Negligible',
        ],
      },
      colors: ['#FF0000', '#FFA500', '#FFFF00', '#90EE90', '#008000'],
      plotOptions: {
        heatmap: {
          distributed: true,
          colorScale: {
            ranges: [
              { from: 1, to: 1.5, color: '#008000', name: 'Low Risk' },
              { from: 1.6, to: 2.5, color: '#90EE90', name: 'Low-Medium Risk' },
              { from: 2.6, to: 3.5, color: '#FFFF00', name: 'Medium Risk' },
              {
                from: 3.6,
                to: 4.5,
                color: '#FFA500',
                name: 'Medium-High Risk',
              },
              { from: 4.6, to: 5, color: '#FF0000', name: 'High Risk' },
            ],
          },
          dataLabels: {
            enabled: true,
            style: {
              fontSize: '12px',
            },
          },
        },
      },
    };
  }
}

Preview

Screenshot 2025-01-06 at 12 00 32 PM

Documentation Resources

⚠️ **GitHub.com Fallback** ⚠️