0
# Configuration and Options
1

2
JsBarcode provides extensive customization options for barcode appearance, sizing, colors, fonts, and text positioning. All options can be passed as the third parameter to the main JsBarcode function.
3

4
## Capabilities
5

6
### Core Configuration Options
7

8
```javascript { .api }
9
const defaultOptions = {
10
  // Barcode dimensions
11
  width: 2,              // Width of a single bar in pixels
12
  height: 100,           // Height of the barcode in pixels
13

14
  // Format and detection
15
  format: "auto",        // Barcode format or "auto" for automatic detection
16

17
  // Text display
18
  displayValue: true,    // Show text below/above barcode
19
  font: "monospace",     // Font family for text
20
  fontOptions: "",       // Font style: "", "bold", "italic", "bold italic"
21
  fontSize: 20,          // Font size in pixels
22
  textAlign: "center",   // Text alignment: "left", "center", "right"
23
  textPosition: "bottom", // Text position: "top", "bottom"
24
  textMargin: 2,         // Space between barcode and text in pixels
25

26
  // Colors
27
  background: "#ffffff", // Background color (hex, rgb, rgba, named)
28
  lineColor: "#000000",  // Barcode line color (hex, rgb, rgba, named)
29

30
  // Margins and spacing
31
  margin: 10,            // All margins in pixels
32
  marginTop: undefined,  // Top margin override
33
  marginBottom: undefined, // Bottom margin override  
34
  marginLeft: undefined, // Left margin override
35
  marginRight: undefined, // Right margin override
36

37
  // Validation callback
38
  valid: function(valid) {} // Called with true/false validation result
39
};
40
```
41

42
### Barcode Dimensions
43

44
Control the physical size and proportions of generated barcodes.
45

46
```javascript { .api }
47
/**
48
 * Configure barcode dimensions
49
 */
50
JsBarcode(element, content, {
51
  width: 2,     // Width of individual bars (1-5 recommended)
52
  height: 100   // Overall barcode height in pixels
53
});
54
```
55

56
**Usage Examples:**
57

58
```javascript
59
// Small barcode for labels
60
JsBarcode("#small", "123456", {
61
  width: 1,
62
  height: 50
63
});
64

65
// Large barcode for posters
66
JsBarcode("#large", "123456", {
67
  width: 4,
68
  height: 200
69
});
70

71
// Standard retail size
72
JsBarcode("#retail", "123456789012", {
73
  format: "EAN13",
74
  width: 2,
75
  height: 100
76
});
77

78
// Compact industrial barcode
79
JsBarcode("#industrial", "PART123", {
80
  format: "CODE39",
81
  width: 1.5,
82
  height: 40
83
});
84
```
85

86
### Text and Font Configuration
87

88
Customize the appearance and positioning of text displayed with barcodes.
89

90
```javascript { .api }
91
/**
92
 * Configure text display and styling
93
 */
94
JsBarcode(element, content, {
95
  displayValue: true,        // Show/hide text
96
  font: "monospace",         // Font family
97
  fontOptions: "bold",       // Font weight/style
98
  fontSize: 20,              // Font size in pixels
99
  textAlign: "center",       // Horizontal alignment
100
  textPosition: "bottom",    // Vertical position
101
  textMargin: 2             // Space between barcode and text
102
});
103
```
104

105
**Font Options:**
106

107
```javascript
108
// Font families
109
JsBarcode("#barcode1", "123", { font: "Arial" });
110
JsBarcode("#barcode2", "123", { font: "serif" });
111
JsBarcode("#barcode3", "123", { font: "sans-serif" });
112
JsBarcode("#barcode4", "123", { font: "monospace" }); // Default
113

114
// Font styles
115
JsBarcode("#barcode5", "123", { fontOptions: "" });        // Normal
116
JsBarcode("#barcode6", "123", { fontOptions: "bold" });    // Bold
117
JsBarcode("#barcode7", "123", { fontOptions: "italic" });  // Italic
118
JsBarcode("#barcode8", "123", { fontOptions: "bold italic" }); // Both
119

120
// Font sizes
121
JsBarcode("#small-text", "123", { fontSize: 12 });  // Small
122
JsBarcode("#medium-text", "123", { fontSize: 16 }); // Medium
123
JsBarcode("#large-text", "123", { fontSize: 24 });  // Large
124
```
125

126
**Text Positioning:**
127

128
```javascript
129
// Horizontal alignment
130
JsBarcode("#left", "123456", { textAlign: "left" });
131
JsBarcode("#center", "123456", { textAlign: "center" }); // Default
132
JsBarcode("#right", "123456", { textAlign: "right" });
133

134
// Vertical position
135
JsBarcode("#bottom", "123456", { textPosition: "bottom" }); // Default
136
JsBarcode("#top", "123456", { textPosition: "top" });
137

138
// Text spacing
139
JsBarcode("#tight", "123456", { textMargin: 0 });  // No gap
140
JsBarcode("#loose", "123456", { textMargin: 10 }); // Large gap
141

142
// Hide text entirely
143
JsBarcode("#no-text", "123456", { displayValue: false });
144
```
145

146
### Color Customization
147

148
Configure barcode and background colors with full CSS color support.
149

150
```javascript { .api }
151
/**
152
 * Configure colors
153
 */
154
JsBarcode(element, content, {
155
  background: "#ffffff",  // Background color
156
  lineColor: "#000000"   // Barcode line color
157
});
158
```
159

160
**Color Format Support:**
161

162
```javascript
163
// Hexadecimal colors
164
JsBarcode("#hex", "123", { 
165
  background: "#ffffff",
166
  lineColor: "#000000" 
167
});
168

169
// RGB colors
170
JsBarcode("#rgb", "123", { 
171
  background: "rgb(255, 255, 255)",
172
  lineColor: "rgb(0, 0, 0)" 
173
});
174

175
// RGBA colors with transparency
176
JsBarcode("#rgba", "123", { 
177
  background: "rgba(255, 255, 255, 0.8)",
178
  lineColor: "rgba(0, 0, 0, 0.9)" 
179
});
180

181
// Named colors
182
JsBarcode("#named", "123", { 
183
  background: "white",
184
  lineColor: "black" 
185
});
186

187
// Brand colors
188
JsBarcode("#brand", "123", { 
189
  background: "#f8f9fa",
190
  lineColor: "#212529" 
191
});
192
```
193

194
**Color Themes:**
195

196
```javascript
197
// High contrast (accessibility)
198
JsBarcode("#high-contrast", "123", {
199
  background: "#ffffff",
200
  lineColor: "#000000"
201
});
202

203
// Inverted colors
204
JsBarcode("#inverted", "123", {
205
  background: "#000000", 
206
  lineColor: "#ffffff"
207
});
208

209
// Blue theme
210
JsBarcode("#blue", "123", {
211
  background: "#e3f2fd",
212
  lineColor: "#1976d2"
213
});
214

215
// Transparent background
216
JsBarcode("#transparent", "123", {
217
  background: "transparent",
218
  lineColor: "#333333"
219
});
220
```
221

222
### Margin and Spacing Control
223

224
Fine-tune whitespace around barcodes for different layout requirements.
225

226
```javascript { .api }
227
/**
228
 * Configure margins and spacing
229
 */
230
JsBarcode(element, content, {
231
  margin: 10,              // All margins (shorthand)
232
  marginTop: 15,          // Individual margin overrides
233
  marginBottom: 15,
234
  marginLeft: 20,
235
  marginRight: 20
236
});
237
```
238

239
**Margin Examples:**
240

241
```javascript
242
// Uniform margins
243
JsBarcode("#uniform", "123", { margin: 10 });
244

245
// No margins (tight layout)
246
JsBarcode("#tight", "123", { margin: 0 });
247

248
// Large margins (lots of whitespace)
249
JsBarcode("#spacious", "123", { margin: 30 });
250

251
// Custom margins for specific layouts
252
JsBarcode("#custom", "123", {
253
  marginTop: 5,     // Minimal top
254
  marginBottom: 20, // Extra bottom space
255
  marginLeft: 15,   // Standard sides
256
  marginRight: 15
257
});
258

259
// Asymmetric margins
260
JsBarcode("#asymmetric", "123", {
261
  margin: 10,       // Default for unspecified
262
  marginLeft: 0,    // Flush left
263
  marginRight: 30   // Extra right space
264
});
265
```
266

267
### Format Selection and Auto-Detection
268

269
Control barcode format selection and automatic format detection behavior.
270

271
```javascript { .api }
272
/**
273
 * Configure format selection
274
 */
275
JsBarcode(element, content, {
276
  format: "auto"    // Format name or "auto" for detection
277
});
278
```
279

280
**Format Options:**
281

282
```javascript
283
// Automatic detection (default)
284
JsBarcode("#auto", "123456789012", { format: "auto" });
285

286
// Specific formats
287
JsBarcode("#code128", "Hello123", { format: "CODE128" });
288
JsBarcode("#ean13", "123456789012", { format: "EAN13" });
289
JsBarcode("#code39", "PRODUCT123", { format: "CODE39" });
290

291
// Format with fallback handling
292
JsBarcode("#fallback", "invalid-data", {
293
  format: "EAN13",
294
  valid: function(isValid) {
295
    if (!isValid) {
296
      // Retry with auto-detection
297
      JsBarcode("#fallback", "invalid-data", { format: "auto" });
298
    }
299
  }
300
});
301
```
302

303
### Validation and Error Handling
304

305
Configure custom validation callbacks and error handling behavior.
306

307
```javascript { .api }
308
/**
309
 * Configure validation callback
310
 */
311
JsBarcode(element, content, {
312
  valid: function(isValid) {
313
    // Custom validation handling
314
    if (isValid) {
315
      console.log("Barcode generated successfully");
316
    } else {
317
      console.error("Invalid barcode data");
318
    }
319
  }
320
});
321
```
322

323
**Validation Examples:**
324

325
```javascript
326
// Success/failure logging
327
JsBarcode("#logging", "123456789012", {
328
  format: "EAN13",
329
  valid: function(isValid) {
330
    console.log(`EAN13 validation: ${isValid ? 'PASS' : 'FAIL'}`);
331
  }
332
});
333

334
// UI feedback
335
JsBarcode("#ui-feedback", "invalid", {
336
  format: "EAN13",  
337
  valid: function(isValid) {
338
    const statusEl = document.getElementById('status');
339
    if (isValid) {
340
      statusEl.textContent = 'Barcode generated';
341
      statusEl.className = 'success';
342
    } else {
343
      statusEl.textContent = 'Invalid barcode data';
344
      statusEl.className = 'error';
345
    }
346
  }
347
});
348

349
// Retry with different format
350
JsBarcode("#retry", "ABC123", {
351
  format: "EAN13",
352
  valid: function(isValid) {
353
    if (!isValid) {
354
      // EAN13 failed, try CODE39
355
      JsBarcode("#retry", "ABC123", { format: "CODE39" });
356
    }
357
  }
358
});
359
```
360

361
## Practical Configuration Examples
362

363
### Retail Product Labels
364

365
```javascript
366
// Standard retail barcode
367
JsBarcode("#retail-barcode", "501234567890", {
368
  format: "EAN13",
369
  width: 2,
370
  height: 100,
371
  displayValue: true,
372
  fontSize: 14,
373
  font: "Arial",
374
  textAlign: "center",
375
  background: "#ffffff",
376
  lineColor: "#000000",
377
  margin: 10
378
});
379
```
380

381
### Industrial Asset Tags
382

383
```javascript
384
// Compact industrial barcode
385
JsBarcode("#asset-tag", "ASSET-12345", {
386
  format: "CODE39",
387
  width: 1.5,
388
  height: 40,
389
  displayValue: true,
390
  fontSize: 8,
391
  font: "monospace",
392
  fontOptions: "bold",
393
  textPosition: "bottom",
394
  background: "#ffffff",
395
  lineColor: "#000000",
396
  margin: 3
397
});
398
```
399

400
### Shipping Labels
401

402
```javascript
403
// Large shipping barcode
404
JsBarcode("#shipping-label", "1234567890123456", {
405
  format: "ITF",
406
  width: 3,
407
  height: 120,
408
  displayValue: true,
409
  fontSize: 16,
410
  font: "sans-serif",
411
  fontOptions: "bold",
412
  textAlign: "center",
413
  background: "#ffffff",
414
  lineColor: "#000000",
415
  marginTop: 20,
416
  marginBottom: 20,
417
  marginLeft: 15,
418
  marginRight: 15
419
});
420
```
421

422
### Pharmacy Labels
423

424
```javascript
425
// Small pharmaceutical barcode
426
JsBarcode("#pharmacy-label", "54321", {
427
  format: "pharmacode",
428
  width: 4,
429
  height: 25,
430
  displayValue: false, // No text for pharmacode
431
  background: "#ffffff",
432
  lineColor: "#000000",
433
  margin: 2
434
});
435
```
436

437
### Responsive Barcodes
438

439
```javascript
440
// Responsive barcode sizing
441
function generateResponsiveBarcode(elementId, content) {
442
  const container = document.getElementById(elementId);
443
  const containerWidth = container.offsetWidth;
444
  
445
  // Calculate responsive dimensions
446
  const width = Math.max(1, Math.floor(containerWidth / 200));
447
  const height = Math.max(50, Math.floor(containerWidth / 4));
448
  const fontSize = Math.max(8, Math.floor(height / 5));
449
  
450
  JsBarcode(`#${elementId}`, content, {
451
    format: "CODE128",
452
    width: width,
453
    height: height,
454
    fontSize: fontSize,
455
    margin: Math.floor(width * 5)
456
  });
457
}
458

459
// Usage
460
generateResponsiveBarcode("responsive-barcode", "RESPONSIVE123");
461
```
462

463
### Theme-Based Configuration
464

465
```javascript
466
// Dark theme
467
const darkTheme = {
468
  background: "#2d3748",
469
  lineColor: "#ffffff",
470
  // Text would be white on dark background
471
};
472

473
// Light theme  
474
const lightTheme = {
475
  background: "#ffffff",
476
  lineColor: "#000000",
477
};
478

479
// Apply theme
480
JsBarcode("#themed-barcode", "THEME123", {
481
  format: "CODE39",
482
  width: 2,
483
  height: 80,
484
  ...darkTheme
485
});
486
```