Options

Jump to bottom Edit New page

Filipe Tagliatti edited this page Jan 8, 2021 · 24 revisions

All Options:

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 wikipage of the different barcode types for more information.

Examples:

JsBarcode("#barcode", "123456789012", {
  format: "EAN13"
});

JsBarcode("#barcode", "123456789012", {
  format: "CODE39"
});

Result:

EAN13 CODE39

Width

default: 2

The width option is the width of a single bar.

Examples:

JsBarcode("#barcode", "Smallest width", {
  width: 1
});

JsBarcode("#barcode", "Wider barcode", {
  width: 3
});

Result:

Smallest width Wider barcode

Height

default: 100

The height of the barcode.

Examples:

JsBarcode("#barcode", "Tall barcode", {
  height: 150
});

JsBarcode("#barcode", "Short barcode", {
  height: 25
});

Result:

Tall barcode Short barcode

Text

default: undefined

Overide the text that is diplayed

Examples:

JsBarcode("#barcode", "Hello", {
  text: "Hi!"
});

Result:

Text example

Font Options

default: ""

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

Examples:

JsBarcode("#barcode", "Bold text", {
  fontOptions: "bold"
});

JsBarcode("#barcode", "Italic text", {
  fontOptions: "italic"
});

JsBarcode("#barcode", "Both options", {
  fontOptions: "bold italic"
});

Result:

Bold text Italic text Both options

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:

JsBarcode("#barcode", "Fantasy font", {
  font: "fantasy"
});

Result:

Fantasy font

Text Align

default: "center"

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

Examples:

JsBarcode("#barcode", "Left text", {
  textAlign: "left"
});

Result:

Left text

Text Position

default: "bottom"

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

Examples:

JsBarcode("#barcode", "Top text", {
  textPosition: "top"
});

Result:

Top text

Text Margin

default: 2

Set the space between the barcode and the text.

Examples:

JsBarcode("#barcode", "Text margin", {
  textMargin: 25
});

Result:

Text margin

Font Size

default: 20

Set the size of the text.

Examples:

JsBarcode("#barcode", "Bigger text", {
  fontSize: 40
});

Result:

Bigger text

Background

default: "#ffffff"

Set the background of the barcode.

Examples:

JsBarcode("#barcode", "Blue background", {
  background: "#ccffff"
});

Result:

Blue background

Line Color

default: "#000000"

Set the color of the bars and the text.

Examples:

JsBarcode("#barcode", "Red lines", {
  lineColor: "#990000"
});

Result:

Red lines

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:

JsBarcode("#barcode", "Bigger margins", {
  margin: 30,
  background: "#dddddd"
});

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

Result:

Bigger margins Left/Top margin

Flat

default: false

Only for EAN8/EAN13

Examples:

JsBarcode("#barcode", "29012343", {
  format: "EAN8",
  flat: false
});

JsBarcode("#barcode", "29012343", {
  format: "EAN8",
  flat: true
});

Result:

Flat/Non-Flat