SVGGraph titles and axis labels

« Return to SVGGraph page

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 bit more.

In Figure 3, I've changed graph_title_position to "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 graph_title_colour and graph_title_space options have been modified here too, to show what effect they have.

Labelling the axes

The 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_h and label_v options – the labels are now against the wrong axes.

To make it easier to change between them, there are alternative options to label_h and label_v – label_x and label_y. On a normal, vertical bar or line graph, label_x is along the horizontal axis and label_y is along the vertical axis. For the horizontal graphs, the label_x and label_y labels are reversed, as shown in Figure 7 below.

You should note that the label_v and label_h values always take precedence over label_x and label_y – so if you set label_x to "Days" and 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_font, label_font_size and label_space options. It also shows how multi-line labels may be used with line breaks.

« Back to top of page Data labels »

Copyright © 2020, Goat 1000