User Guide
Reference
Examples
Download
Github

axis

The axis statement is used to add a single labelled 'axis' to the chart.

Synopsis

axis { 
align: <>;
scale: <scale>;
limit: <limit>;
limit-min: <limit_min>;
limit-max: <limit_max>;
label-placement: <label_placement>;
label-format: <label_format>;
label-attach: <label_attach>;
label-offset: <label_offset>;
label-padding: <label_padding>;
label-rotate: <label_rotate>;
label-color: <color>;
label-font: <font>;
label-font-size: <font_size>;
tick-placement: <tick_placement>;
tick-offset: <tick_offset>;
tick-length: <tick_length>;
title: <title>;
title-offset: <title_offset>;
title-padding: <title_padding>;
title-rotate: <title_rotate>;
title-color: <color>;
title-font: <font_size>;
title-font-size: <font_size>;
border-width: <stroke_width>;
border-color: <color>;
border-syle: <stroke_style>;
}

List of Options

align

Controls where the axis is drawn.

align [x|y|top|right|bottom|left]
Examples:
;; align the axis to the right border
align right

;; draw a horizontal axis
align x

scale

Set the axis scale type.

scale: [linear] [log] [logarithmic] [invert] [inverted];

List of scale types: - `linear` - Standard linear scale - `log`, `logarithmic` - Logarithmic (log10) scale - `invert`, `inverted` - Flip the scale

Examples:
;; set the scale to logarithmic mode
scale: log;

;; set the scale to inverted mode
scale: invert;

limit

Set the axis value range to the closed interval [min, max]. If no explicit maximum is specified, the default interval is [0.0, 1.0].

limit: <min> <max;
Examples:
;; set limits to [1..10]
limit: 1 10;

limit-min

Set the axis minimum value. If no explicit maximum is specified, the default maximum value is '0.0'.

limit-min: <min>;
Examples:
;; set the lower limit to 2
limit-min: 2;

limit-max

Set the axis maximum value. If no explicit maximum is specified, the default maximum value is '1.0'.

label-placement

The 'label-placement' option controls the axis label placement.

label-placement: <label-placement>;
Examples:
;; subdivide the axis into 10 ticks
label-placement: subdivide(10);

label-format

The 'label-format' option controls how axis labels are formatted.

labels: <labels>;
Examples:
/* use scientific labels for the top/bottom axes */
label-format: scientific;

label-attach

The 'label-attach' option controls how axis labels are oriented.

label-attach: [top|right|bottom|left];
Examples:
/* set label attach to left */
label-attach: left;

label-offset

Controls to which side of the axis the labels are placed. Value is clamped to [-1, 1].

label-offset: <value>;
Examples:
/* center the labels */
label-offset: 0;

label-padding

Set the label padding/spacing. See the [measure](#FIXME) page for more details on valid values.

label-padding: <measure>;
Examples:
/* set the label padding to 2em */
label-padding: 2em;

label-rotate

Rotate the labels. Value is in degrees clockwise.

label-rotate: <value>;
Examples:
/* rotate the label by 45deg clockwise */
label-rotate: 45;

label-color

Set the label color.

label-color: <color>;
Examples:
;; set the color to grey
label-color: #eee;

;; set the color to red, 50% transparent
label-color: rgba(1 0 0 .5);

label-font

Set the label font.

label-font-size

Set the label font size.

label-font-size: <measure>;
Examples:
;; set the font size to 14pt
label-font-size: 14pt;

tick-placement

The 'tick-placement' option controls where on the axis the "ticks" are placed.

tick-placement: <tick-placement>;
Examples:
/* subdivide the axis into 10 ticks */
tick-placement: subdivide(10);

tick-offset

Controls to which side of the axis the ticks are drawn. Value is clamped to [-1, 1].

tick-offset: <value>;
Examples:
/* center the ticks */
ticks-offset: 0;

tick-length

Controls the length of the ticks

tick-length: <measure>;
Examples:
/* set tick length to 1em */
ticks-length: 1em;

title

Set the axis title

title: <title>;
Examples:
;; set the axis title to "Time"
title: "Time";

title-offset

Controls to which side of the axis the title is placed. Value is clamped to [-1, 1].

title-offset: <value>;
Examples:
/* center the title */
title-offset: 0;

title-padding

Set the title padding/spacing. See the [measure](#FIXME) page for more details on valid values.

title-padding <measure>
Examples:
/* set the title padding to 2em */
title-padding: 2em;

title-rotate

Rotate the title. Value is in degrees clockwise.

title-rotate <value>
Examples:
/* rotate the title by 45deg clockwise */
title-rotate: 45;

title-color

Set the axis title color.

title-color: <color>;
Examples:
;; set the color to grey
title-color: #eee;

;; set the color to red, 50% transparent
title-color: rgba(1 0 0 .5);

title-font

Set the axis title font.

title-font: <measure>;
Examples:
;; set the font size to 14pt
title-font: 14pt;

title-font-size

Set the axis title font size.

title-font-size: <measure>;
Examples:
;; set the font size to 14pt
title-font-size: 14pt;

border-width

Set the width of the axis border/line.

border-width: <measure>;
Examples:
;; set the stroke width to 2pt
border-width: 2pt;

border-color

Set the color of the axis border/line.

border-color: <color>;
Examples:
;; set the color to grey
border-color: #eee;

;; set the color to red, 50% transparent
border-color: rgba(1 0 0 .5);

border-syle

Set the stroke style of the axis border/line.

border-syle: (<stroke-style>);
Examples:
;; set the stroke to dashed
border-syle: dashed;
Edit this page on GitHub