Home > Docs > Angular Charts

Angular Charts

Using ApexCharts in Angular

ng-ApexCharts is the official Angular wrapper for ApexCharts. It is built for modern Angular: standalone components, signal inputs, and zoneless change detection. There are no NgModules to register and no decorators in the public API.

In this guide you will create your first Angular chart, update it reactively, and call chart methods.

Download and Installation

ng add ng-apexcharts

This installs a compatible apexcharts release alongside the wrapper. From ng-apexcharts 3.2.0 the range it writes is ^6.7.0 || ^7.0.0 || ^8.0.0, which resolves to ApexCharts 8 on a fresh install. If you prefer to do it by hand:

npm install apexcharts ng-apexcharts --save

Version compatibility

ng-apexcharts	Angular	ApexCharts
3.2.x	20+	6.x, 7.x or 8.x
3.1.x	20+	6.x or 7.x
3.0.x	20+	6.x
2.5.x	20+	5.x or 6.x

ApexCharts 8 needs ng-apexcharts 3.2.0 or newer. The wrapper names each ApexCharts major in its peer range, and 3.1.x stops at ^7.0.0, so npm will not resolve it next to apexcharts@8.

ng-apexcharts 3.x re-exports all option types (ApexChart, ApexPlotOptions, and the rest) directly from the installed apexcharts package, so the types always match the ApexCharts version you run. The full history is in the compatibility table on GitHub.

There is nothing to add to angular.json and nothing to register in your application config. The chart components load the ApexCharts bundle themselves through a dynamic import(), so no global script tag is required.

Upgrading? If an older version of ng add added node_modules/apexcharts/dist/apexcharts.min.js to the scripts array in your angular.json, remove it. It is redundant, adds roughly 930 KB of minified script to every build (the size of apexcharts.min.js in 8.0.0), and prevents the tree-shakeable <apx-chart-core> entry point from reducing your bundle. Re-running ng add ng-apexcharts removes it for you.

Usage

Import ChartComponent into whichever component renders the chart, then use <apx-chart> in its template:

import { Component } from "@angular/core";
import { ChartComponent } from "ng-apexcharts";

@Component({
  selector: "app-basic-chart",
  imports: [ChartComponent],
  template: `<apx-chart [series]="series" [chart]="chart" />`,
})
export class BasicChartComponent {
  readonly chart = { type: "line" as const, height: 350 };
  readonly series = [{ name: "Revenue", data: [10, 41, 35, 51] }];
}

You need at least series and chart for a meaningful chart. Every other option is an optional input.

Creating your first Angular Chart

Here is a complete bar chart. Because the component is standalone, the template and logic live in one file:

import { Component, signal } from "@angular/core";
import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexTitleSubtitle,
} from "ng-apexcharts";

@Component({
  selector: "app-root",
  imports: [ChartComponent],
  template: `
    <apx-chart
      [series]="series()"
      [chart]="chart"
      [xaxis]="xaxis"
      [title]="title"
    />
  `,
})
export class AppComponent {
  readonly series = signal<ApexAxisChartSeries>([
    { name: "My-series", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] },
  ]);

  readonly chart: ApexChart = { type: "bar", height: 350 };
  readonly title: ApexTitleSubtitle = { text: "My First Angular Chart" };
  readonly xaxis: ApexXAxis = {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
  };
}

This renders the following chart. To read more about the options you can configure in a bar chart, check out the plotOptions.bar configuration. create-your-first-angular-chart

Updating Angular Chart Data

Set a new value on the signal and the chart updates itself. You do not need to call updateSeries() or updateOptions() manually:

@Component({
  selector: "app-root",
  imports: [ChartComponent],
  template: `
    <apx-chart [series]="series()" [chart]="chart" />
    <button (click)="randomize()">Randomize</button>
  `,
})
export class AppComponent {
  readonly series = signal<ApexAxisChartSeries>([
    { name: "series-1", data: [44, 55, 13, 33] },
  ]);

  readonly chart: ApexChart = { type: "bar", height: 350 };

  randomize() {
    this.series.set([{ name: "series-1", data: [23, 44, 1, 22] }]);
  }
}

Changing only series runs the cheap updateSeries() path: the chart animates in place and keeps the same instance. Changing any other option rebuilds the chart. If both change in the same tick, the rebuild happens once.

Set [autoUpdateSeries]="false" to always rebuild instead of updating in place. That matters for mixed/combo charts where you change the type inside the series objects themselves.

Plain (non-signal) properties work too. Any bound input change is picked up, so [series]="mySeries" with a reassigned array behaves the same way.

All Options

Each input maps to the matching key of the ApexCharts config object. All of them are signal inputs:

Input	Type
`chart`	`ApexChart`
`series`	`ApexAxisChartSeries \| ApexNonAxisChartSeries`
`annotations`	`ApexAnnotations`
`colors`	`any[]`
`dataLabels`	`ApexDataLabels`
`stroke`	`ApexStroke`
`labels`	`string[]`
`legend`	`ApexLegend`
`markers`	`ApexMarkers`
`noData`	`ApexNoData`
`parsing`	`ApexParsing`
`fill`	`ApexFill`
`tooltip`	`ApexTooltip`
`plotOptions`	`ApexPlotOptions`
`responsive`	`ApexResponsive[]`
`xaxis`	`ApexXAxis`
`yaxis`	`ApexYAxis \| ApexYAxis[]`
`forecastDataPoints`	`ApexForecastDataPoints`
`grid`	`ApexGrid`
`states`	`ApexStates`
`title`	`ApexTitleSubtitle`
`subtitle`	`ApexTitleSubtitle`
`theme`	`ApexTheme`
`autoUpdateSeries`	`boolean` (default `true`)

Calling chart methods

Every ApexCharts method is proxied through the component, so you never touch the DOM. Get a reference with viewChild:

import { Component, viewChild } from "@angular/core";
import { ChartComponent } from "ng-apexcharts";

@Component({
  selector: "app-root",
  imports: [ChartComponent],
  template: `
    <apx-chart [series]="series" [chart]="chart" />
    <button (click)="toggle()">Toggle series</button>
  `,
})
export class AppComponent {
  private readonly chartRef = viewChild.required(ChartComponent);

  readonly chart = { type: "line" as const, height: 350 };
  readonly series = [{ name: "Revenue", data: [10, 41, 35, 51] }];

  toggle() {
    this.chartRef().toggleSeries("Revenue");
  }
}

The component also exposes chartInstance as a signal, so you can react to the underlying ApexCharts object declaratively:

readonly isRendered = computed(() => this.chartRef().chartInstance() !== null);

The chartReady output emits { chartObj } after each successful render.

Available methods: render, updateOptions, updateSeries, appendSeries, appendData, highlightSeries, toggleSeries, showSeries, hideSeries, resetSeries, zoomX, toggleDataPointSelection, destroy, setLocale, paper, addXaxisAnnotation, addYaxisAnnotation, addPointAnnotation, removeAnnotation, clearAnnotations, dataURI. See the methods reference for details.

Chart types and features outside the default bundle

<apx-chart> loads the default apexcharts bundle. Since 8.0 that bundle leaves out three chart types (unit, with waffle and beeswarm; sunburst; violin) and four features (drilldown, waterfall, dumbbell, streamgraph). Add a side-effect import for the one you use, in the component file or in main.ts:

import { Component } from "@angular/core";
import { ChartComponent, ApexAxisChartSeries, ApexChart } from "ng-apexcharts";
import "apexcharts/sunburst";

@Component({
  selector: "app-traffic-sunburst",
  imports: [ChartComponent],
  template: `<apx-chart [series]="series" [chart]="chart" />`,
})
export class TrafficSunburstComponent {
  readonly chart: ApexChart = { type: "sunburst", height: 400 };
  readonly series: ApexAxisChartSeries = [
    {
      data: [
        { x: "Mobile", y: 55, children: [{ x: "iOS", y: 30 }, { x: "Android", y: 25 }] },
        { x: "Desktop", y: 33, children: [{ x: "Windows", y: 20 }, { x: "macOS", y: 13 }] },
      ],
    },
  ];
}

A chart type is apexcharts/unit, apexcharts/sunburst or apexcharts/violin. A feature is apexcharts/features/drilldown, apexcharts/features/waterfall, apexcharts/features/dumbbell or apexcharts/features/streamgraph. Keep the features/ path for waterfall, dumbbell and streamgraph: apexcharts/waterfall is for the lean core and brings a second bar renderer. The import registers the type for every chart in the app, so one place is enough. Without it, the console names the line to add, and a chart whose type is missing draws nothing. import "apexcharts/full" instead registers every chart type and feature at once. The tree-shaking guide lists every add-on, including icicle, raincloud and the features that were opt-in before 8.0.

Reducing bundle size

Use <apx-chart-core> instead of <apx-chart> to start from apexcharts/core, the chart class alone, instead of the default bundle. For scale, the matching script files in 8.0.0 are 157,032 B gzipped for apexcharts.core.min.js against 263,188 B for the default apexcharts.min.js (zlib at its default level). Then register only the chart types you need:

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

import { Component } from "@angular/core";
import { ChartCoreComponent } from "ng-apexcharts";

@Component({
  selector: "app-lean-chart",
  imports: [ChartCoreComponent],
  template: `<apx-chart-core [chart]="chart" [series]="series" />`,
})
export class LeanChartComponent {
  readonly chart = { type: "line" as const, height: 350 };
  readonly series = [{ name: "Revenue", data: [10, 41, 35, 51] }];
}

All inputs, outputs, and methods are identical to <apx-chart>. On the core, violin and raincloud also need apexcharts/bar, the renderer they draw through, and a boxPlot or violin built from raw observations needs apexcharts/features/stats. Waterfall, dumbbell and streamgraph take apexcharts/waterfall, apexcharts/dumbbell and apexcharts/streamgraph there, which bring the renderer each one draws on. The tree-shaking guide has the rest.

Server-Side Rendering

ng-apexcharts supports Angular SSR through two companion components. <apx-chart-ssr> renders a static SVG on the server, and <apx-chart-hydrate> attaches interactivity on the client. Place them in the same container:

import { Component } from "@angular/core";
import { ChartSSRComponent, ChartHydrateComponent, ApexOptions } from "ng-apexcharts";

@Component({
  selector: "app-ssr-chart",
  imports: [ChartSSRComponent, ChartHydrateComponent],
  template: `
    <apx-chart-ssr [options]="chartOptions" [width]="800" [height]="400" />
    <apx-chart-hydrate [clientOptions]="{ chart: { animations: { enabled: true } } }" />
  `,
})
export class SsrChartComponent {
  readonly chartOptions: ApexOptions = {
    chart: { type: "line" },
    series: [{ name: "Revenue", data: [10, 41, 35, 51] }],
  };
}

The options input takes a single ApexOptions object with all chart config combined. clientOptions is merged during hydration and is useful for options that only make sense in the browser, such as animations and tooltips.

A chart type or feature outside the default bundle needs its import here too: <apx-chart-ssr> renders through apexcharts/ssr, and <apx-chart-hydrate> builds the chart again in the browser. An import "apexcharts/sunburst" in the component file covers both, because Angular compiles that file into the server and the browser bundles alike. On the server, a missing chart type makes the render reject instead of drawing an empty chart, with an error that names the import.

For full control, inject ChartSSRService and render to a string yourself:

const html = await chartSSRService.renderToHTML(options, { width: 800, height: 400 });
const svg = await chartSSRService.renderToString(options, { width: 800, height: 400 });

Using NgModules

New code should import the standalone components directly. If your application is still NgModule-based, NgApexchartsModule re-exports all four components:

import { NgApexchartsModule } from "ng-apexcharts";

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

It exists only for backwards compatibility. Do not pass it to importProvidersFrom() in a standalone application: it declares no providers, so that has no effect and leaves <apx-chart> unresolved in your templates.

More Charts Examples?

There are several other charts that can be created by changing a couple of options. More than 80+ samples can be found on the Angular Chart Demos page.

Need Advanced Chart Features?

We partnered with Infragistics to give you access to their comprehensive Angular Charts Library. It includes 65+ real-time charts, including Pie Chart, Line Chart, Bar Chart, Donut Chart, Treemap, and even Stock Charts, that provide the same features as the ones you come across with Google Finance and Yahoo Finance Charts. Using Ignite UI for Angular charts when working on your project, you can apply deep analytics, render millions of data points in milliseconds, and provide great UX to end-users.

With many useful Angular chart features like animations, annotations, axis gridlines, chart overlays, chart highlighting, and others, you can build better data-driven, mission-critical web and mobile apps in Angular. The Angular Charts component by Infragistics delivers stunning dashboards and enables you to craft interactive charts and graphs that are designed for speed, functionality, and seamless performance on every modern browser.