Agent skill · design visual · aiskillstore
delon-chart
@delon/chart skill - G2Plot enterprise charting components with @delon/chart. For ng-events construction site progress tracking system.
Why this skill is useful
Provides specific G2Plot charting components and usage patterns for Angular applications that the AI wouldn't reliably generate on its own.
What it needs
Requires @ant-design/charts, @delon/chart installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
@delon/chart - Enterprise Chart Components Trigger patterns: "chart", "graph", "visualization", "@delon/chart", "G2Plot", "G2" Overview @delon/chart provides enterprise-grade charting components built on G2Plot for data visualization in ng-alain applications. Package: @delon/chart@20.1.0 Dependencies: @ant-design/charts (G2Plot wrapper) Core Components 1. chart-card - Chart Card Container Features: Title, total, action, footer slots Integrated trend indicators Responsive layout Loading states 2. g2-bar - Bar Charts Options: height (number) - Chart height in pixels padding (number[]) - [top, right, bottom, left] color (string) - Bar color autoLabel (boolean) - Auto label positioning 3. g2-mini-bar - Mini Bar Charts (Sparkline) 4. g2-pie - Pie/Donut Charts Options: inner (number) - 0-1, 0=pie, >0=donut hasLegend (boolean) - Show legend subTitle (string) - Center subtitle total (string) - Center total display 5. g2-radar - Radar Charts 6. timeline - Timeline Charts 7. trend - Trend Indicator Flags: up down Colorful: true (green/red) false (gray) Real-World Examples Dashboard Stats with Charts Best Practices 1. Use Signals for Reactive Charts ✅ DO: ❌ DON'T: 2. Responsive Chart Heights ✅ DO: 3. Loading States ✅ DO: Performance Tips 1. Data Transformation: Transform data in computed signals, not in templates 2. Chart Reuse: Reuse chart components with different data props 3. Lazy Loading: Load chart module only when needed 4. Height Optimization: Use fixed heights for better performance 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/delon-chart