Chord diagram generator in pure JS

A tiny javascript file (no jQuery or other dependencies) to draw basic guitar chord diagrams in HTML/CSS.

Showcase

The first diagram above should look like this:

Quick start

Download a JS file and a CSS stylesheet, drop them onto your page.
Call the chordDiagram.on_load() function when the page is loaded:

<div class="chord-diagram" data-shift="0" data-frets="133211" data-fingers="1342111"></div>

Tag Attributes

data-frets

List of the frets that must be pressed. 'X' means that the string should not be played.

data-shift

Allows to shift the reference of the fret.

data-fingers

Indicate which fingers should be used for which string.

JS Functions

The following functions can be used:

chordDiagram.replace_tags(container, classname, tagname)

container

optional
DOM-object to indicate where to search for chord-diagrams (default : document.body)

classname

optional
class of the tags to replace with diagrams (default : chord-diagram)

tagname

optional
tag of the objects to replace with diagrams (default : div)

chordDiagram.build_diagram(frets, fingers)

frets

mandatory
Array of the frets : '-1' means that the string should not be played.

fingers

optional
Array of the fingers in the order of the strings.
Barre will be displayed if one finder is used on the same fret.

Copyright and license

Based on the work of shkuznetsov, redistributed here under MIT license.