0
# Styling & Theming
1

2
Comprehensive styling and theming system for customizing the visual appearance of ngx-charts components using CSS, color schemes, and built-in theme options.
3

4
## Capabilities
5

6
### Color Schemes
7

8
Pre-built color palettes optimized for data visualization with accessibility considerations.
9

10
```typescript { .api }
11
// Color scheme interface
12
interface Color {
13
  name: string;
14
  selectable: boolean;
15
  group: ScaleType;
16
  domain: string[];
17
}
18

19
// Available color schemes from colorSets
20
const colorSets: { [key: string]: Color } = {
21
  vivid: Color,
22
  natural: Color,
23
  cool: Color,
24
  fire: Color,
25
  solar: Color,
26
  air: Color,
27
  aqua: Color,
28
  flame: Color,
29
  ocean: Color,
30
  forest: Color,
31
  horizon: Color,
32
  neons: Color,
33
  picnic: Color,
34
  night: Color,
35
  nightLights: Color
36
};
37
```
38

39
**Color Scheme Usage:**
40

41
```typescript
42
import { Component } from '@angular/core';
43
import { colorSets } from '@swimlane/ngx-charts';
44

45
@Component({
46
  template: `
47
    <ngx-charts-bar-vertical
48
      [results]="data"
49
      [scheme]="colorScheme">
50
    </ngx-charts-bar-vertical>
51
  `
52
})
53
export class ThemedChartComponent {
54
  // Use predefined color scheme
55
  colorScheme = colorSets.vivid;
56
  
57
  // Or create custom color scheme
58
  customColorScheme = {
59
    name: 'customScheme',
60
    selectable: true,
61
    group: ScaleType.Ordinal,
62
    domain: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd']
63
  };
64
}
65
```
66

67
### Custom Colors
68

69
Override specific data series colors with custom color mappings.
70

71
```typescript { .api }
72
// Custom color configuration
73
@Input() customColors: any;
74

75
// Custom color array format
76
interface CustomColor {
77
  name: string;  // Data series name to match
78
  value: string; // Hex color value
79
}
80

81
// Example custom colors
82
const customColors: CustomColor[] = [
83
  { name: 'Series A', value: '#FF6B6B' },
84
  { name: 'Series B', value: '#4ECDC4' },
85
  { name: 'Series C', value: '#45B7D1' },
86
  { name: 'Series D', value: '#FFA07A' }
87
];
88
```
89

90
**Custom Colors Usage:**
91

92
```typescript
93
@Component({
94
  template: `
95
    <ngx-charts-line-chart
96
      [results]="data"
97
      [customColors]="customColors">
98
    </ngx-charts-line-chart>
99
  `
100
})
101
export class CustomColorComponent {
102
  customColors = [
103
    { name: 'Revenue', value: '#5AA454' },
104
    { name: 'Expenses', value: '#E44D25' },
105
    { name: 'Profit', value: '#CFC0BB' }
106
  ];
107
}
108
```
109

110
### CSS-Based Styling
111

112
Override component styles using CSS classes and CSS variables.
113

114
```typescript { .api }
115
// Chart components expose CSS classes for styling
116
// Common CSS classes across components:
117

118
.ngx-charts-outer {}          // Outer chart container
119
.ngx-charts-background {}     // Chart background
120
.ngx-charts-chart-area {}     // Main chart area
121
.ngx-charts-legend {}         // Legend container
122
.ngx-charts-axis {}           // Axis containers
123
.ngx-charts-grid-lines {}     // Grid line elements
124
.ngx-charts-tooltip {}        // Tooltip container
125
```
126

127
**CSS Styling Examples:**
128

129
```scss
130
// Global chart styling
131
.ngx-charts-outer {
132
  font-family: 'Roboto', sans-serif;
133
}
134

135
// Customize chart background
136
.ngx-charts-background {
137
  fill: #f8f9fa;
138
}
139

140
// Style grid lines
141
.ngx-charts-grid-lines line {
142
  stroke: #e9ecef;
143
  stroke-width: 1;
144
  stroke-dasharray: 2, 2;
145
}
146

147
// Customize axis text
148
.ngx-charts-axis text {
149
  font-size: 12px;
150
  fill: #6c757d;
151
}
152

153
// Style tooltips
154
.ngx-charts-tooltip {
155
  background: rgba(0, 0, 0, 0.8);
156
  border-radius: 4px;
157
  padding: 8px 12px;
158
  color: white;
159
  font-size: 12px;
160
}
161

162
// Bar chart specific styling
163
.ngx-charts-bar rect {
164
  cursor: pointer;
165
  transition: opacity 0.2s ease;
166
}
167

168
.ngx-charts-bar rect:hover {
169
  opacity: 0.8;
170
}
171

172
// Line chart specific styling
173
.ngx-charts-line {
174
  stroke-width: 2px;
175
  fill: none;
176
}
177

178
// Pie chart specific styling
179
.ngx-charts-pie-arc {
180
  cursor: pointer;
181
  transition: transform 0.2s ease;
182
}
183

184
.ngx-charts-pie-arc:hover {
185
  transform: scale(1.05);
186
}
187
```
188

189
### CSS Variables
190

191
Use CSS custom properties for dynamic theming.
192

193
```scss
194
/* Define CSS variables for theming */
195
:root {
196
  --chart-primary-color: #1f77b4;
197
  --chart-secondary-color: #ff7f0e;
198
  --chart-background: #ffffff;
199
  --chart-text-color: #333333;
200
  --chart-grid-color: #e0e0e0;
201
  --chart-border-radius: 4px;
202
  --chart-font-family: 'Inter', sans-serif;
203
}
204

205
/* Dark theme variables */
206
[data-theme='dark'] {
207
  --chart-primary-color: #64b5f6;
208
  --chart-secondary-color: #ffb74d;
209
  --chart-background: #1e1e1e;
210
  --chart-text-color: #ffffff;
211
  --chart-grid-color: #424242;
212
}
213

214
/* Apply variables to charts */
215
.ngx-charts-outer {
216
  font-family: var(--chart-font-family);
217
}
218

219
.ngx-charts-background {
220
  fill: var(--chart-background);
221
}
222

223
.ngx-charts-axis text {
224
  fill: var(--chart-text-color);
225
}
226

227
.ngx-charts-grid-lines line {
228
  stroke: var(--chart-grid-color);
229
}
230
```
231

232
### Gradient Effects
233

234
Apply gradient fills to chart elements for enhanced visual appeal.
235

236
```typescript { .api }
237
// Gradient configuration
238
@Input() gradient: boolean = false;
239

240
// When enabled, automatically generates gradients based on color scheme
241
// Gradients are applied to bars, areas, pie slices, and other filled elements
242
```
243

244
**Gradient Usage:**
245

246
```typescript
247
@Component({
248
  template: `
249
    <!-- Enable gradients on various chart types -->
250
    <ngx-charts-bar-vertical [gradient]="true"></ngx-charts-bar-vertical>
251
    <ngx-charts-area-chart [gradient]="true"></ngx-charts-area-chart>
252
    <ngx-charts-pie-chart [gradient]="true"></ngx-charts-pie-chart>
253
  `
254
})
255
export class GradientChartsComponent {}
256
```
257

258
### Animation Control
259

260
Configure animation behavior for smooth transitions and interactions.
261

262
```typescript { .api }
263
// Animation configuration
264
@Input() animations: boolean = true;
265

266
// Controls various animation types:
267
// - Entry animations (chart loading)
268
// - Update animations (data changes)
269
// - Hover animations (interaction states)
270
// - Transition animations (state changes)
271
```
272

273
**Animation Examples:**
274

275
```scss
276
/* Customize animation timing */
277
.ngx-charts-bar rect {
278
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
279
}
280

281
.ngx-charts-line {
282
  stroke-dasharray: 1000;
283
  stroke-dashoffset: 1000;
284
  animation: drawLine 2s ease-out forwards;
285
}
286

287
@keyframes drawLine {
288
  to {
289
    stroke-dashoffset: 0;
290
  }
291
}
292

293
/* Disable animations for reduced motion */
294
@media (prefers-reduced-motion: reduce) {
295
  .ngx-charts-outer * {
296
    animation: none !important;
297
    transition: none !important;
298
  }
299
}
300
```
301

302
## Advanced Theming
303

304
### Theme Composition
305

306
Create comprehensive themes by combining multiple styling approaches.
307

308
```typescript
309
// Theme service for centralized theme management
310
@Injectable({
311
  providedIn: 'root'
312
})
313
export class ChartThemeService {
314
  private currentTheme = new BehaviorSubject<ChartTheme>('light');
315
  
316
  getCurrentTheme(): Observable<ChartTheme> {
317
    return this.currentTheme.asObservable();
318
  }
319
  
320
  setTheme(theme: ChartTheme): void {
321
    this.currentTheme.next(theme);
322
    this.applyTheme(theme);
323
  }
324
  
325
  private applyTheme(theme: ChartTheme): void {
326
    const root = document.documentElement;
327
    const themeVars = this.getThemeVariables(theme);
328
    
329
    Object.entries(themeVars).forEach(([key, value]) => {
330
      root.style.setProperty(key, value);
331
    });
332
  }
333
  
334
  private getThemeVariables(theme: ChartTheme): Record<string, string> {
335
    const themes = {
336
      light: {
337
        '--chart-background': '#ffffff',
338
        '--chart-text-color': '#333333',
339
        '--chart-grid-color': '#e0e0e0',
340
        '--chart-primary': '#1f77b4',
341
        '--chart-secondary': '#ff7f0e'
342
      },
343
      dark: {
344
        '--chart-background': '#1e1e1e',
345
        '--chart-text-color': '#ffffff', 
346
        '--chart-grid-color': '#424242',
347
        '--chart-primary': '#64b5f6',
348
        '--chart-secondary': '#ffb74d'
349
      }
350
    };
351
    
352
    return themes[theme];
353
  }
354
}
355

356
type ChartTheme = 'light' | 'dark';
357
```
358

359
### Responsive Styling
360

361
Adapt chart styling based on screen size and container dimensions.
362

363
```scss
364
/* Mobile-first responsive design */
365
.ngx-charts-outer {
366
  font-size: 12px;
367
}
368

369
/* Tablet styles */
370
@media (min-width: 768px) {
371
  .ngx-charts-outer {
372
    font-size: 14px;
373
  }
374
  
375
  .ngx-charts-axis text {
376
    font-size: 12px;
377
  }
378
}
379

380
/* Desktop styles */
381
@media (min-width: 1024px) {
382
  .ngx-charts-outer {
383
    font-size: 16px;
384
  }
385
  
386
  .ngx-charts-axis text {
387
    font-size: 14px;
388
  }
389
  
390
  .ngx-charts-legend {
391
    font-size: 14px;
392
  }
393
}
394

395
/* Container query support */
396
@container (max-width: 400px) {
397
  .ngx-charts-legend {
398
    display: none; /* Hide legend in small containers */
399
  }
400
}
401
```
402

403
### Accessibility Theming
404

405
Ensure charts remain accessible across different themes and visual conditions.
406

407
```scss
408
/* High contrast theme */
409
@media (prefers-contrast: high) {
410
  .ngx-charts-background {
411
    fill: #000000;
412
  }
413
  
414
  .ngx-charts-axis text,
415
  .ngx-charts-legend text {
416
    fill: #ffffff;
417
    stroke: #ffffff;
418
    stroke-width: 0.5px;
419
  }
420
  
421
  .ngx-charts-grid-lines line {
422
    stroke: #ffffff;
423
    stroke-width: 2px;
424
  }
425
}
426

427
/* Focus indicators */
428
.ngx-charts-bar rect:focus,
429
.ngx-charts-pie-arc:focus {
430
  outline: 2px solid #4285f4;
431
  outline-offset: 2px;
432
}
433

434
/* Color blind friendly adjustments */
435
.color-blind-friendly {
436
  --chart-color-1: #1f77b4; /* Blue */
437
  --chart-color-2: #ff7f0e; /* Orange */
438
  --chart-color-3: #2ca02c; /* Green */
439
  --chart-color-4: #d62728; /* Red */
440
  --chart-color-5: #9467bd; /* Purple */
441
}
442
```
443

444
## Component-Specific Styling
445

446
### Legend Styling
447

448
```scss
449
.ngx-charts-legend {
450
  .legend-labels {
451
    font-size: 12px;
452
    line-height: 20px;
453
  }
454
  
455
  .legend-label-color {
456
    border-radius: 2px;
457
    margin-right: 8px;
458
  }
459
  
460
  .legend-title-text {
461
    font-weight: 600;
462
    font-size: 14px;
463
    margin-bottom: 8px;
464
  }
465
}
466
```
467

468
### Tooltip Styling
469

470
```scss
471
.ngx-charts-tooltip-content {
472
  background: rgba(0, 0, 0, 0.9);
473
  border-radius: 6px;
474
  padding: 12px 16px;
475
  color: white;
476
  font-size: 13px;
477
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
478
  
479
  .tooltip-label {
480
    font-weight: 600;
481
    margin-bottom: 4px;
482
  }
483
  
484
  .tooltip-val {
485
    font-size: 16px;
486
    font-weight: 400;
487
  }
488
}
489
```
490

491
## Performance Considerations
492

493
### Optimizing Animations
494

495
```scss
496
/* Use transform and opacity for better performance */
497
.ngx-charts-bar rect {
498
  will-change: transform, opacity;
499
  transform: translateZ(0); /* Enable hardware acceleration */
500
}
501

502
/* Reduce animation complexity on mobile */
503
@media (max-width: 768px) {
504
  .ngx-charts-outer {
505
    --animation-duration: 0.2s; /* Faster animations on mobile */
506
  }
507
}
508
```
509

510
### Efficient Color Schemes
511

512
```typescript
513
// Optimize color schemes for performance
514
const optimizedColorScheme = {
515
  name: 'performance',
516
  selectable: true,
517
  group: ScaleType.Ordinal,
518
  domain: [
519
    '#3498db', '#e74c3c', '#2ecc71', '#f39c12', 
520
    '#9b59b6', '#1abc9c', '#34495e', '#e67e22'
521
  ]
522
};
523

524
// Use fewer colors for better performance with large datasets
525
const minimalColors = {
526
  domain: ['#3498db', '#e74c3c', '#2ecc71']
527
};
528
```