SVGGraph titles and axis labels
Version 2.6 of SVGGraph added options to display more user-defined text on the graphs, as a title for the graph, labels for the X and Y axes and a legend to show what the different bar, line, marker or pie slice styles represent. This page covers the title and axis labels, for legends, see the legends page.
Document titles and graph titles
SVGGraph has two separate options that set titles for the graph. The first,
title, actually sets the content for the SVG document's
<title> tag, which is what appears in the window bar when
the SVG is in a browser window by itself. Try
this link to see the graph in Figure
1 in a new window – the window or tab title should be "Example graph".
The new option in version 2.6 is
graph_title – this adds a
title to the body of the graph, as shown in Figure 1 below. (I've given these
example graphs a white background and black edge to make it more obvious which
things are part of the graph and which are part of the HTML page.)
In figure 2 above, the same value for
graph_title is used, but
this time the
graph_title_position option is set to "bottom" to
draw the title underneath the graph. I've also set the
graph_title_font_weight to "bold" to make the title stand out a
In Figure 3, I've changed
"right" to display the title on the right-hand side of the graph. The text is
rotated through 90 degrees to make it fit better. I've also changed the
graph_title_font to "Georgia" and increased the
graph_title_font_size from the default of 12 to 15.
Figure 4 shows what happens when you choose "left" for the
graph_title_position option. In this example I have also shown
how the title can be broken into multiple lines by inserting a newline
\n" literal into the (double-quoted) string. The
have been modified here too, to show what effect they have.
Labelling the axes
graph_title options in the previous section are valid
for all types of graph, but for the grid-based bar, line and scatter graphs
there are also some options for labelling the horizontal and vertical axes.
Figure 5 below sets the graph title again, and also sets
label_h to "Days of the week" and
label_v to "Hours
awake" to label the horizontal and vertical axes.
Note: these are random numbers, and do not correspond to the actual number of hours that I am awake on each day of the week. Probably.
Figure 6 shows what happens when I decided to change to a
HorizontalBarGraph without changing the
label_v options – the labels are now against the wrong
To make it easier to change between them, there are alternative options
label_y. On a normal, vertical bar or line graph,
label_x is along the horizontal axis and
along the vertical axis. For the horizontal graphs, the
label_y labels are reversed, as shown in Figure 7 below.
You should note that the
values always take precedence over
label_y – so if you set
label_x to "Days"
label_h to "Days of the week", the horizontal label will
always say "Days of the week".
Lastly, Figure 8 demonstrates setting the font family, the font size and
the spacing around the labels using the
label_space options. It also
shows how multi-line labels may be used with line breaks.