ng-apexcharts Documentation

If you need to call ApexCharts methods from outside the component context (where you don't have a reference to the Angular component), you can use the global window.ApexCharts.exec() method. You must target the specific chart instance using its chart.id.

// Syntax: window.ApexCharts.exec(chartID, methodName, params)
window.ApexCharts.exec("ng-chart-example", "updateSeries", [
  {
    data: [40, 55, 65, 11, 23, 44, 54, 33]
  }
]);

While attribute binding handles most updates, you can call core ApexCharts methods directly by referencing the component instance using @ViewChild. This is useful for programmatic actions like toggling series visibility or adding annotations.

1. Add a template reference variable to the <apx-chart> component.
2. Use @ViewChild in your TypeScript class to capture the instance.
3. Call the proxied methods on that instance.

<!-- Template -->
<apx-chart #chartObj [series]="series" [chart]="chart"></apx-chart>

// Component
@ViewChild('chartObj') chart: ChartComponent;

// Usage
this.chart.toggleSeries("series-1");

To use ng-apexcharts in your Angular project, follow these three steps:

1. Install both apexcharts and ng-apexcharts via npm.
2. Register the ApexCharts minified script in your angular.json file.
3. Import NgApexchartsModule into your Angular module (e.g., AppModule).

# 1. Install packages
npm install apexcharts ng-apexcharts --save

# 2. Add to angular.json scripts array
"scripts": [
  "node_modules/apexcharts/dist/apexcharts.min.js"
]

# 3. Add to imports in your module
imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  NgApexchartsModule,
  ...
]

To call core ApexCharts methods directly or to monitor the chart's lifecycle, you can access the chartInstance signal or listen to the chartReady output.

1. Using chartReady: This output emits an object containing the chartObj (the raw ApexCharts instance) as soon as the chart is initialized.
2. Using chartInstance: This is a signal that holds the ApexCharts instance. You can use Angular's effect or computed to react to changes in the instance.

```ts
// In your component
@ViewChild(ChartComponent) chartComponent!: ChartComponent;

// Option 1: Listen to the output
// <apx-chart (chartReady)=\

The ChartCoreComponent (selector: apx-chart-core) is a tree-shakeable version of the standard <apx-chart> component. It is designed to reduce bundle size by loading apexcharts/core (~611 KB) instead of the full apexcharts/client bundle (~942 KB).

Because it only loads the core library, you must manually register the chart types and features you intend to use by adding side-effect imports. These imports must be executed before the component is rendered, typically in your app.config.ts or at the top of your bootstrapping component.

// Add these side-effect imports before the component is rendered
import "apexcharts/line";              // line, area, scatter, bubble
import "apexcharts/bar";               // bar, column, rangeBar
import "apexcharts/features/legend";   // opt-in legend
import "apexcharts/features/toolbar";  // opt-in toolbar

By default, the component automatically calls updateSeries() whenever the [series] input changes. You can disable this behavior using the autoUpdateSeries attribute.

When to use: Set autoUpdateSeries to false in mixed or combo charts if you are manually changing the type property within your series objects. This prevents unnecessary full chart re-renders when only the series data changes.

To use apx-chart-core, you must explicitly import the required ApexCharts modules to ensure they are included in your bundle. All inputs, outputs, and methods are identical to the standard <apx-chart> component.

// Example: Registering line and bar features for use with <apx-chart-core>
import "apexcharts/line";
import "apexcharts/bar";
import "apexcharts/features/legend";

You can automatically install and configure ng-apexcharts in an Angular project using the ng add command. This schematic performs the following actions:

1. Adds apexcharts to your package.json with the appropriate version.
2. Triggers a NodePackageInstallTask to install dependencies.
3. Runs the ng-add-setup-project schematic to complete the project configuration.

To use this, run the following command in your terminal:

ng add ng-apexcharts

To use the ng-apexcharts components in your Angular application, you must import the NgApexchartsModule into your Angular module (e.g., app.module.ts). This module exports the following components:

• ChartComponent: The primary component for rendering interactive charts.
• ChartCoreComponent: A core component used for chart logic.
• ChartSSRComponent: A component designed for Server-Side Rendering (SSR).
• ChartHydrateComponent: A component used to attach interactivity to server-rendered charts on the client side.

import { NgApexchartsModule } from 'ng-apexcharts';

@NgModule({
  imports: [
    NgApexchartsModule,
    // ... other imports
  ],
  // ...
})
export class AppModule { }

The <apx-chart> component is the primary way to render charts. You must provide at least the [series] and [chart] attributes for the chart to initialize.

Changing these input attributes will automatically trigger the relevant ApexCharts update methods and re-render the chart.

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

The <apx-chart> component exposes the following configuration attributes, which map directly to ApexCharts options:

• chart: ApexChart (Required)
• series: ApexAxisChartSeries | ApexNonAxisChartSeries (Required)
• annotations: ApexAnnotations
• colors: string[]
• dataLabels: ApexDataLabels
• stroke: ApexStroke
• labels: string[]
• legend: ApexLegend
• fill: ApexFill
• tooltip: ApexTooltip
• plotOptions: ApexPlotOptions
• responsive: ApexResponsive[]
• xaxis: ApexXAxis
• yaxis: ApexYAxis | ApexYAxis[]
• grid: ApexGrid
• states: ApexStates
• title: ApexTitleSubtitle
• subtitle: ApexTitleSubtitle
• theme: ApexTheme
• markers: ApexMarkers