SVGGraph axis and grid styles

« Return to SVGGraph page

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 show_axes and show_grid 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_h and show_axis_text_v options. Many of the grid and axis options are available with _h and _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_subdivisions and 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.

Axis styling

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 in _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 axis_text_angle_h 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 division_style_h is 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 the 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 axis_colour, division_colour and 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 using the axis_text_colour option.

Grid styling

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 grid_colour and grid_subdivision_colour options.

Figure 10 sets dash patterns for the lines using the grid_dash_h and 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 grid_subdivision_dash option.

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 options, the _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 grid_back_colour 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 surround.

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 grid_back_stripe and grid_back_stripe_colour options.

« Back to top of page Dual and multiple Y-axis graphs »

Copyright © 2020, Goat 1000