0
# Line Charts
1

2
Line chart components for visualizing data trends and changes over continuous intervals with support for multiple series, curve interpolation, and timeline features.
3

4
## Capabilities
5

6
### Line Chart
7

8
Standard line chart for displaying data trends over time or continuous scales.
9

10
```typescript { .api }
11
@Component({ selector: 'ngx-charts-line-chart' })
12
export class LineChartComponent extends BaseChartComponent implements OnInit {
13
  @Input() results: MultiSeries;
14
  @Input() legend: boolean;
15
  @Input() legendTitle: string = 'Legend';
16
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
17
  @Input() xAxis: boolean;
18
  @Input() yAxis: boolean;
19
  @Input() showXAxisLabel: boolean;
20
  @Input() showYAxisLabel: boolean;
21
  @Input() xAxisLabel: string;
22
  @Input() yAxisLabel: string;
23
  @Input() autoScale: boolean;
24
  @Input() timeline: boolean;
25
  @Input() gradient: boolean;
26
  @Input() showGridLines: boolean = true;
27
  @Input() curve: any = curveLinear;
28
  @Input() activeEntries: any[] = [];
29
  @Input() schemeType: ScaleType;
30
  @Input() rangeFillOpacity: number;
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() showRefLines: boolean = false;
43
  @Input() referenceLines: any;
44
  @Input() showRefLabels: boolean = true;
45
  @Input() xScaleMin: number;
46
  @Input() xScaleMax: number;
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-line-chart',
67
  template: `
68
    <ngx-charts-line-chart
69
      [results]="lineData"
70
      [xAxis]="true"
71
      [yAxis]="true"
72
      [legend]="true"
73
      [showXAxisLabel]="true"
74
      [showYAxisLabel]="true"
75
      xAxisLabel="Time"
76
      yAxisLabel="Value"
77
      [curve]="curveCardinal"
78
      [showGridLines]="true"
79
      [timeline]="true"
80
      (select)="onSelect($event)"
81
      (activate)="onActivate($event)">
82
    </ngx-charts-line-chart>
83
  `
84
})
85
export class LineChartComponent {
86
  curveCardinal = curveCardinal;
87
  
88
  lineData = [
89
    {
90
      name: 'Series A',
91
      series: [
92
        { name: new Date('2023-01-01'), value: 25 },
93
        { name: new Date('2023-02-01'), value: 30 },
94
        { name: new Date('2023-03-01'), value: 28 },
95
        { name: new Date('2023-04-01'), value: 35 },
96
        { name: new Date('2023-05-01'), value: 32 }
97
      ]
98
    },
99
    {
100
      name: 'Series B',
101
      series: [
102
        { name: new Date('2023-01-01'), value: 20 },
103
        { name: new Date('2023-02-01'), value: 25 },
104
        { name: new Date('2023-03-01'), value: 30 },
105
        { name: new Date('2023-04-01'), value: 28 },
106
        { name: new Date('2023-05-01'), value: 33 }
107
      ]
108
    }
109
  ];
110

111
  onSelect(event: any): void {
112
    console.log('Selected:', event);
113
  }
114

115
  onActivate(event: any): void {
116
    console.log('Activated:', event);
117
  }
118
}
119
```
120

121
### Timeline Feature
122

123
Interactive timeline brush for zooming and panning through large datasets.
124

125
```typescript { .api }
126
// Timeline is enabled via the timeline input property
127
@Input() timeline: boolean = false;
128

129
// Timeline emits brush events for handling zoom/pan interactions
130
@Output() brushed: EventEmitter<any> = new EventEmitter();
131
```
132

133
**Timeline Usage:**
134

135
```typescript
136
@Component({
137
  template: `
138
    <ngx-charts-line-chart
139
      [results]="timeSeriesData"
140
      [timeline]="true"
141
      (brushed)="onBrushed($event)">
142
    </ngx-charts-line-chart>
143
  `
144
})
145
export class TimelineComponent {
146
  onBrushed(event: any): void {
147
    // Handle timeline brush events
148
    console.log('Brushed range:', event);
149
  }
150
}
151
```
152

153
### Curve Interpolation
154

155
Support for various D3 curve interpolation methods to control line smoothness.
156

157
```typescript { .api }
158
// Available curve types from D3
159
import {
160
  curveLinear,
161
  curveStepBefore,
162
  curveStepAfter,
163
  curveStep,
164
  curveBasis,
165
  curveCardinal,
166
  curveMonotoneX,
167
  curveCatmullRom
168
} from 'd3-shape';
169

170
type CurveFactory = any; // D3 curve factory function
171
```
172

173
**Curve Examples:**
174

175
```typescript
176
import { 
177
  curveLinear, 
178
  curveCardinal, 
179
  curveBasis, 
180
  curveMonotoneX 
181
} from 'd3-shape';
182

183
@Component({
184
  template: `
185
    <!-- Linear interpolation (default) -->
186
    <ngx-charts-line-chart [curve]="curveLinear"></ngx-charts-line-chart>
187
    
188
    <!-- Smooth cardinal curve -->
189
    <ngx-charts-line-chart [curve]="curveCardinal"></ngx-charts-line-chart>
190
    
191
    <!-- Basis spline curve -->
192
    <ngx-charts-line-chart [curve]="curveBasis"></ngx-charts-line-chart>
193
    
194
    <!-- Monotone curve (preserves monotonicity) -->
195
    <ngx-charts-line-chart [curve]="curveMonotoneX"></ngx-charts-line-chart>
196
  `
197
})
198
export class CurveExamplesComponent {
199
  curveLinear = curveLinear;
200
  curveCardinal = curveCardinal;
201
  curveBasis = curveBasis;
202
  curveMonotoneX = curveMonotoneX;
203
}
204
```
205

206
### Reference Lines
207

208
Overlay reference lines and labels for highlighting specific values or thresholds.
209

210
```typescript { .api }
211
interface ReferenceLine {
212
  name: string;
213
  value: number | Date;
214
  label?: string;
215
}
216

217
// Reference line inputs
218
@Input() referenceLines: ReferenceLine[] = [];
219
@Input() showRefLines: boolean = false;
220
@Input() showRefLabels: boolean = true;
221
```
222

223
**Reference Line Usage:**
224

225
```typescript
226
@Component({
227
  template: `
228
    <ngx-charts-line-chart
229
      [results]="data"
230
      [referenceLines]="referenceLines"
231
      [showRefLines]="true"
232
      [showRefLabels]="true">
233
    </ngx-charts-line-chart>
234
  `
235
})
236
export class ReferenceLineComponent {
237
  referenceLines = [
238
    { name: 'Target', value: 50, label: 'Goal' },
239
    { name: 'Warning', value: 75, label: 'Warning Level' },
240
    { name: 'Critical', value: 90, label: 'Critical' }
241
  ];
242
}
243
```
244

245
## Supporting Components
246

247
```typescript { .api }
248
// Line series component for rendering individual line series
249
@Component({ selector: 'g[ngx-charts-line-series]' })
250
export class LineSeriesComponent {
251
  @Input() data: Series;
252
  @Input() xScale: any;
253
  @Input() yScale: any;
254
  @Input() colors: any;
255
  @Input() scaleType: ScaleType;
256
  @Input() curve: CurveFactory;  
257
  @Input() activeEntries: any[];
258
  @Input() rangeFillOpacity: number;
259
  @Input() hasRange: boolean;
260
  @Input() animations: boolean;
261
  
262
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
263
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
264
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
265
}
266

267
// Individual line component
268
@Component({ selector: 'g[ngx-charts-line]' })
269
export class LineComponent {
270
  @Input() path: string;
271
  @Input() stroke: string;
272
  @Input() data: DataItem[];
273
  @Input() fill: string = 'none';
274
  @Input() animations: boolean = true;
275
  
276
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
277
}
278

279
// Circle/point component for data points
280
@Component({ selector: 'g[ngx-charts-circle]' })
281
export class CircleComponent {
282
  @Input() cx: number;
283
  @Input() cy: number;
284
  @Input() r: number;
285
  @Input() fill: string;
286
  @Input() stroke: string;
287
  @Input() data: DataItem;
288
  @Input() classNames: string[];
289
  @Input() circleOpacity: number;
290
  @Input() pointerEvents: string;
291
  
292
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
293
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
294
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
295
}
296

297
// Timeline brush component
298
@Component({ selector: 'g[ngx-charts-timeline]' })
299
export class TimelineComponent {
300
  @Input() results: any[];
301
  @Input() view: [number, number];
302
  @Input() height: number;
303
  @Input() scheme: any;
304
  @Input() customColors: any;
305
  @Input() legend: boolean;
306
  @Input() scaleType: ScaleType;
307
  @Input() autoScale: boolean;
308
  
309
  @Output() onDomainChange: EventEmitter<any> = new EventEmitter();
310
}
311
```
312

313
## Advanced Features
314

315
### Multi-axis Support
316

317
Line charts can display multiple Y-axes for series with different scales.
318

319
```typescript { .api }
320
// Multi-axis configuration
321
@Input() yAxisLeft: boolean = true;
322
@Input() yAxisRight: boolean = false;
323
@Input() leftAxisScaleType: ScaleType = ScaleType.Linear;
324
@Input() rightAxisScaleType: ScaleType = ScaleType.Linear;
325
```
326

327
### Range Areas
328

329
Display confidence intervals or ranges around line series.
330

331
```typescript { .api }
332
// Range data structure
333
interface RangeDataItem extends DataItem {
334
  min: number;
335
  max: number;
336
}
337

338
// Range fill opacity control
339
@Input() rangeFillOpacity: number = 0.15;
340
@Input() hasRange: boolean = false;
341
```
342

343
### Gradient Fills
344

345
Apply gradient effects to line strokes and fills.
346

347
```typescript { .api }
348
@Input() gradient: boolean = false;
349

350
// Gradient definitions are automatically generated based on color scheme
351
```
352

353
## Data Structures
354

355
```typescript { .api }
356
// Time series data example
357
interface TimeSeriesData {
358
  name: string;
359
  series: Array<{
360
    name: Date;
361
    value: number;
362
    min?: number; // For range charts
363
    max?: number; // For range charts
364
  }>;
365
}
366

367
// Numeric series data
368
interface NumericSeriesData {
369
  name: string;
370
  series: Array<{
371
    name: number;
372
    value: number;
373
  }>;
374
}
375
```