<uke-chord> is a Polymer style 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.
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
0 indicating that the string should be played open.
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:
<uke-chord frets="2313" fingers="3214" name="F7" nut size="L" r=2 sub="3,♭7,R,5"></uke-chord>
Using the files directly
Download this repo using the 'Download' button and load the two files from the dist directory into your page's HEAD tag. The HTML file includes all dependencies.
<script src="dist/webcomponents-lite.min.js"></script> <link rel="import" href="dist/uke-chord.html">
bower install uke-chord
Link the webcomponents.js and
uke-chord element in the HEAD tag.
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="bower_components/uke-chord/uke-chord.html">
In the wild
Here are a few blog posts I wrote using this element