Angular charting library for data visualization. Fork of ngx-charts with Angular 21+ support. Part of the ng-hub-ui component family.
npm install ng-hub-ui-charts

> Part of the ng-hub-ui family - A collection of standalone Angular component libraries
Declarative Charting Framework for Angular with Angular 21+ support!
ng-hub-ui-charts is a maintained fork of ngx-charts by Swimlane, updated for Angular 21+ compatibility. It's part of the ng-hub-ui family of component libraries, following the same design patterns and integration standards.
- Angular 21+ Support: Updated dependencies and compatibility with the latest Angular versions
- ng-hub-ui Integration: Follows ng-hub-ui standards for consistency across the component family
- Maintained: Regular updates and maintenance to support current Angular versions
The original and incredible work is by Swimlane. This fork maintains their excellent charting architecture while updating for modern Angular development.
The ng-hub-ui family provides a collection of standalone, reusable Angular components:
- ng-hub-ui-accordion - Accordion/collapsible components
- ng-hub-ui-action-sheet - Action sheet modal components
- ng-hub-ui-avatar - Avatar display components
- ng-hub-ui-board - Board/kanban layout components
- ng-hub-ui-breadcrumbs - Breadcrumb navigation components
- ng-hub-ui-calendar - Calendar and date picker components
- ng-hub-ui-charts - This library - Charting and data visualization
- ng-hub-ui-modal - Modal dialog components
- ng-hub-ui-paginable - Advanced tables and pagination components
- ng-hub-ui-portal - Portal and overlay components
- ng-hub-ui-stepper - Stepper/wizard components
- ng-hub-ui-utils - Utility functions and helpers
All libraries follow consistent patterns and work seamlessly together.
- Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
- Line
- Area (Standard, Stacked, Normalized)
- Pie (Explodable, Grid, Custom legends)
- Bubble
- Donut
- Gauge (Linear & Radial)
- Heatmap
- Treemap
- Number Cards
- Sankey Diagram
- Autoscaling
- Timeline Filtering
- Line Interpolation
- Configurable Axis Labels
- Legends (Labels & Gradient)
- Advanced Label Positioning
- Real-time data support
- Advanced Tooltips
- Data point Event Handlers
- Works with ngUpgrade
``bash`
npm install ng-hub-ui-charts
Import the chart component in your Angular module:
`typescript
import { NgxChartsModule } from 'ng-hub-ui-charts';
@NgModule({
imports: [NgxChartsModule]
})
export class AppModule { }
`
Use in your template:
`html`
[scheme]="colorScheme"
[results]="data"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
xAxisLabel="Country"
yAxisLabel="Sales">
- Live Demo: Coming soon with ng-hub-ui-charts
- Original ngx-charts Docs: https://swimlane.gitbook.io/ngx-charts
- Custom Charts: See custom-charts.md for building custom charts using ngx-charts components
- Angular 21+
- RxJS 7.8+
- TypeScript 5.9+
- Node.js 22.16+
ng-hub-ui-charts maintains full compatibility with the ngx-charts API. Charts are built using:
- Angular for rendering and animation of SVG elements
- D3 for mathematical functions, scales, axis and shape generators
- Signal-based reactivity for optimal change detection
This approach provides:
- Native Angular rendering with AoT compilation support
- Server-side rendering (SSR) compatibility
- Type safety and excellent IDE support
Leverage various ngx-charts components to build custom charts:
`typescript`
import {
ChartComponent,
AreaChartComponent,
AxisComponent
} from 'ng-hub-ui-charts';
Refer to custom-charts.md for detailed examples.
We welcome contributions! Whether you've found a bug, want to improve the documentation, or add new features, your help is appreciated.
1. Fork the repository
2. Clone your fork: git clone https://github.com/your-username/ng-hub-ui-charts.gityarn install
3. Install dependencies: git checkout -b feature/your-feature-name
4. Create a branch:
`bashStart development server
yarn start
$3
1. Code Style: Ensure your code follows the project's style (run
yarn fix` to auto-fix)Found a bug? Please create an issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Angular and library versions
- Follow the existing code patterns and structure
- Maintain compatibility with Angular 21+
- Update documentation for new features
- Ensure all tests pass before submitting PR
- Keep commits atomic and focused
Feel free to open a discussion or reach out through the repository issues.
MIT - See LICENSE for details
Original Project: ngx-charts by Swimlane
Swimlane is an automated cyber security operations platform. Learn more at swimlane.com
Current Maintainer: Carlos Morcillo
Package: ng-hub-ui-charts
Part of: ng-hub-ui family