Angular wrapper for ApexCharts to build interactive visualizations in Angular.
\n\n
\n\n## Built for modern Angular\n\nEverything here is standalone components and signals. There are no NgModules to\nregister and no decorators in the public API.\n\n- **Standalone components**: import `ChartComponent` where you use it.\n- **Signal inputs** (`input()`) and the **`output()`** API throughout. No\n `@Input()`, `@Output()`, `@ViewChild()`, or `ngOnChanges` anywhere.\n- **Zoneless ready**: runs under `provideZonelessChangeDetection()`, and the\n whole test suite is executed that way. ApexCharts' own rendering is kept\n outside the Angular zone so it never schedules change detection.\n- **`OnPush`** change detection, with chart creation scheduled via\n `afterNextRender` so layout is measured only once it is final.\n- **SSR + hydration** via `` / ``.\n- **Tree-shakeable** entry point via ``.\n- `chartInstance` is exposed as a **signal**, so you can `computed()` or\n `effect()` off the underlying ApexCharts object.\n\n## Angular Version Compatibility\n\n| ng-apexcharts Version | Angular Version | ApexCharts Version |\n| --------------------- | --------------- | -------------------- |\n| 3.1.x | 20+ | ^6.0.0 \\|\\| ^7.0.0 |\n| 3.0.x | 20+ | ^6.0.0 |\n| 2.5.x | 20+ | ^5.10.3 \\|\\| ^6.0.0 |\n| 2.4.x | 20+ | ^5.10.3 \\|\\| ^6.0.0 |\n| 2.3.x | 20+ | ^5.10.3 |\n| 2.2.x | 20+ | ^5.10.3 |\n| 2.0.x - 2.1.x | 20+ | ^5.3.2 |\n| 1.16.x - 1.17.x | 20.x | >=4.0.0 |\n| 1.14.x - 1.15.x | 19.x | >=4.0.0 |\n| 1.11.x - 1.13.x | 18.x | ^3.49.1 - ^4.0.0 |\n| 1.9.x - 1.10.x | 17.x | ^3.45.2 |\n| 1.7.x - 1.8.x | 13+ | ^3.40.0 - ^3.41.0 |\n| 1.6.x | 9.x - 12.x | ^3.31.0 |\n\n**Note:** For projects using older Angular versions (7-8), please use ng-apexcharts version 1.5.x or earlier.\n\nng-apexcharts 3.1+ works with ApexCharts 6 or 7. All option types (`ApexChart`,\n`ApexPlotOptions`, and the rest) are re-exported directly from the installed\n`apexcharts` package, so they always match its actual API\n([#504](https://github.com/apexcharts/ng-apexcharts/issues/504)).\n\nApexCharts 7 moved nine optional features out of its default bundle, so if you\nuse one, import it alongside ApexCharts (this is an ApexCharts-level change, not\nan ng-apexcharts API change):\n\n```ts\nimport 'apexcharts/features/trellis'\n```\n\nThe affected features are trellis, storyboard, perspectives, ink,\nrenderer-canvas, link, measure, history and context-menu. Each warns in the\nconsole when its config is set but the feature is absent. If you must\nstay on ApexCharts 5.x, use ng-apexcharts 2.5.x; note that apexcharts 5.16.0\nships broken drilldown type declarations\n([#493](https://github.com/apexcharts/ng-apexcharts/issues/493)).\n\n## Installation\n\n```bash\nng add ng-apexcharts\n```\n\nThat installs a compatible `apexcharts` release alongside the wrapper. Or do it\nby hand:\n\n```bash\nnpm install apexcharts ng-apexcharts --save\n```\n\nThere is nothing to add to `angular.json` and nothing to register in your\napplication config. The chart components load the ApexCharts bundle themselves\nthrough a dynamic `import()`, so no global script tag is needed.\n\n> **Upgrading?** If an older `ng add` put\n> `node_modules/apexcharts/dist/apexcharts.min.js` into the `scripts` array of\n> your `angular.json`, remove it. It is redundant, adds roughly 940 KB to every\n> build, and prevents `` from shrinking your bundle. Re-running\n> `ng add ng-apexcharts` cleans it up for you.\n\n## Usage\n\nImport the component and use it in your template:\n\n```ts\nimport { Component, signal } from \"@angular/core\";\nimport {\n ChartComponent,\n ApexAxisChartSeries,\n ApexChart,\n ApexXAxis,\n ApexTitleSubtitle,\n} from \"ng-apexcharts\";\n\n@Component({\n selector: \"app-revenue-chart\",\n imports: [ChartComponent],\n template: `\n \n `,\n})\nexport class RevenueChartComponent {\n readonly series = signal([\n { name: \"Revenue\", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] },\n ]);\n\n readonly chart: ApexChart = { type: \"bar\", height: 350 };\n readonly title: ApexTitleSubtitle = { text: \"Monthly Revenue\" };\n readonly xaxis: ApexXAxis = {\n categories: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\"],\n };\n}\n```\n\nYou need at least `series` and `chart` for a meaningful chart.\n\n### Updating the chart\n\nSet a new value on the signal (or change the bound input) and the chart updates\nitself. There is no need to call `updateSeries()` or `updateOptions()` manually:\n\n```ts\naddMonth() {\n this.series.update((current) => [\n { ...current[0], data: [...current[0].data, 120] },\n ]);\n}\n```\n\nChanging **only** `series` runs the cheap `updateSeries()` path, which animates\nin place and keeps the same chart instance. Changing any other option rebuilds\nthe chart. If both change together, the rebuild wins and happens once.\n\nSet `[autoUpdateSeries]=\"false\"` to opt out of the in-place series update and\nalways rebuild. This matters for mixed/combo charts where you change the `type`\ninside the series objects themselves.\n\n### Inputs\n\nEach input maps to the matching key of the ApexCharts config object. All are\nsignal inputs, so read them with `chart()` in your own code:\n\n| Input | Type |\n| -------------------- | --------------------------------------------- |\n| `chart` | `ApexChart` |\n| `series` | `ApexAxisChartSeries \\| ApexNonAxisChartSeries` |\n| `annotations` | `ApexAnnotations` |\n| `colors` | `any[]` |\n| `dataLabels` | `ApexDataLabels` |\n| `stroke` | `ApexStroke` |\n| `labels` | `string[]` |\n| `legend` | `ApexLegend` |\n| `markers` | `ApexMarkers` |\n| `noData` | `ApexNoData` |\n| `parsing` | `ApexParsing` |\n| `fill` | `ApexFill` |\n| `tooltip` | `ApexTooltip` |\n| `plotOptions` | `ApexPlotOptions` |\n| `responsive` | `ApexResponsive[]` |\n| `xaxis` | `ApexXAxis` |\n| `yaxis` | `ApexYAxis \\| ApexYAxis[]` |\n| `forecastDataPoints` | `ApexForecastDataPoints` |\n| `grid` | `ApexGrid` |\n| `states` | `ApexStates` |\n| `title` | `ApexTitleSubtitle` |\n| `subtitle` | `ApexTitleSubtitle` |\n| `theme` | `ApexTheme` |\n| `autoUpdateSeries` | `boolean` (default `true`) |\n\nSee the [ApexCharts docs](https://apexcharts.com/docs/) for what each option accepts.\n\n### Outputs and the chart instance\n\n| Member | Type | Description |\n| --------------- | ----------------------------------------- | ----------------------------------------------- |\n| `chartReady` | `output<{ chartObj: ApexCharts }>` | Emits after each successful render. |\n| `chartInstance` | `Signal` | The live ApexCharts object, or `null` before it exists. |\n\nBecause `chartInstance` is a signal, you can react to it declaratively:\n\n```ts\nimport { Component, computed, viewChild } from \"@angular/core\";\nimport { ChartComponent } from \"ng-apexcharts\";\n\n@Component({\n imports: [ChartComponent],\n template: ``,\n})\nexport class DashboardComponent {\n private readonly chartCmp = viewChild.required(ChartComponent);\n\n readonly isRendered = computed(() => this.chartCmp().chartInstance() !== null);\n}\n```\n\n### Calling ApexCharts methods\n\nEvery method is proxied through the component, so you never need to touch the\nDOM. Grab the component with `viewChild` and call it:\n\n```ts\nimport { Component, viewChild } from \"@angular/core\";\nimport { ChartComponent } from \"ng-apexcharts\";\n\n@Component({\n imports: [ChartComponent],\n template: `\n \n \n `,\n})\nexport class DashboardComponent {\n private readonly chart = viewChild.required(ChartComponent);\n\n toggle() {\n this.chart().toggleSeries(\"Revenue\");\n }\n}\n```\n\nAvailable methods: `render`, `updateOptions`, `updateSeries`, `appendSeries`,\n`appendData`, `highlightSeries`, `toggleSeries`, `showSeries`, `hideSeries`,\n`resetSeries`, `zoomX`, `toggleDataPointSelection`, `destroy`, `setLocale`,\n`paper`, `addXaxisAnnotation`, `addYaxisAnnotation`, `addPointAnnotation`,\n`removeAnnotation`, `clearAnnotations`, `dataURI`.\n\nReference for the underlying behaviour lives in the\n[ApexCharts methods docs](https://apexcharts.com/docs/methods/).\n\n### Calling methods without a component reference\n\nTo reach a chart from somewhere else entirely, use the global `exec()` and\ntarget the chart by its `chart.id`:\n\n```ts\nwindow.ApexCharts.exec(\"ng-chart-example\", \"updateSeries\", [\n { data: [40, 55, 65, 11, 23, 44, 54, 33] },\n]);\n```\n\nThe component assigns `window.ApexCharts` when it loads its bundle, so this\nworks without a global script tag. More on\n[`.exec()`](https://apexcharts.com/docs/methods/#exec).\n\n## Tree-Shaking (reduced bundle size)\n\nUse `` instead of `` to load the ApexCharts core\nbundle (~611 KB gzipped) instead of the full bundle (~942 KB). Register only the\nchart types you need with side-effect imports:\n\n```ts\nimport \"apexcharts/line\"; // line, area, scatter, bubble\nimport \"apexcharts/bar\"; // bar, column, rangeBar\nimport \"apexcharts/features/legend\"; // opt-in legend\nimport \"apexcharts/features/toolbar\"; // opt-in toolbar\n```\n\n```ts\nimport { ChartCoreComponent } from \"ng-apexcharts\";\n\n@Component({\n imports: [ChartCoreComponent],\n template: ``,\n})\nexport class LeanChartComponent {}\n```\n\nAll inputs, outputs, and methods are identical to ``.\n\n## Server-Side Rendering (SSR)\n\nng-apexcharts supports Angular SSR out of the box via two companion components.\n\n### ``: renders the chart on the server\n\n```ts\nimport { ChartSSRComponent } from \"ng-apexcharts\";\n\n@Component({\n imports: [ChartSSRComponent],\n template: ``,\n})\nexport class StaticChartComponent {}\n```\n\nThe `options` input accepts a single `ApexOptions` object (all chart config combined).\n\n### ``: attaches interactivity on the client\n\nPlace it immediately after `` in the same container:\n\n```html\n\n\n```\n\n`clientOptions` is merged by ApexCharts during hydration and can be used to\noverride options that only make sense in the browser (animations, tooltips, etc.).\n\n### `ChartSSRService`: server-side rendering service\n\nInjectable service for generating chart HTML or SVG strings on the server:\n\n```ts\nimport { ChartSSRService } from \"ng-apexcharts\";\n\nconst html = await chartSSRService.renderToHTML(options, { width: 800, height: 400 });\nconst svg = await chartSSRService.renderToString(options, { width: 800, height: 400 });\n```\n\n## Using NgModules\n\nNew code should import the standalone components directly. If your application\nis still NgModule-based, `NgApexchartsModule` re-exports all four components:\n\n```ts\nimport { NgApexchartsModule } from \"ng-apexcharts\";\n\n@NgModule({\n imports: [NgApexchartsModule],\n})\nexport class AppModule {}\n```\n\nIt exists only for backwards compatibility. Do not add it to a standalone\napplication's providers via `importProvidersFrom()`: it declares no providers,\nso that has no effect and leaves `` unresolved in your templates.\n\n## Examples\n\nMore than 80+ examples of all the chart types with sample code are on the\n[Angular Demos](https://apexcharts.com/angular-chart-demos/) page.\n","readmeFilename":"README.md"}
![](\"https://apexcharts.com/media/ng-apexcharts.png\")
\n![\"ver\"](\"https://img.shields.io/npm/v/ng-apexcharts.svg\")
\n![](\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\")
\n![](\"https://apexcharts.com/media/apexcharts-banner.png\")