Chord charts

Chord charts show where to place your fingers on the fretboard to play a given chord. Chordography enables you to quickly create and download chord charts for any fretted instrument in any tuning. Or, you can download the JavaScript source-code to generate graphics directly in your own web pages.

Chart Data

Title
Frets
Labels
Footer

graphic goes here

Attributes

Width	face
Height	face
Size	face

graphic goes here

Attributes

Width	rear
Height	rear
Size	rear

Core Properties

Barre
Bar height
Bar girth
Cell width
Cell height
Dot size
Font height
Font baseline
Min. span
Nut height
Padding
Scale
Style

Chart Layout

Charts have a conventional layout. Strings are drawn vertically, nut at the top, to distinguish chord charts from tablature.

• horizontal lines represent frets
• o in the header indicates an open string
• x indicates a mute, unfretted string
• dots show finger positons; optional labels suggest fingering
• the first fingered fret is numbered when the nut is not shown
• an optional footer shows the note sounded by each string

Chart Data

To create a new chart, first make changes to the four input fields: Title, Frets, Labels and Footer. Then click Update to generate the corresponding graphic and SVG attributes, and Save to download the current image.

Make six entries for a six-string guitar, four for a uke and so on

Frets is a comma separated list of fingered fret numbers, one entry per string. Enter 0 or space for an open string, 1 for fret 1 and so on. Anything else such as x or null implies a mute string.

Labels and Footer must be comma separated lists or null.

Labels appear inside the dots to indicate the preferred fingering. Labels for un-fretted strings are not accessed, but must be present e.g. as x, space or null

Footer is usually employed to show the note name or chord function for each string.

Null entries for Title and Footer means that these elements take up no space in the chart.

Alternative Controls

Holding down the Alt key whilst activating a button control triggers an alternative function:

Alt + Update opens up the Core Properties Editor (see below)
Alt + Save copies the graphic script to the clipboard

Tip: Take care when beautifying your image code. While this makes the code much easier to follow, added spaces or new lines can throw text elements off-centre. Use ugly code, as is, to display the graphic

Security Issues

SVG graphics have restricted access because SVG is more than just an image format. It is a complete XML document format that can include embedded scripts, such as SVG, CSS and importantly JavaScript.

Innocent looking images can contain embedded malware that executes as soon as it loads. Chordography images are a potential concern because they are rendered as inline markup. Nevertheless they should not fall foul of security restrictions as they are locally generated. In practice, this may depend on the O/S, the browser and which version is being used.

At the time of writing, Chrome and Opera are the most reliable Windows browsers,and Copy fails in Firefox

Attributes

width and height of the graphic in screen pixels refers to the scaled image, as displayed.

size in bytes varies with the graphic's content. Typically around 1k byte, the size is minimal even by SVG standards.

width and height attributes, collectively called the viewport, tell the browser how much screen real estate it should allocate to the graphic.

After downloading the image, you can edit these values in the code to scale the image. The preserveAspectRatio attribute, value "xMidYMid meet", ensures the undistorted image is centred in the viewport using padding as necessary. Or you can set an appropriate scale factor in the Core Properties (see below) before downloading.

viewBox defines the full-size canvas.

Tip: If you delete either the width or the height attribute, the browser will scale the viewBox to the other one. If you delete both, the browser will scale the viewBox to the width of the enclosing HTML element. Delete the viewBox attribute and no scaling will occur

Core properties

SVG images are versatile. They can be scaled without loss of quality, and colours, fonts, line and fill styles can all be controlled with CSS. Chordography goes a step further, as you can also modify the graphic's core properties.

To open up the Core Properties Editor, hold down the Alt key and click the Update button.

Default Core Properties

Property	Value	Description
barre	auto	Optional barre control
barHeight	9	Barre mean height (px)
barGirth	3	Barre central thickness (px)
cellWidth	20	Horizontal string spacing (px)
cellHeight	20	Vertical fret spacing (px)
dotSize	16	Diameter of fingered dots (px)
fontHeight	14	Font size (px)
fontBaseline	2	Font vertical position (px)
minSpan	4	Minimum vertical span (frets)
nutHeight	4	Nut thickness (px)
padding	7	Clear space around the chart (px)
scale	1	Scale factor (any positive number)
style	default	Pre-defined in-line style

Notes on default core properties

1. Pixel values (px) relate to the unscaled image
No labels normally means no barre is drawn. Label with spaces to override
2. A barre may be drawn if two or more fingered stages on the same fret have the same label. If one or more frets qualify, select "auto" to draw all of them, "single" to draw only the uppermost one (played with the index finger), or "none".
3. cellHeight and cellWidth affect the overall chart size and aspect ratio. Both should be greater than dotSize
4. fontHeight should be less than dotSize.
5. fontBaseline is used to position labels precisely in the centre of fingered dots, which may be necessary if different fonts or labels are used.
6. Set minSpan to 12 if you prefer to draw the whole fretboard
7. The scale factor adjusts the graphic's width and height attributes relative to the full size canvas dimensions defined by viewBox.
8. Inline styles make charts self-contained, usable without an external style sheet. Select "none" if you intend to use an external style sheet with your charts. The grey border and drop-shadow are not part of the inline style.

CSS

Chordography makes it easy to target styles, whether using inline styles or an external style sheet, as each major group and element is assigned a class.

Assigned element classes

group	sub group/element
chart	grid, text
grid	frets, strings, dots, nut, barre
text	title, header, labels, loFret, footer

loFret is the fret number shown alongside the first fingered fret

SVG style defaults are stroke: none and fill: black, so in the absence of any CSS, text and shapes will be solid black and grid lines fail to display. The following represents the minimum CSS needed to display a chord chart, equivalent to inline style "plain":

svg .grid {
   stroke: black;
   }
svg .labels {
   fill: white;
   }

The set of inline style examples available to the Core Properties Editor is defined in chart.data.js: see Roll your own: Downloads below

Roll your own

That's all you need to create and download chord charts in a variety of bespoke styles, shapes and sizes. But there is more. With the source code you can also generate and display your graphics directly.

JavaScript

The source-code comprises a JavaScript module to which you will need a link in your HTML <head> section. The module contains a single factory function chart() that works in two stages. The first stage optionally modifies the graphic's core data (see Core object modifier) and returns an anonymous function. The second stage executes the anonymous function to create the graphic.

The anonymous function is assigned here to addGraphic. Parameter udi (user data input) defines the chart and placeholder locates it on the page. Graphics are added to the placeholder, so existing content may need to be removed, as shown below.

let addGraphic = chart(),
udi = {
   title: "C7♭9",
   frets: "x,3,2,3,2,3",
   labels: "x,2,1,3,1,4",
   footer: ",C,E,B♭,D♭,G"
   },
placeholder = document.getElementById("placeholder");
while (placeholder.hasChildNodes())
   placeholder.removeChild(placeholder.lastChild);
addGraphic(udi, placeholder);

Only the frets element of udi is essential to create a chart; title, labels and footer may be null, or omitted completely

Core object modifier

Source-code module chart() optionally modifies the default core data with parameter com (core object modifier), a subset of core property values. The following example would modify cellHeight, padding, and inline style:

let com = {
   cellHeight: 18,
   padding: 5,
   style: "pretty"
   },
addGraphic = chart(com);

Function addGraphic would then create all subsequent graphics with the modified parameters.

Chordography uses com to allow users to modify core data "on the fly". This will seldom be necessary in other applications, where you may prefer to modify the default core values in the data file (see Downloads, below)

HTML

In addition to a link to the source code, you will need to add a placeholder in your HTML <body> section to contain the graphic:

<div id="placeholder">graphic goes here</div>

Downloads

Source code files can be downloaded in the table below. Download links may work as normal navigation links if the files reside on an external server and so are a potential security concern. You should be able to view the file on the linked page, and save its contents using "Save As" once you have seen what you are getting.

Source code files

Filename	Description
chart.js	Comprises factory function chart(com), used to generate chord charts
chart.data.js	Examples of inline styles, udi and default core properties used by chart.js