How do I install and set up ngx-echarts in Angular?

Install ngx-echarts and echarts via npm or yarn, then import NgxEchartsModule or use the standalone directive with provideEchartsCore. The README provides step-by-step examples for both NgModule and standalone approaches, including necessary ECharts component imports.

ngx-echarts vs ng2-charts for Angular: which is better?

ngx-echarts is superior for complex, interactive visualizations using Apache ECharts' extensive features, while ng2-charts wraps Chart.js and is better for simpler, lightweight charting needs. Choose based on your project's requirement for advanced ECharts capabilities versus basic charts.

How to update chart data dynamically without full re-renders?

Use the [merge] input to pass partial updates to the chart options. This leverages ECharts' setOption method with notMerge=false, efficiently updating specific data points or styles as described in the API documentation.

Does ngx-echarts work with Angular Universal for server-side rendering?

It can work, but charts render client-side, so you may need to handle window object availability and dynamic imports in SSR setups. There's no built-in SSR support, requiring additional configuration to avoid hydration issues.

How to handle events like clicks or hovers on charts?

Bind to event outputs such as (chartClick) or (chartMouseOver) in your template, which provide the same params as ECharts events. The README lists all supported events with examples for integration into Angular components.

What's the best way to reduce bundle size with custom builds?

Use the treeshaking custom build by importing only necessary ECharts components, charts, and renderers. The README provides detailed code snippets for registering specific modules, which helps exclude unused ECharts features from the final bundle.

Open-Awesome

ngx-echarts

MITTypeScriptv22.0.0

An Angular directive for integrating Apache ECharts charts and visualizations into Angular applications.

Visit Website GitHub

1.2k stars202 forks0 contributors

What is ngx-echarts?

Ngx-echarts is an Angular directive that provides seamless integration for Apache ECharts, a powerful charting and visualization library. It enables Angular developers to easily create interactive, data-driven charts within their applications using a familiar Angular component model, solving the problem of embedding complex visualizations in Angular apps without direct DOM manipulation.

Target Audience

Angular developers (version 2.x and above) who need to incorporate interactive charts and data visualizations into their web applications, particularly those already using or preferring the Apache ECharts library.

Value Proposition

Developers choose ngx-echarts because it offers a lightweight, idiomatic Angular wrapper around the full ECharts API, supporting tree-shaking for optimized bundle sizes and providing Angular-specific features like event binding and dynamic updates through directives and inputs.

Overview

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)

Use Cases

Best For

Building Angular dashboards with complex, interactive data visualizations.
Integrating Apache ECharts into Angular applications with full API access and event handling.
Optimizing bundle size in Angular projects using ECharts via tree-shaking and custom builds.
Creating dynamically updating charts in Angular with efficient partial data updates via the [merge] input.
Developing localized or themed charting applications in Angular with ECharts support.
Adding ECharts GL 3D charting capabilities to Angular projects.

Not Ideal For

Projects using React, Vue, or other non-Angular frameworks where Angular-specific integration is irrelevant.
Applications requiring only simple static charts where lighter libraries like Chart.js with simpler Angular bindings would suffice.
Teams prioritizing server-side rendering with minimal client-side JavaScript, as ECharts is a heavy client-side library.
Developers unfamiliar with Apache ECharts who prefer a charting library with a more Angular-native API and less configuration.

Pros & Cons

Pros

Full ECharts API Access

Exposes the complete ECharts instance for direct method calls like resize() and showLoading(), allowing fine-grained control over chart behavior as documented in the API section.

Angular Idiomatic Integration

Uses Angular directives and event bindings, making it familiar for Angular developers with support for all ECharts events through outputs like (chartClick) and (chartInit).

Efficient Dynamic Updates

Includes a [merge] input for partial chart updates, optimizing performance by allowing data changes without re-rendering the entire chart, as highlighted in the directive properties.

Bundle Size Optimization

Supports tree-shaking and custom ECharts builds, enabling developers to include only necessary chart types and components, reducing bundle size as detailed in the custom build section.

Cons

Complex Setup for Custom Builds

Requires manual import of ECharts core and components for tree-shaking, which is verbose and error-prone, with separate instructions for legacy and modern builds adding confusion.

Dependency on ECharts Compatibility

Tightly coupled with Apache ECharts; updates or breaking changes in ECharts may necessitate ngx-echarts version updates, as seen in the lengthy compatibility list for different Angular versions.

Limited Abstraction Layer

Acts as a thin wrapper, so developers must learn both Angular and ECharts APIs, with no simplification of ECharts' complex configuration options, leading to a steeper learning curve.

Frequently Asked Questions

Related Projects

ngx-charts

:bar_chart: Declarative Charting Framework for Angular

Stars4,359

Forks1,167

Last commit11 days ago

unovis

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

Stars2,790

Forks67

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,439

Forks148

Last commit9 days ago

org-chart

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

Stars1,195

Forks373

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