0
# Area Charts
1

2
Area chart components for visualizing cumulative data trends and part-to-whole relationships over continuous intervals with support for stacking and normalization.
3

4
## Capabilities
5

6
### Area Chart
7

8
Standard area chart for displaying data trends with filled areas below the line.
9

10
```typescript { .api }
11
@Component({ selector: 'ngx-charts-area-chart' })
12
export class AreaChartComponent extends BaseChartComponent {
13
  @Input() results: MultiSeries;
14
  @Input() legend: boolean = false;
15
  @Input() legendTitle: string = 'Legend';
16
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
17
  @Input() xAxis: boolean = false;
18
  @Input() yAxis: boolean = false;
19
  @Input() baseValue: any = 'auto';
20
  @Input() autoScale: boolean = false;
21
  @Input() showXAxisLabel: boolean;
22
  @Input() showYAxisLabel: boolean;
23
  @Input() xAxisLabel: string;
24
  @Input() yAxisLabel: string;
25
  @Input() timeline: boolean = false;
26
  @Input() gradient: boolean;
27
  @Input() showGridLines: boolean = true;
28
  @Input() curve: CurveFactory = curveLinear;
29
  @Input() activeEntries: any[] = [];
30
  @Input() schemeType: ScaleType;
31
  @Input() trimXAxisTicks: boolean = true;
32
  @Input() trimYAxisTicks: boolean = true;
33
  @Input() rotateXAxisTicks: boolean = true;
34
  @Input() maxXAxisTickLength: number = 16;
35
  @Input() maxYAxisTickLength: number = 16;
36
  @Input() xAxisTickFormatting: any;
37
  @Input() yAxisTickFormatting: any;
38
  @Input() xAxisTicks: any[];
39
  @Input() yAxisTicks: any[];
40
  @Input() roundDomains: boolean = false;
41
  @Input() tooltipDisabled: boolean = false;
42
  @Input() referenceLines: any[];
43
  @Input() showRefLines: boolean = false;
44
  @Input() showRefLabels: boolean = false;
45
  @Input() xScaleMin: any;
46
  @Input() xScaleMax: any;
47
  @Input() yScaleMin: number;
48
  @Input() yScaleMax: number;
49
  @Input() wrapTicks: boolean = false;
50
  
51
  @Output() activate: EventEmitter<any> = new EventEmitter();
52
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
53
  
54
  @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<any>;
55
  @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef<any>;
56
}
57
```
58

59
**Usage Examples:**
60

61
```typescript
62
import { Component } from '@angular/core';
63
import { curveCardinal } from 'd3-shape';
64

65
@Component({
66
  selector: 'app-area-chart',
67
  template: `
68
    <ngx-charts-area-chart
69
      [results]="areaData"
70
      [xAxis]="true"
71
      [yAxis]="true"
72
      [legend]="true"
73
      [showXAxisLabel]="true"
74
      [showYAxisLabel]="true"
75
      xAxisLabel="Time Period"
76
      yAxisLabel="Revenue ($)"
77
      [gradient]="true"
78
      [curve]="curveCardinal"
79
      [baseValue]="0"
80
      (select)="onSelect($event)">
81
    </ngx-charts-area-chart>
82
  `
83
})
84
export class AreaChartComponent {
85
  curveCardinal = curveCardinal;
86
  
87
  areaData = [
88
    {
89
      name: 'Product Revenue',
90
      series: [
91
        { name: 'Jan', value: 45000 },
92
        { name: 'Feb', value: 52000 },
93
        { name: 'Mar', value: 48000 },
94
        { name: 'Apr', value: 61000 },
95
        { name: 'May', value: 55000 },
96
        { name: 'Jun', value: 67000 }
97
      ]
98
    },
99
    {
100
      name: 'Service Revenue',
101
      series: [
102
        { name: 'Jan', value: 25000 },
103
        { name: 'Feb', value: 28000 },
104
        { name: 'Mar', value: 32000 },
105
        { name: 'Apr', value: 29000 },
106
        { name: 'May', value: 35000 },
107
        { name: 'Jun', value: 38000 }
108
      ]
109
    }
110
  ];
111

112
  onSelect(event: any): void {
113
    console.log('Selected area:', event);
114
  }
115
}
116
```
117

118
### Stacked Area Chart
119

120
Area chart where multiple series are stacked on top of each other to show cumulative values and individual contributions.
121

122
```typescript { .api }
123
@Component({ selector: 'ngx-charts-area-chart-stacked' })
124
export class AreaChartStackedComponent {
125
  @Input() results: MultiSeries;
126
  @Input() legend: boolean = false;
127
  @Input() legendTitle: string = 'Legend';
128
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
129
  @Input() xAxis: boolean = false;
130
  @Input() yAxis: boolean = false;
131
  @Input() showXAxisLabel: boolean = false;
132
  @Input() showYAxisLabel: boolean = false;
133
  @Input() xAxisLabel: string = '';
134
  @Input() yAxisLabel: string = '';
135
  @Input() timeline: boolean = false;
136
  @Input() gradient: boolean = false;
137
  @Input() showGridLines: boolean = true;
138
  @Input() curve: CurveFactory;
139
  @Input() activeEntries: any[] = [];
140
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
141
  @Input() trimXAxisTicks: boolean = true;
142
  @Input() trimYAxisTicks: boolean = true;
143
  @Input() rotateXAxisTicks: boolean = true;
144
  @Input() maxXAxisTickLength: number = 16;
145
  @Input() maxYAxisTickLength: number = 16;
146
  @Input() xAxisTickFormatting: any;
147
  @Input() yAxisTickFormatting: any;
148
  @Input() xAxisTicks: any[];
149
  @Input() yAxisTicks: any[];
150
  @Input() roundDomains: boolean = false;
151
  @Input() scheme: any;
152
  @Input() customColors: any;
153
  @Input() animations: boolean = true;
154
  @Input() autoScale: boolean = false;
155
  @Input() xScaleMin: any;
156
  @Input() xScaleMax: any;
157
  @Input() yScaleMin: number;
158
  @Input() yScaleMax: number;
159
  @Input() tooltipDisabled: boolean = false;
160
  @Input() tooltipTemplate: TemplateRef<any>;
161
  @Input() seriesTooltipTemplate: TemplateRef<any>;
162
  @Input() ariaLabel: string = 'stacked area chart';
163
  
164
  @Output() activate: EventEmitter<any> = new EventEmitter();
165
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
166
  @Output() select: EventEmitter<any> = new EventEmitter();
167
}
168
```
169

170
**Stacked Area Usage:**
171

172
```typescript
173
@Component({
174
  template: `
175
    <ngx-charts-area-chart-stacked
176
      [results]="stackedData"
177
      [xAxis]="true"
178
      [yAxis]="true"
179
      [legend]="true"
180
      [gradient]="true"
181
      [timeline]="true">
182
    </ngx-charts-area-chart-stacked>
183
  `
184
})
185
export class StackedAreaComponent {
186
  stackedData = [
187
    {
188
      name: 'Desktop',
189
      series: [
190
        { name: 'Q1', value: 73000 },
191
        { name: 'Q2', value: 89000 },
192
        { name: 'Q3', value: 92000 },
193
        { name: 'Q4', value: 105000 }
194
      ]
195
    },
196
    {
197
      name: 'Mobile',
198
      series: [
199
        { name: 'Q1', value: 42000 },
200
        { name: 'Q2', value: 55000 },
201
        { name: 'Q3', value: 61000 },
202
        { name: 'Q4', value: 78000 }
203
      ]
204
    },
205
    {
206
      name: 'Tablet',
207
      series: [
208
        { name: 'Q1', value: 15000 },
209
        { name: 'Q2', value: 18000 },
210
        { name: 'Q3', value: 22000 },
211
        { name: 'Q4', value: 28000 }
212
      ]
213
    }
214
  ];
215
}
216
```
217

218
### Normalized Area Chart
219

220
Stacked area chart normalized to 100% to show proportional relationships over time.
221

222
```typescript { .api }
223
@Component({ selector: 'ngx-charts-area-chart-normalized' })
224
export class AreaChartNormalizedComponent {
225
  @Input() results: MultiSeries;
226
  @Input() legend: boolean = false;
227
  @Input() legendTitle: string = 'Legend';
228
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
229
  @Input() xAxis: boolean = false;
230
  @Input() yAxis: boolean = false;
231
  @Input() showXAxisLabel: boolean = false;
232
  @Input() showYAxisLabel: boolean = false;
233
  @Input() xAxisLabel: string = '';
234
  @Input() yAxisLabel: string = '';
235
  @Input() timeline: boolean = false;
236
  @Input() gradient: boolean = false;
237
  @Input() showGridLines: boolean = true;
238
  @Input() curve: CurveFactory;
239
  @Input() activeEntries: any[] = [];
240
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
241
  @Input() trimXAxisTicks: boolean = true;
242
  @Input() trimYAxisTicks: boolean = true;
243
  @Input() rotateXAxisTicks: boolean = true;
244
  @Input() maxXAxisTickLength: number = 16;
245
  @Input() maxYAxisTickLength: number = 16;
246
  @Input() xAxisTickFormatting: any;
247
  @Input() yAxisTickFormatting: any;
248
  @Input() xAxisTicks: any[];
249
  @Input() yAxisTicks: any[];
250
  @Input() roundDomains: boolean = false;
251
  @Input() scheme: any;
252
  @Input() customColors: any;
253
  @Input() animations: boolean = true;
254
  @Input() autoScale: boolean = false;
255
  @Input() xScaleMin: any;
256
  @Input() xScaleMax: any;
257
  @Input() tooltipDisabled: boolean = false;
258
  @Input() tooltipTemplate: TemplateRef<any>;
259
  @Input() seriesTooltipTemplate: TemplateRef<any>;
260
  @Input() ariaLabel: string = 'normalized area chart';
261
  
262
  @Output() activate: EventEmitter<any> = new EventEmitter();
263
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
264
  @Output() select: EventEmitter<any> = new EventEmitter();
265
}
266
```
267

268
### Base Value Configuration
269

270
Control the baseline of area charts for custom area filling behavior.
271

272
```typescript { .api }
273
// Base value options
274
@Input() baseValue: any = 'auto'; // 'auto', number, or Date
275

276
// Base value types
277
type BaseValueType = 'auto' | number | Date;
278

279
// Auto baseline calculation based on data range
280
// Number baseline for fixed baseline value  
281
// Date baseline for time-based charts
282
```
283

284
**Base Value Examples:**
285

286
```typescript
287
@Component({
288
  template: `
289
    <!-- Auto baseline (default) -->
290
    <ngx-charts-area-chart [baseValue]="'auto'"></ngx-charts-area-chart>
291
    
292
    <!-- Zero baseline -->
293
    <ngx-charts-area-chart [baseValue]="0"></ngx-charts-area-chart>
294
    
295
    <!-- Custom numeric baseline -->
296
    <ngx-charts-area-chart [baseValue]="50"></ngx-charts-area-chart>
297
    
298
    <!-- Date baseline for time series -->
299
    <ngx-charts-area-chart [baseValue]="baselineDate"></ngx-charts-area-chart>
300
  `
301
})
302
export class BaseValueComponent {
303
  baselineDate = new Date('2023-01-01');
304
}
305
```
306

307
## Supporting Components
308

309
```typescript { .api }
310
// Area series component for rendering individual area series
311
@Component({ selector: 'g[ngx-charts-area-series]' })
312
export class AreaSeriesComponent {
313
  @Input() data: Series;
314
  @Input() xScale: any;
315
  @Input() yScale: any;
316
  @Input() baseValue: any;
317
  @Input() colors: any;
318
  @Input() scaleType: ScaleType;
319
  @Input() stacked: boolean = false;
320
  @Input() normalized: boolean = false;
321
  @Input() curve: CurveFactory;
322
  @Input() activeEntries: any[];
323
  @Input() animations: boolean = true;
324
  @Input() gradient: boolean;
325
  
326
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
327
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
328
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
329
}
330

331
// Individual area component
332
@Component({ selector: 'g[ngx-charts-area]' })
333
export class AreaComponent {
334
  @Input() data: DataItem[];
335
  @Input() path: string;
336
  @Input() startingPath: string;
337
  @Input() fill: string;
338
  @Input() opacity: number = 1;
339
  @Input() startOpacity: number = 0.1;
340
  @Input() endOpacity: number = 1;
341
  @Input() gradient: boolean = false;
342
  @Input() animations: boolean = true;
343
  @Input() class: string;
344
  
345
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
346
}
347
```
348

349
## Advanced Features
350

351
### Timeline Integration
352

353
Area charts support timeline brush functionality for interactive zooming and panning.
354

355
```typescript { .api }
356
@Input() timeline: boolean = false;
357

358
// Timeline automatically appears below the main chart when enabled
359
// Provides brush selection for zooming into data ranges
360
```
361

362
### Range Fill Opacity
363

364
Control the opacity of range areas in area charts with min/max values.
365

366
```typescript { .api }
367
@Input() rangeFillOpacity: number = 0.15;
368

369
// Used when data includes min/max range values
370
// Creates confidence interval or error band visualization
371
```
372

373
### Gradient Effects
374

375
Apply gradient fills to area charts for enhanced visual appeal.
376

377
```typescript { .api }
378
@Input() gradient: boolean = false;
379

380
// Gradients are automatically generated based on the color scheme
381
// Creates smooth color transitions within area fills
382
```
383

384
## Data Structures
385

386
```typescript { .api }
387
// Area chart data with optional range values
388
interface AreaChartDataItem extends DataItem {
389
  d0?: number; // Baseline value for stacked areas
390
  d1?: number; // Top value for stacked areas
391
  min?: number; // Minimum value for range areas
392
  max?: number; // Maximum value for range areas
393
}
394

395
interface AreaChartSeries extends Series {
396
  series: AreaChartDataItem[];
397
}
398

399
// Stacking types
400
enum D0Type {
401
  Positive = 'positive',
402
  Negative = 'negative'
403
}
404
```
405

406
## Error Handling
407

408
Area charts handle various data edge cases gracefully:
409

410
- **Missing Data Points**: Automatically interpolates or breaks area paths
411
- **Negative Values**: Supports negative value areas with proper baseline calculation
412
- **Empty Series**: Gracefully handles empty or null data series
413
- **Date Gaps**: Handles non-continuous time series data appropriately