0
# Other Chart Types
1

2
Specialized chart components for specific data visualization needs including bubble charts, heat maps, tree maps, number cards, box plots, polar charts, and Sankey diagrams.
3

4
## Capabilities
5

6
### Bubble Chart
7

8
Scatter plot with bubble sizes representing a third dimension of data.
9

10
```typescript { .api }
11
@Component({ selector: 'ngx-charts-bubble-chart' })
12
export class BubbleChartComponent {
13
  @Input() results: BubbleChartSeries[];
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() showXAxisLabel: boolean = false;
20
  @Input() showYAxisLabel: boolean = false;
21
  @Input() xAxisLabel: string = '';
22
  @Input() yAxisLabel: string = '';
23
  @Input() trimXAxisTicks: boolean = true;
24
  @Input() trimYAxisTicks: boolean = true;
25
  @Input() rotateXAxisTicks: boolean = true;
26
  @Input() maxXAxisTickLength: number = 16;
27
  @Input() maxYAxisTickLength: number = 16;
28
  @Input() xAxisTickFormatting: any;
29
  @Input() yAxisTickFormatting: any;
30
  @Input() xAxisTicks: any[];
31
  @Input() yAxisTicks: any[];
32
  @Input() roundDomains: boolean = false;
33
  @Input() maxRadius: number = 10;
34
  @Input() minRadius: number = 3;
35
  @Input() showGridLines: boolean = true;
36
  @Input() autoScale: boolean = false;
37
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
38
  @Input() scheme: any;
39
  @Input() customColors: any;
40
  @Input() activeEntries: any[] = [];
41
  @Input() xScaleMin: any;
42
  @Input() xScaleMax: any;
43
  @Input() yScaleMin: number;
44
  @Input() yScaleMax: number;
45
  @Input() animations: boolean = true;
46
  @Input() tooltipDisabled: boolean = false;
47
  @Input() tooltipTemplate: TemplateRef<any>;
48
  @Input() ariaLabel: string = 'bubble chart';
49
  
50
  @Output() activate: EventEmitter<any> = new EventEmitter();
51
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
52
  @Output() select: EventEmitter<any> = new EventEmitter();
53
}
54
```
55

56
**Bubble Chart Usage:**
57

58
```typescript
59
@Component({
60
  template: `
61
    <ngx-charts-bubble-chart
62
      [results]="bubbleData"
63
      [xAxis]="true"
64
      [yAxis]="true"
65
      [legend]="true"
66
      [showXAxisLabel]="true"
67
      [showYAxisLabel]="true"
68
      xAxisLabel="Revenue ($)"
69
      yAxisLabel="Profit Margin (%)"
70
      [minRadius]="5"
71
      [maxRadius]="25">
72
    </ngx-charts-bubble-chart>
73
  `
74
})
75
export class BubbleComponent {
76
  bubbleData = [
77
    {
78
      name: 'Product Category A',
79
      series: [
80
        { name: 'Product 1', x: 95000, y: 15.2, r: 12 },
81
        { name: 'Product 2', x: 87000, y: 22.1, r: 8 },
82
        { name: 'Product 3', x: 110000, y: 18.7, r: 15 }
83
      ]
84
    },
85
    {
86
      name: 'Product Category B',
87
      series: [
88
        { name: 'Product 4', x: 73000, y: 28.3, r: 10 },
89
        { name: 'Product 5', x: 125000, y: 12.9, r: 18 }
90
      ]
91
    }
92
  ];
93
}
94
```
95

96
### Heat Map
97

98
Matrix visualization for displaying relationships between two categorical variables.
99

100
```typescript { .api }
101
@Component({ selector: 'ngx-charts-heat-map' })
102
export class HeatMapComponent {
103
  @Input() results: MultiSeries;
104
  @Input() legend: boolean = false;
105
  @Input() legendTitle: string = 'Legend';
106
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
107
  @Input() xAxis: boolean = false;
108
  @Input() yAxis: boolean = false;
109
  @Input() showXAxisLabel: boolean = false;
110
  @Input() showYAxisLabel: boolean = false;
111
  @Input() xAxisLabel: string = '';
112
  @Input() yAxisLabel: string = '';
113
  @Input() gradient: boolean = false;
114
  @Input() innerPadding: number = 8;
115
  @Input() trimXAxisTicks: boolean = true;
116
  @Input() trimYAxisTicks: boolean = true;
117
  @Input() rotateXAxisTicks: boolean = true;
118
  @Input() maxXAxisTickLength: number = 16;
119
  @Input() maxYAxisTickLength: number = 16;
120
  @Input() xAxisTickFormatting: any;
121
  @Input() yAxisTickFormatting: any;
122
  @Input() xAxisTicks: any[];
123
  @Input() yAxisTicks: any[];
124
  @Input() tooltipDisabled: boolean = false;
125
  @Input() tooltipTemplate: TemplateRef<any>;
126
  @Input() scheme: any;
127
  @Input() customColors: any;
128
  @Input() animations: boolean = true;
129
  @Input() ariaLabel: string = 'heat map';
130
  
131
  @Output() activate: EventEmitter<any> = new EventEmitter();
132
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
133
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
134
}
135
```
136

137
**Heat Map Usage:**
138

139
```typescript
140
@Component({
141
  template: `
142
    <ngx-charts-heat-map
143
      [results]="heatMapData"
144
      [xAxis]="true"
145
      [yAxis]="true"
146
      [legend]="true"
147
      [gradient]="true"
148
      [innerPadding]="4">
149
    </ngx-charts-heat-map>
150
  `
151
})
152
export class HeatMapComponent {
153
  heatMapData = [
154
    {
155
      name: 'Monday',
156
      series: [
157
        { name: '9 AM', value: 45 },
158
        { name: '10 AM', value: 67 },
159
        { name: '11 AM', value: 89 },
160
        { name: '12 PM', value: 102 }
161
      ]
162
    },
163
    {
164
      name: 'Tuesday',
165
      series: [
166
        { name: '9 AM', value: 52 },
167
        { name: '10 AM', value: 73 },
168
        { name: '11 AM', value: 95 },
169
        { name: '12 PM', value: 87 }
170
      ]
171
    }
172
  ];
173
}
174
```
175

176
### Tree Map
177

178
Hierarchical visualization displaying nested data as nested rectangles.
179

180
```typescript { .api }
181
@Component({ selector: 'ngx-charts-tree-map' })
182
export class TreeMapComponent {
183
  @Input() results: TreeMapDataItem[];
184
  @Input() tooltipDisabled: boolean = false;
185
  @Input() tooltipTemplate: TemplateRef<any>;
186
  @Input() valueFormatting: any;
187
  @Input() labelFormatting: any;
188
  @Input() gradient: boolean = false;
189
  @Input() scheme: any;
190
  @Input() customColors: any;
191
  @Input() animations: boolean = true;
192
  @Input() ariaLabel: string = 'tree map';
193
  
194
  @Output() select: EventEmitter<TreeMapDataItem> = new EventEmitter();
195
  @Output() activate: EventEmitter<TreeMapDataItem> = new EventEmitter();
196
  @Output() deactivate: EventEmitter<TreeMapDataItem> = new EventEmitter();
197
}
198
```
199

200
**Tree Map Usage:**
201

202
```typescript
203
@Component({
204
  template: `
205
    <ngx-charts-tree-map
206
      [results]="treeMapData"
207
      [gradient]="true"
208
      [valueFormatting]="valueFormatter"
209
      [labelFormatting]="labelFormatter">
210
    </ngx-charts-tree-map>
211
  `
212
})
213
export class TreeMapComponent {
214
  treeMapData = [
215
    {
216
      name: 'Technology',
217
      value: 500000,
218
      children: [
219
        { name: 'Software', value: 300000 },
220
        { name: 'Hardware', value: 200000 }
221
      ]
222
    },
223
    {
224
      name: 'Marketing',
225
      value: 350000,
226
      children: [
227
        { name: 'Digital', value: 200000 },
228
        { name: 'Traditional', value: 150000 }
229
      ]
230
    }
231
  ];
232

233
  valueFormatter = (value: number) => `$${value.toLocaleString()}`;
234
  labelFormatter = (name: string) => name.toUpperCase();
235
}
236
```
237

238
### Number Card
239

240
Grid of key performance indicators (KPIs) displaying important metrics.
241

242
```typescript { .api }
243
@Component({ selector: 'ngx-charts-number-card' })
244
export class NumberCardComponent {
245
  @Input() results: SingleSeries;
246
  @Input() cardColor: string = '#232837';
247
  @Input() bandColor: string = '#2F3646';
248
  @Input() emptyColor: string = 'rgba(255, 255, 255, 0.3)';
249
  @Input() innerPadding: number = 15;
250
  @Input() textColor: string = '#FFFFFF';
251
  @Input() valueFormatting: any;
252
  @Input() labelFormatting: any;
253
  @Input() designatedTotal: number;
254
  @Input() animations: boolean = true;
255
  @Input() ariaLabel: string = 'number card';
256
  
257
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
258
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
259
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
260
}
261
```
262

263
**Number Card Usage:**
264

265
```typescript
266
@Component({
267
  template: `
268
    <ngx-charts-number-card
269
      [results]="numberCardData"
270
      [cardColor]="'#1E88E5'"
271
      [textColor]="'#FFFFFF'"
272
      [valueFormatting]="valueFormatter"
273
      [innerPadding]="20">
274
    </ngx-charts-number-card>
275
  `
276
})
277
export class NumberCardComponent {
278
  numberCardData = [
279
    { name: 'Total Sales', value: 1250000 },
280
    { name: 'New Customers', value: 845 },
281
    { name: 'Conversion Rate', value: 3.2 },
282
    { name: 'Average Order', value: 247.50 }
283
  ];
284

285
  valueFormatter = (value: number) => {
286
    if (value > 1000000) return `$${(value / 1000000).toFixed(1)}M`;
287
    if (value > 1000) return `$${(value / 1000).toFixed(0)}K`;
288
    return `$${value.toFixed(2)}`;
289
  };
290
}
291
```
292

293
### Box Chart
294

295
Box and whisker plots for statistical data distribution visualization.
296

297
```typescript { .api }
298
@Component({ selector: 'ngx-charts-box-chart' })
299
export class BoxChartComponent extends BaseChartComponent {
300
  @Input() results: BoxChartMultiSeries;
301
  @Input() legend: boolean = false;
302
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
303
  @Input() legendTitle: string = 'Legend';
304
  @Input() legendOptionsConfig: LegendOptions;
305
  @Input() showGridLines: boolean = true;
306
  @Input() xAxis: boolean = true;
307
  @Input() yAxis: boolean = true;
308
  @Input() showXAxisLabel: boolean = true;
309
  @Input() showYAxisLabel: boolean = true;
310
  @Input() roundDomains: boolean = false;
311
  @Input() xAxisLabel: string;
312
  @Input() yAxisLabel: string;
313
  @Input() roundEdges: boolean = true;
314
  @Input() strokeColor: string = '#FFFFFF';
315
  @Input() strokeWidth: number = 2;
316
  @Input() tooltipDisabled: boolean = false;
317
  @Input() gradient: boolean;
318
  @Input() wrapTicks: boolean = false;
319
  
320
  @Output() select: EventEmitter<IBoxModel> = new EventEmitter();
321
  @Output() activate: EventEmitter<IBoxModel> = new EventEmitter();
322
  @Output() deactivate: EventEmitter<IBoxModel> = new EventEmitter();
323
  
324
  @ContentChild('tooltipTemplate', { static: false }) tooltipTemplate: TemplateRef<any>;
325
}
326
```
327

328
### Polar Chart
329

330
Circular/radar chart for multivariate data visualization.
331

332
```typescript { .api }
333
@Component({ selector: 'ngx-charts-polar-chart' })
334
export class PolarChartComponent {
335
  @Input() results: MultiSeries;
336
  @Input() legend: boolean = false;
337
  @Input() legendTitle: string = 'Legend';
338
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
339
  @Input() xAxis: boolean = false;
340
  @Input() yAxis: boolean = false;
341
  @Input() showXAxisLabel: boolean = false;
342
  @Input() showYAxisLabel: boolean = false;
343
  @Input() xAxisLabel: string = '';
344
  @Input() yAxisLabel: string = '';
345
  @Input() autoScale: boolean = false;
346
  @Input() showGridLines: boolean = true;
347
  @Input() curve: CurveFactory;
348
  @Input() activeEntries: any[] = [];
349
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
350
  @Input() rangeFillOpacity: number = 0.15;
351
  @Input() scheme: any;
352
  @Input() customColors: any;
353
  @Input() animations: boolean = true;
354
  @Input() tooltipDisabled: boolean = false;
355
  @Input() tooltipTemplate: TemplateRef<any>;
356
  @Input() ariaLabel: string = 'polar chart';
357
  
358
  @Output() activate: EventEmitter<any> = new EventEmitter();
359
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
360
  @Output() select: EventEmitter<any> = new EventEmitter();
361
}
362
```
363

364
### Sankey Diagram
365

366
Flow diagram showing the flow of data between different nodes.
367

368
```typescript { .api }
369
@Component({ selector: 'ngx-charts-sankey' })
370
export class SankeyComponent {
371
  @Input() results: SankeyData;
372
  @Input() nodeWidth: number = 15;
373
  @Input() nodePadding: number = 10;
374
  @Input() linkOpacity: number = 0.7;
375
  @Input() iterations: number = 32;
376
  @Input() gradient: boolean = false;
377
  @Input() scheme: any;
378
  @Input() customColors: any;
379
  @Input() animations: boolean = true;
380
  @Input() tooltipDisabled: boolean = false;
381
  @Input() tooltipTemplate: TemplateRef<any>;
382
  @Input() ariaLabel: string = 'sankey diagram';
383
  
384
  @Output() activate: EventEmitter<any> = new EventEmitter();
385
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
386
  @Output() select: EventEmitter<any> = new EventEmitter();
387
}
388
```
389

390
**Sankey Usage:**
391

392
```typescript
393
@Component({
394
  template: `
395
    <ngx-charts-sankey
396
      [results]="sankeyData"
397
      [nodeWidth]="20"
398
      [nodePadding]="15"
399
      [linkOpacity]="0.8"
400
      [gradient]="true">
401
    </ngx-charts-sankey>
402
  `
403
})
404
export class SankeyComponent {
405
  sankeyData = {
406
    nodes: [
407
      { id: 'Source A' },
408
      { id: 'Source B' },
409
      { id: 'Target 1' },
410
      { id: 'Target 2' }
411
    ],
412
    links: [
413
      { source: 'Source A', target: 'Target 1', value: 100 },
414
      { source: 'Source A', target: 'Target 2', value: 50 },
415
      { source: 'Source B', target: 'Target 1', value: 75 },
416
      { source: 'Source B', target: 'Target 2', value: 25 }
417
    ]
418
  };
419
}
420
```
421

422
## Data Structures
423

424
```typescript { .api }
425
// Bubble chart data structure
426
interface BubbleChartDataItem {
427
  name: StringOrNumberOrDate;
428
  x: number;
429
  y: number;
430
  r: number;
431
}
432

433
interface BubbleChartSeries {
434
  name: StringOrNumberOrDate;
435
  series: BubbleChartDataItem[];
436
}
437

438
// Tree map data structure
439
interface TreeMapDataItem {
440
  name: string;
441
  value?: number;
442
  children?: TreeMapDataItem[];
443
}
444

445
// Box chart data structure  
446
interface IBoxModel {
447
  value: number | Date;
448
  label: StringOrNumberOrDate;
449
  data: DataItem[];
450
  formattedLabel: string;
451
  height: number;
452
  width: number;
453
  x: number;
454
  y: number;
455
  roundEdges: boolean;
456
  lineCoordinates: IVector2D[];
457
  quartiles: number[];
458
  tooltipText?: string;
459
  ariaLabel?: string;
460
  color?: string;
461
  gradientStops?: Array<{ offset: number; color: string; opacity: number }>;
462
}
463

464
interface BoxChartSeries {
465
  name: StringOrNumberOrDate;
466
  series: DataItem[];
467
}
468

469
interface BoxChartMultiSeries extends Array<BoxChartSeries> {}
470

471
// Sankey diagram data structure
472
interface SankeyData {
473
  nodes: Array<{ id: string; label?: string }>;
474
  links: Array<{
475
    source: string;
476
    target: string;
477
    value: number;
478
  }>;
479
}
480

481
interface SankeyObject {
482
  source: any;
483
  target: any;
484
  value: number;
485
}
486

487
// Pie grid data structure
488
interface PieGridData {
489
  name: string;
490
  data: DataItem[];
491
}
492
```
493

494
## Advanced Configuration
495

496
### Bubble Chart Sizing
497

498
```typescript { .api }
499
// Bubble size configuration
500
@Input() minRadius: number = 3;   // Minimum bubble radius
501
@Input() maxRadius: number = 10;  // Maximum bubble radius
502

503
// Radius automatically scales based on 'r' values in data
504
// Values are normalized to fit within min/max radius range
505
```
506

507
### Heat Map Cell Spacing
508

509
```typescript { .api }
510
// Cell padding for heat maps
511
@Input() innerPadding: number = 8; // Space between heat map cells
512

513
// Controls visual separation between matrix cells
514
// Higher values create more white space between cells
515
```
516

517
### Tree Map Algorithms
518

519
Tree maps use D3's treemap layout algorithms for optimal space utilization:
520

521
- **Squarified**: Default algorithm optimizing for square aspect ratios
522
- **Binary**: Binary tree partitioning  
523
- **Slice**: Horizontal partitioning
524
- **Dice**: Vertical partitioning
525

526
### Sankey Configuration
527

528
```typescript { .api }
529
// Sankey layout configuration
530
@Input() nodeWidth: number = 15;      // Width of node rectangles
531
@Input() nodePadding: number = 10;    // Vertical space between nodes
532
@Input() linkOpacity: number = 0.7;   // Opacity of flow links
533
@Input() iterations: number = 32;     // Layout optimization iterations
534

535
// Higher iterations improve layout quality but increase computation time
536
```
537

538
## Use Cases
539

540
**Bubble Charts**: Ideal for three-dimensional data analysis, portfolio analysis, risk vs. return plotting
541

542
**Heat Maps**: Perfect for correlation matrices, time-based patterns, geographic data intensity  
543

544
**Tree Maps**: Excellent for hierarchical data, file system visualization, budget breakdowns
545

546
**Number Cards**: Essential for dashboards, KPI displays, summary metrics
547

548
**Box Charts**: Statistical analysis, data distribution comparison, outlier identification
549

550
**Polar Charts**: Multi-criteria analysis, performance radar, skill assessments
551

552
**Sankey Diagrams**: Process flows, energy flows, budget allocation, user journey mapping