All Options

INFO

Thank you to all JsBarcode contributors for their work. And, in particular, many thanks to lindell for the groundwork!

Option	Default value	Type
format	"auto" (CODE128)	String
width	2	Number
height	100	Number
displayValue	true	Boolean
text	undefined	String
fontOptions	""	String
font	"monospace"	String
textAlign	"center"	String
textPosition	"bottom"	String
textMargin	2	Number
fontSize	20	Number
background	"#ffffff"	String (CSS color)
lineColor	"#000000"	String (CSS color)
margin	10	Number
marginTop	undefined	Number
marginBottom	undefined	Number
marginLeft	undefined	Number
marginRight	undefined	Number
flat	false	Boolean
valid	function(valid){}	Function

Format

default: "auto" (CODE128)

Select which barcode type to use. Please check the documentation of the specific barcode type for more information.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', '123456789012', {
  format: 'EAN13'
})

barcode('#barcode', '123456789012', {
  format: 'CODE39'
})

Result

Width

default: 2

The width option is the width of a single bar.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Smallest width', {
  width: 1
})

barcode('#barcode', 'Wider barcode', {
  width: 3
})

Result

Height

default: 100

The height of the barcode.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Tall barcode', {
  height: 150
})

barcode('#barcode', 'Short barcode', {
  height: 25
})

Result

Text

default: undefined

Override the text that is displayed

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Hello', {
  text: 'Hi!'
})

Result

Font Options

default: ""

With fontOptions you can add bold or italic text to the barcode.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Bold text', {
  fontOptions: 'bold'
})

barcode('#barcode', 'Italic text', {
  fontOptions: 'italic'
})

barcode('#barcode', 'Both options', {
  fontOptions: 'bold italic'
})

Result

Font

default: "monospace"

Define the font used for the text in the generated barcode. This can be any default font or a font defined by a @font-face rule.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Fantasy font', {
  font: 'fantasy'
})

Result

Text Align

default: "center"

Set the horizontal alignment of the text. Can be left / center / right.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Left text', {
  textAlign: 'left'
})

Result

Text Position

default: "bottom"

Set the vertical position of the text. Can be bottom / top.

Examples

barcode('#barcode', 'Top text', {
  textPosition: 'top'
})

Result

Text Margin

default: 2

Set the space between the barcode and the text.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Text margin', {
  textMargin: 25
})

Result

Font Size

default: 20

Set the size of the text.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Bigger text', {
  fontSize: 40
})

Result

Background

default: "#ffffff"

Set the background of the barcode.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Blue background', {
  background: '#ccffff'
})

Result

Line Color

default: "#000000"

Set the color of the bars and the text.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Red lines', {
  lineColor: '#990000'
})

Result

Margins

default: 10

Set the space margin around the barcode. If nothing else is set, all side will inherit the margins property but can be replaced if you want to set them separably.

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', 'Bigger margins', {
  margin: 30,
  background: '#dddddd'
})

barcode('#barcode', 'Left/Top margin', {
  marginLeft: 30,
  marginTop: 50,
  background: '#dddddd'
})

Result

Flat

default: false

Only for EAN8/EAN13

Examples

import { barcode } from '@stacksjs/qrx'

barcode('#barcode', '29012343', {
  format: 'EAN8',
  flat: false
})

barcode('#barcode', '29012343', {
  format: 'EAN8',
  flat: true
})

Result