Modern, Signals-first **Angular Charts** powered by Unovis.
npm install angular-chrtsangular-chrts)Modern, Signals-first Angular Charts powered by Unovis.
``bash`
npm install angular-chrts @unovis/ts
- 100% AOT Compatible: Works perfectly in Cloudflare Workers, Vercel Edge, and other edge runtimes
- No JIT Required: Built directly on @unovis/ts - no Angular-specific wrappers that require JIT compilation
- SSR Safe: Browser-specific features (document, window) are safely handled for server-side rendering
- Tree Shakable: Only import what you need - unused chart types won't bloat your bundle
- Signals-based: Leverages Angular's latest signals API for maximum performance
- Responsive: All charts adapt to their container size automatically
- Customizable: Full control over axes, tooltips, legends, and styling
- Typescript Ready: Robust types for all your data visualization needs
`typescript
import { LineChartComponent } from 'angular-chrts';
@Component({
standalone: true,
imports: [LineChartComponent],
template:
[categories]="categories"
xLabel="Time"
/>
`
})
export class MyDataComponent {
data = [/ indexable objects /];
categories = {
value: { name: 'Performance', color: 'blue' }
};
}
- LineChartComponentBarChartComponent
- AreaChartComponent
- DonutChartComponent
- BubbleChartComponent
- GanttChartComponent
-
This library uses @unovis/ts directly instead of @unovis/angular NgModules. This provides:
1. AOT-only compilation - No need for Angular's JIT compiler at runtime
2. Edge runtime support - Works in Cloudflare Workers and other edge environments
3. Smaller bundle size - Fewer dependencies and no Angular module overhead
4. Type-safe API - Full IDE autocomplete and type checking support
All chart components are standalone and use Angular's modern APIs:
- input() signals for reactive inputsoutput()
- for event emissionseffect()
- for reactive chart updatesisPlatformBrowser()
- checks for SSR safety
The library includes SSR-safe utilities for browser-specific features:
`typescript
import { isBrowser, getDocument, getWindow } from 'angular-chrts';
// Use in your components
if (isBrowser()) {
// Safe to access window and document
}
``
For full documentation and examples, visit angularcharts.com/docs.
For the website, visit angularcharts.com.
For the repository, visit the main GitHub page.