<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.
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>
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
2010. The diagram automatically places an open circle above any string marked with a
indicating that the string should be played open.
To add fingerings inside the bubbles use a
fingers attribute. Use the
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
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