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!

About This Fork

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.

$3

- 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

$3

The original and incredible work is by Swimlane. This fork maintains their excellent charting architecture while updating for modern Angular development.

About ng-hub-ui

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.

Features

$3

- 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

$3

- 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

Quick Start

$3

``bash
npm install ng-hub-ui-charts
`

$3

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
[view]="view"
[scheme]="colorScheme"
[results]="data"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
xAxisLabel="Country"
yAxisLabel="Sales">

`

Documentation

- 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

Requirements

- Angular 21+
- RxJS 7.8+
- TypeScript 5.9+
- Node.js 22.16+

API & Architecture

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

Custom Charts

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.

🤝 Contributing

We welcome contributions! Whether you've found a bug, want to improve the documentation, or add new features, your help is appreciated.

$3

1. Fork the repository
2. Clone your fork: git clone https://github.com/your-username/ng-hub-ui-charts.git
3. Install dependencies: yarn install
4. Create a branch: git checkout -b feature/your-feature-name

$3

`bash


Start development server

yarn start

Run tests

yarn test

Build the library

yarn build:lib:prod

Run linting and formatting checks

yarn lint
yarn prettier:ci
`

$3

1. Code Style: Ensure your code follows the project's style (run yarn fix` to auto-fix)
2. Tests: Add tests for new features or bug fixes
3. Commit: Use clear, descriptive commit messages
4. Push: Push to your fork
5. Create a Pull Request: Open a PR with a clear description of your changes

$3

Found a bug? Please create an issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Angular and library versions

$3

- 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

$3

Feel free to open a discussion or reach out through the repository issues.

License

MIT - See LICENSE for details

Credits & Attribution

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