SVGGraph axis and grid styles
The previous page covered the options that are available for specifying the scale of the graph, where the axes start and end and the number of divisions. This page deals with the appearance of the axis lines, tick marks, division labels and grid lines.
Enabling and disabling axes and grid lines
Figure 1 below shows the default graph settings - a 2 pixel-thick axis, overlapping the edges of the graph by 5 pixels, 3 pixel-long tick marks and numbering using a 10 pixel monospaced font. The grid is in a pale grey and only showing at axis divisions.
Figure 2 shows the simplest option for dealing with the axes and grid - by
turning them off with the
options. (This example looks more like the Cisco logo than a graph, but it
can sometimes be useful to turn the axes or grid off.)
For figure 3 I've turned off just the text numbering the axes using the
show_axis_text_v options. Many
of the grid and axis options are available with
_v endings to act on just the horizontal or vertical axes
instead of both at once.
In figure 4 above I've gone the other way and turned on axis and grid
subdivisions using the
show_grid_subdivisions options. The subdivision tick marks are
shorter than the main division tick marks, but the same colour. The grid
subdivisions are 50% transparent by default, making them fainter than the
main grid lines.
For this section I will be concentrating on the axis options, so I've turned
the grid off, and left the axis subdivisions turned on. The options that end
_h all relate to the horizontal axis, and those ending in
_v are all associated with the vertical axis.
Figure 5 below shows the effect of setting the
option to -90. The angle is in degrees, and positive values rotate the text in
the opposite direction. You can set the angle to anything you like, but with
these small fonts any angles between 0°, 90° and 180° can look quite
ugly in a browser. Printing the graphs out with shallower angles should look
better than onscreen, since SVG is a vector-based format.
In figure 6 I've set the length of the tick marks to 10 pixels using the
division_size option. The graph area is automatically reduced in
size to make room. The
subdivision_size is set to 5 pixels too.
Figure 7 below shows some of the alternative styles that are available for
the tick marks.
division_style_v is set to “over” to
draw the mark crossing the vertical axis, and
set to “infull” to draw from the horizontal axis to the other side
of the graph area. The subdivisions are drawn inside the graph area by setting
subdivision_style option to “in”
The default style is “out” for ticks outside the graph area. The other styles available are “overfull” which crosses the axis and goes to the opposite side of the graph area and “none” for no ticks at all.
Another obvious change in this example is that the vertical axis labels are
inside the graph area - this is achieved by setting the
axis_text_position_v option to “inside”.
My last change for the axes is to set the colour of the lines and text to
blue using the
subdivision_colour options. The colour of the axis text labels
will default to using the same colour as the axes, though you can change it
On to the grid styling now - I've put the axes back to the default settings,
with the subdivisions turned on. Axis subdivisions must be enabled with the
show_subdivisions option for the grid subdivisions to be shown -
the grid takes its line spacing from the axes.
Figure 9 turns the grid subdivisions on and sets the colour for the grid
lines and subdivision lines to different shades of blue using the
Figure 10 sets dash patterns for the lines using the
grid_dash_v options to set different patterns for the horizontal
and vertical lines. The subdivisions have been given a 1 pixel dot pattern in
both directions with the
If you look closely at the graph, you might think the dash patterns for the
horizontal and vertical lines are mixed up. To be consistent with the axis
_h grid options relate to the lines emerging from and
perpendicular to the horizontal axis, and the
_v grid options
refer to the grid lines that come out from the vertical axis.
Dash patterns are explained on the line graphs page.
Figure 11 shows the effect of setting the
option to a pale blue. I've changed the graph
back_colour to white
to make it easier to see the difference in colour between the grid area and the
Figure 12 turns all the axis options back on. You should be able to see from the bottom left of this example that the grid is drawn underneath the data bars, but the axis tick marks are drawn afterwards and appear on top of the bars.
Figure 12 also shows the effect of the