<uke-chord> is a custom HTML element for a ukulele chord diagram using SVG graphics. It is tuning agnostic and can be used for any 4 string fretted instrument including the mandolin, tenor guitar, bass guitar, mountain dulcimer, cuatro and cavaquinho.

Install

Download this repo using the 'Download' button and load the two JS files into your page's HEAD tag. The webcomponents-lite.min.js file offers support for older browsers, so it is optional. The scripts can also be referenced directly from github:

<script src="//pianosnake.github.io/uke-chord/webcomponents-lite.min.js"></script>
<script src="//pianosnake.github.io/uke-chord/uke-chord.js"></script>

Use

Create a chord diagram by inserting a <uke-chord> element in your HTML. Set the frets attribute to the numeric value of the frets that should be played. For example, using a GCEA tuned ukulele an F chord would have frets set to 2010. The diagram automatically places an open circle above any string marked with a 0 indicating that the string should be played open.

<uke-chord frets="2010"></uke-chord>

To add fingerings inside the bubbles use a fingers attribute. Use the position attribute to show a position indicator.

<uke-chord frets="1323" fingers="1324" position=7></uke-chord>

To add a chord name above the diagram use a name attribute. To add text under each string, such as fingerings or root position indicators use a sub attribute with underscores for blanks. If using more than one letter per string use a comma as a separator. To show the nut set the position attribute to 0.

<uke-chord frets="2313" fingers="3214" sub="__R_" position=0 name="F7"></uke-chord>

Make the diagrams larger by passing a size="L" attribute. Show the root of the chord with a diamond head by passing an r attribute set to the string where the root of the chord is found. For example a root on the 3rd string would look like this: r=2. A root can be duplicated on two strings, so this parameter can contain several digits.

<uke-chord frets="2313" fingers="3214" name="F7" position=0 size="L" r=2 sub="3,♭7,R,5"></uke-chord>

In the wild

This component was built for a series of posts on ukulele playing

More examples

Progressions




Major chords

Minor chords

Dominant 7th chords

Minor 7th chords

Major 7th chords

Dominant 9th chords

6th chords

Minor 6th

Augmented