repository·master·Indexed 26 days ago
https://github.com/swimlane/ngx-chartsA declarative charting framework for Angular that uses Angular for SVG rendering and animation, while utilizing D3 for mathematical calculations and scales. It supports a wide variety of chart types including Bar, Line, Area, Pie, Bubble, Donut, Gauge, Heatmap, Treemap, Number Cards, and Sankey Diagrams. The library is compatible with AoT and Universal, offering CSS-based styling and a set of building blocks (Legends, Axes, Shapes) for constructing custom visualizations.
ngx-charts is a declarative charting framework for Angular that uses Angular to render and animate SVG elements while leveraging D3 for mathematical functions, scales, axes, and shape generators. This approach enables support for Angular features like AoT and SSR.
The framework supports several advanced customization features for fine-tuning chart appearance and behavior, including responsive layouts, real-time data, and interactive elements.
### Customization
- Autoscaling
- Timeline Filtering
- Line Interpolation
- Configurable Axis Labels
- Legends (Labels & Gradient)
- Advanced Label Positioning
- Real-time data support
- Advanced Tooltips
- Responsive Layout
- Data point Event Handlers
- Works with ngUpgrade
- Enabling/Disabling animationsngx-charts provides a variety of built-in chart types for data visualization. Note that the Force Directed Graph is deprecated; users should use ngx-graph instead.
### Chart Types
- Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
- Line
- Area (Standard, Stacked, Normalized)
- Pie (Explodable, Grid, Custom legends)
- Donut
- Gauge
- Linear Gauge
- Force Directed Graph (deprecated - please use [ngx-graph](https://github.com/swimlane/ngx-graph) instead)
- Heatmap
- Treemap
- Number Cards
- Bubble/Scatter
- Vertical Box ChartBeyond the standard chart library, ngx-charts exports various components and helpers that serve as building blocks. You can import these directly into your Angular application to construct custom charts for use cases not covered by the pre-made library.
Available building blocks include:
Install the latest release of ngx-charts using npm to add it to your project dependencies. Before installing, check the package.json file in the repository to ensure compatibility with your current version of Angular.
npm install @swimlane/ngx-charts --savengx-charts module.To run the project's demonstration applications on your local machine, follow these steps:
npm i.npm start.http://localhost:9999.npm i
npm startngx-charts module. For detailed instructions and examples on building custom visualizations, refer to the Custom Charts documentation.When developing new charts or adapting existing ones from the ngx-charts source code, follow these guidelines:
ngx-charts demo project.src folder, ensure you rename your new components, their selectors, and their containing modules to avoid conflicts.ChartCommonModule, and then import that module into your application's module (e.g., app.module.ts).