How do I dynamically update chart data in ng-apexcharts?

Bind the series data to a reactive property in your Angular component; when the data changes, the chart updates automatically. For manual control, use exposed methods like updateSeries via ViewChild reference.

ng-apexcharts vs Angular Chart.js wrapper: which is better?

ng-apexcharts is ideal for interactive, feature-rich charts with reactive updates and ApexCharts' extensive options, while Chart.js wrappers might be lighter for basic static charts. Consider your need for interactivity versus bundle size.

Does ng-apexcharts work with the latest Angular versions like Ivy?

Yes, it supports Angular 20+ with Ivy, but always check the version compatibility table in the README to ensure alignment with your specific Angular version to avoid issues.

How to reduce bundle size with ng-apexcharts?

Use the component instead of and import only necessary chart types via side-effect imports (e.g., 'apexcharts/line'), which tree-shakes unused code from ApexCharts.

Can I use ng-apexcharts for server-side rendering with Angular Universal?

Yes, it provides to render charts on the server and for client-side interactivity, along with ChartSSRService for generating HTML or SVG strings server-side.

Why isn't my ng-apexcharts chart updating when data changes?

Ensure autoUpdateSeries is set to true (default) and that data changes trigger Angular's change detection. For mixed or combo charts, set autoUpdateSeries to false to prevent full rerenders.

Open-Awesome

ng-apexcharts

NOASSERTIONTypeScriptv2.4.0

An Angular wrapper component for ApexCharts to build interactive visualizations in Angular 7+ applications.

GitHub

356 stars89 forks0 contributors

What is ng-apexcharts?

ng-apexcharts is an Angular wrapper library for ApexCharts.js that enables developers to seamlessly integrate interactive and responsive charts into Angular applications. It provides a simple component-based API that bridges Angular's reactive data flow with the powerful charting capabilities of ApexCharts, making chart integration feel native to the Angular ecosystem.

Target Audience

Angular developers (version 7 and above) who need to embed interactive data visualizations, such as dashboards, analytics interfaces, or reporting tools, within their applications.

Value Proposition

Developers choose ng-apexcharts because it offers a fully integrated Angular experience with automatic reactive updates, TypeScript support, and access to all ApexCharts features, while also providing optimizations like tree-shaking and built-in server-side rendering support for Angular Universal.

Overview

ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.

Use Cases

Best For

Building Angular dashboards and analytics interfaces with real-time data updates.
Angular applications requiring server-side rendering (SSR) for charts using Angular Universal.
Projects where bundle size optimization is critical, using the tree-shakable core component.
Angular developers who need programmatic control over charts via exposed ApexCharts methods.
Teams using Angular CLI who want quick setup via schematics for chart integration.
Creating accessible and interactive visualizations in Angular with comprehensive configuration options.

Not Ideal For

Applications built with frameworks other than Angular (e.g., React or Vue.js)
Projects with strict bundle size constraints where even tree-shaken charts (~611 KB) are too heavy
Teams preferring pure Angular-native charting libraries without external JavaScript dependencies
Simple static charting needs where basic SVG or CSS solutions would suffice without interactive overhead

Pros & Cons

Pros

Native Angular Integration

Provides a component-based API with full TypeScript support and Angular CLI schematics, making setup feel native and reducing boilerplate for Angular developers.

Reactive Data Binding

Charts automatically update and re-render when bound data or configuration properties change, seamlessly integrating with Angular's change detection for real-time visualizations.

Comprehensive Feature Access

Exposes all ApexCharts configuration options and core methods through the component, allowing full programmatic control without direct DOM manipulation.

Bundle Size Optimization

Offers a tree-shakable core component (<apx-chart-core>) that reduces bundle size by importing only needed chart types, addressing performance concerns in production builds.

Built-in SSR Support

Includes dedicated components (<apx-chart-ssr>, <apx-chart-hydrate>) and a service for Angular Universal, enabling server-side rendering with client-side hydration out of the box.

Cons

Significant Bundle Size

Even with tree-shaking, the core ApexCharts library is around 611 KB gzipped, which can impact application load times, especially on mobile or low-bandwidth connections.

Complex SSR Setup

Server-side rendering requires using multiple components and a service, adding complexity compared to simpler charting solutions that might offer more straightforward SSR.

Version Dependency Management

Tightly coupled to specific Angular and ApexCharts versions, as shown in the compatibility table, which can lead to upgrade challenges and potential breaking changes.

Frequently Asked Questions

Related Projects

ngx-charts

:bar_chart: Declarative Charting Framework for Angular

Stars4,354

Forks1,165

Last commit12 days ago

unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript

Stars2,785

Forks66

Last commit2 days ago

sequential-workflow-designer

Customizable no-code component for building flow-based programming applications or workflow automation. 0 external dependencies. Check out https://nocode-js.com

Stars1,432

Forks147

Last commit19 days ago

org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue

Stars1,190

Forks372

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub