0
# Bar Charts
1

2
Comprehensive bar chart components for displaying categorical data with support for vertical, horizontal, stacked, grouped, and normalized configurations.
3

4
## Capabilities
5

6
### Vertical Bar Chart
7

8
Standard vertical bar chart for displaying categorical data with values extending upward.
9

10
```typescript { .api }
11
@Component({ selector: 'ngx-charts-bar-vertical' })
12
export class BarVerticalComponent extends BaseChartComponent {
13
  @Input() results: SingleSeries;
14
  @Input() legend: boolean = false;
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() tooltipDisabled: boolean = false;
24
  @Input() gradient: boolean;
25
  @Input() referenceLines: any[];
26
  @Input() showRefLines: boolean;
27
  @Input() showRefLabels: boolean;
28
  @Input() showGridLines: boolean = true;
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() barPadding: number = 8;
41
  @Input() roundDomains: boolean = false;
42
  @Input() roundEdges: boolean = true;
43
  @Input() yScaleMax: number;
44
  @Input() yScaleMin: number;
45
  @Input() showDataLabel: boolean = false;
46
  @Input() dataLabelFormatting: any;
47
  @Input() noBarWhenZero: boolean = true;
48
  @Input() wrapTicks: boolean = false;
49
  
50
  @Output() activate: EventEmitter<any> = new EventEmitter();
51
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
52
  
53
  @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<any>;
54
}
55
```
56

57
**Usage Examples:**
58

59
```typescript
60
import { Component } from '@angular/core';
61

62
@Component({
63
  selector: 'app-bar-chart',
64
  template: `
65
    <ngx-charts-bar-vertical
66
      [results]="singleData"
67
      [xAxis]="true"
68
      [yAxis]="true"
69
      [legend]="true"
70
      [showXAxisLabel]="true"
71
      [showYAxisLabel]="true"
72
      xAxisLabel="Categories"
73
      yAxisLabel="Sales ($)"
74
      [barPadding]="10"
75
      [showDataLabel]="true"
76
      (select)="onSelect($event)"
77
      (activate)="onActivate($event)">
78
    </ngx-charts-bar-vertical>
79
  `
80
})
81
export class BarChartComponent {
82
  singleData = [
83
    { name: 'Q1', value: 89000 },
84
    { name: 'Q2', value: 105000 },
85
    { name: 'Q3', value: 96000 },
86
    { name: 'Q4', value: 112000 }
87
  ];
88

89
  onSelect(event: any) {
90
    console.log('Selected:', event);
91
  }
92

93
  onActivate(event: any) {
94
    console.log('Activated:', event);
95
  }
96
}
97
```
98

99
### Horizontal Bar Chart
100

101
Horizontal bar chart with bars extending rightward, ideal for long category names.
102

103
```typescript { .api }
104
@Component({ selector: 'ngx-charts-bar-horizontal' })
105
export class BarHorizontalComponent {
106
  @Input() results: SingleSeries;
107
  @Input() legend: boolean = false;
108
  @Input() legendTitle: string = 'Legend';
109
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
110
  @Input() xAxis: boolean = false;
111
  @Input() yAxis: boolean = false;
112
  @Input() showXAxisLabel: boolean = false;
113
  @Input() showYAxisLabel: boolean = false;
114
  @Input() xAxisLabel: string = '';
115
  @Input() yAxisLabel: string = '';
116
  @Input() showGridLines: boolean = true;
117
  @Input() roundDomains: boolean = false;
118
  @Input() scheme: any;
119
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
120
  @Input() customColors: any;
121
  @Input() animations: boolean = true;
122
  @Input() barPadding: number = 8;
123
  @Input() groupPadding: number = 16;
124
  @Input() roundEdges: boolean = true;
125
  @Input() xScaleMax: number;
126
  @Input() xScaleMin: number = 0;
127
  @Input() showDataLabel: boolean = false;
128
  @Input() dataLabelFormatting: any;
129
  @Input() noBarWhenZero: boolean = true;
130
  @Input() gradient: boolean = false;
131
  @Input() activeEntries: any[] = [];
132
  @Input() tooltipDisabled: boolean = false;
133
  @Input() tooltipTemplate: TemplateRef<any>;
134
  @Input() ariaLabel: string = 'horizontal bar chart';
135
  
136
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
137
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
138
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
139
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
140
}
141
```
142

143
### Grouped Bar Charts (2D)
144

145
Multi-series bar charts displaying multiple data sets side-by-side for comparison.
146

147
```typescript { .api }
148
@Component({ selector: 'ngx-charts-bar-vertical-2d' })
149
export class BarVertical2DComponent {
150
  @Input() results: MultiSeries;
151
  @Input() legend: boolean = false;
152
  @Input() legendTitle: string = 'Legend';
153
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
154
  @Input() xAxis: boolean = false;
155
  @Input() yAxis: boolean = false;
156
  @Input() showXAxisLabel: boolean = false;
157
  @Input() showYAxisLabel: boolean = false;
158
  @Input() xAxisLabel: string = '';
159
  @Input() yAxisLabel: string = '';
160
  @Input() showGridLines: boolean = true;
161
  @Input() roundDomains: boolean = false;
162
  @Input() scheme: any;
163
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
164
  @Input() customColors: any;
165
  @Input() animations: boolean = true;
166
  @Input() barPadding: number = 8;
167
  @Input() groupPadding: number = 16;
168
  @Input() roundEdges: boolean = true;
169
  @Input() yScaleMax: number;
170
  @Input() yScaleMin: number = 0;
171
  @Input() showDataLabel: boolean = false;
172
  @Input() dataLabelFormatting: any;
173
  @Input() noBarWhenZero: boolean = true;
174
  @Input() gradient: boolean = false;
175
  @Input() activeEntries: any[] = [];
176
  @Input() tooltipDisabled: boolean = false;
177
  @Input() tooltipTemplate: TemplateRef<any>;
178
  @Input() ariaLabel: string = 'grouped bar chart';
179
  
180
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
181
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
182
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
183
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
184
}
185

186
@Component({ selector: 'ngx-charts-bar-horizontal-2d' })
187
export class BarHorizontal2DComponent {
188
  @Input() results: MultiSeries;
189
  // ... similar inputs to BarVertical2DComponent
190
}
191
```
192

193
**Usage Examples:**
194

195
```typescript
196
@Component({
197
  template: `
198
    <ngx-charts-bar-vertical-2d
199
      [results]="multiData"
200
      [xAxis]="true"
201
      [yAxis]="true"
202
      [legend]="true"
203
      [groupPadding]="20"
204
      [barPadding]="5">
205
    </ngx-charts-bar-vertical-2d>
206
  `
207
})
208
export class GroupedBarComponent {
209
  multiData = [
210
    {
211
      name: 'Product A',
212
      series: [
213
        { name: 'Q1', value: 25000 },
214
        { name: 'Q2', value: 30000 },
215
        { name: 'Q3', value: 28000 }
216
      ]
217
    },
218
    {
219
      name: 'Product B', 
220
      series: [
221
        { name: 'Q1', value: 32000 },
222
        { name: 'Q2', value: 27000 },
223
        { name: 'Q3', value: 35000 }
224
      ]
225
    }
226
  ];
227
}
228
```
229

230
### Stacked Bar Charts
231

232
Bar charts where multiple series are stacked on top of each other to show cumulative values.
233

234
```typescript { .api }
235
@Component({ selector: 'ngx-charts-bar-vertical-stacked' })
236
export class BarVerticalStackedComponent {
237
  @Input() results: MultiSeries;
238
  @Input() legend: boolean = false;
239
  @Input() legendTitle: string = 'Legend';
240
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
241
  @Input() xAxis: boolean = false;
242
  @Input() yAxis: boolean = false;
243
  @Input() showXAxisLabel: boolean = false;
244
  @Input() showYAxisLabel: boolean = false;
245
  @Input() xAxisLabel: string = '';
246
  @Input() yAxisLabel: string = '';
247
  @Input() showGridLines: boolean = true;
248
  @Input() roundDomains: boolean = false;
249
  @Input() scheme: any;
250
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
251
  @Input() customColors: any;
252
  @Input() animations: boolean = true;
253
  @Input() barPadding: number = 8;
254
  @Input() roundEdges: boolean = true;
255
  @Input() yScaleMax: number;
256
  @Input() yScaleMin: number = 0;
257
  @Input() showDataLabel: boolean = false;
258
  @Input() dataLabelFormatting: any;
259
  @Input() noBarWhenZero: boolean = true;
260
  @Input() gradient: boolean = false;
261
  @Input() activeEntries: any[] = [];
262
  @Input() tooltipDisabled: boolean = false;
263
  @Input() tooltipTemplate: TemplateRef<any>;
264
  @Input() ariaLabel: string = 'stacked bar chart';
265
  
266
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
267
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
268
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
269
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
270
}
271

272
@Component({ selector: 'ngx-charts-bar-horizontal-stacked' })
273
export class BarHorizontalStackedComponent {
274
  @Input() results: MultiSeries;
275
  // ... similar inputs to BarVerticalStackedComponent
276
}
277
```
278

279
### Normalized Bar Charts
280

281
Stacked bar charts normalized to 100% to show proportional relationships.
282

283
```typescript { .api }
284
@Component({ selector: 'ngx-charts-bar-vertical-normalized' })
285
export class BarVerticalNormalizedComponent {
286
  @Input() results: MultiSeries;
287
  @Input() legend: boolean = false;
288
  @Input() legendTitle: string = 'Legend';
289
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
290
  @Input() xAxis: boolean = false;
291
  @Input() yAxis: boolean = false;
292
  @Input() showXAxisLabel: boolean = false;
293
  @Input() showYAxisLabel: boolean = false;
294
  @Input() xAxisLabel: string = '';
295
  @Input() yAxisLabel: string = '';
296
  @Input() showGridLines: boolean = true;
297
  @Input() roundDomains: boolean = false;
298
  @Input() scheme: any;
299
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
300
  @Input() customColors: any;
301
  @Input() animations: boolean = true;
302
  @Input() barPadding: number = 8;
303
  @Input() roundEdges: boolean = true;
304
  @Input() showDataLabel: boolean = false;
305
  @Input() dataLabelFormatting: any;
306
  @Input() noBarWhenZero: boolean = true;
307
  @Input() gradient: boolean = false;
308
  @Input() activeEntries: any[] = [];
309
  @Input() tooltipDisabled: boolean = false;
310
  @Input() tooltipTemplate: TemplateRef<any>;
311
  @Input() ariaLabel: string = 'normalized bar chart';
312
  
313
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
314
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
315
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
316
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
317
}
318

319
@Component({ selector: 'ngx-charts-bar-horizontal-normalized' })
320
export class BarHorizontalNormalizedComponent {
321
  @Input() results: MultiSeries;
322
  // ... similar inputs to BarVerticalNormalizedComponent
323
}
324
```
325

326
## Data Label Formatting
327

328
```typescript { .api }
329
// Custom data label formatting function type
330
type DataLabelFormatting = (value: any) => string;
331

332
// Example formatters
333
const currencyFormatter: DataLabelFormatting = (value) => `$${value.toLocaleString()}`;
334
const percentFormatter: DataLabelFormatting = (value) => `${value}%`;
335
const shortenedFormatter: DataLabelFormatting = (value) => {
336
  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
337
  if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
338
  return value.toString();
339
};
340
```
341

342
## Supporting Components
343

344
```typescript { .api }
345
// Individual bar renderer
346
@Component({ selector: 'g[ngx-charts-bar]' })
347
export class BarComponent {
348
  @Input() fill: string;
349
  @Input() data: DataItem;
350
  @Input() width: number;
351
  @Input() height: number;
352
  @Input() x: number;
353
  @Input() y: number;
354
  @Input() orientation: BarOrientation;
355
  @Input() roundEdges: boolean;
356
  @Input() gradient: boolean;
357
  @Input() isActive: boolean;
358
  @Input() animations: boolean;
359
  @Input() ariaLabel: string;
360
  @Input() noBarWhenZero: boolean;
361
  
362
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
363
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
364
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
365
}
366

367
// Bar label renderer
368
@Component({ selector: 'g[ngx-charts-bar-label]' })
369
export class BarLabelComponent {
370
  @Input() value: any;
371
  @Input() valueFormatting: any;
372
  @Input() barX: number;
373
  @Input() barY: number;
374
  @Input() barWidth: number;
375
  @Input() barHeight: number;
376
  @Input() orientation: BarOrientation;
377
  
378
  @Output() dimensionsChanged: EventEmitter<any> = new EventEmitter();
379
}
380
```
381

382
## Enums and Types
383

384
```typescript { .api }
385
enum BarOrientation {
386
  Vertical = 'vertical',
387
  Horizontal = 'horizontal'
388
}
389

390
enum BarChartType {
391
  Standard = 'standard',
392
  Grouped = 'grouped',  
393
  Stacked = 'stacked',
394
  Normalized = 'normalized'
395
}
396
```