delon-chartlisted
Install: claude install-skill aiskillstore/marketplace
# @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
```typescript
import { ChartCardComponent } from '@delon/chart/chart-card';
<chart-card
[title]="'進度統計'"
[total]="totalTasks()"
[action]="action"
[footer]="footer"
>
<trend flag="up" style="margin-right: 16px;">
<span>週成長</span><span>12%</span>
</trend>
<trend flag="down">
<span>日成長</span><span>11%</span>
</trend>
</chart-card>
```
**Features**:
- Title, total, action, footer slots
- Integrated trend indicators
- Responsive layout
- Loading states
### 2. g2-bar - Bar Charts
```typescript
import { G2BarComponent } from '@delon/chart/bar';
@Component({
standalone: true,
imports: [G2BarComponent],
template: `
<g2-bar
[data]="barData()"
[height]="300"
[padding]="[20, 40, 50, 40]"
/>
`
})
export class TaskChartComponent {
barData = signal([
{ x: '待辦', y: 12 },
{ x: '進行中', y: 8 },
{ x: '已完成', y: 25 }
]);
}
```
**Options**:
- `height` (number) - Chart height in pixels
- `padding` (number[]) - [top, right, bottom, left]
- `color` (string) - Bar color
- `autoLabel` (boolean) - Auto label po