Element: plot

The plot element is the basic container object used to create charts.

Note that the chart uses a coordinate system where (0, 0) is at the bottom left corner of the screen and positive values of the y axis extend upwards. This is different to other elements which follow the usual computer graphics convention, but is much more natural for creating plots.

Syntax

(plot <options>)

Example

Options

Geometry Options

areas bars lines labels points

Scale Options

limit-x limit-x-min limit-x-max limit-y limit-y-min limit-y-max scale-x scale-y scale-x-padding scale-y-padding

Axis Options

axes axis-top axis-right axis-bottom axis-left axis-x-title axis-y-title axis-x-label-format axis-y-label-format axis-x-label-placement axis-y-label-placement

Grid & Legend Options

grid legend

Extra Elements

body top right bottom left

Layout Options

margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left

Background Options

background

Border Options

border border-top border-right border-bottom border-left border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color

Geometry Options

areas

Add a 'plot/areas' element to the chart. See the plot/areas element for options.

areas (<options>)

bars

Add a 'plot/bars' element to the chart. See the plot/bars element for options.

bars (<options>)

lines

Add a 'plot/lines' element to the chart. See the plot/lines element for options.

lines (<options>)

labels

Add a 'plot/labels' element to the chart. See the plot/labels element for options.

label-format (<options>)

points

Add a 'plot/points' element to the chart. See the plot/points element for options.

points (<options>)

Scale Options

limit-x

Set the 'x' axis value range to the closed interval [min, max]. If no explicit limits are specified, the limit is set to the smallest interval that contains all input data points.

limit-x (<min> <max)
Examples:
;; set x axis range to [1..10]
limit-x (1 10)

limit-x-min

Set the 'x' axis minimum value. If no explicit minimum is specified, the minimum is set to the smallest value in the input data set.

limit-x-min <min>
Examples:
;; set x axis min value to 2
limit-x-min 2

limit-x-max

Set the 'x' axis maximum value. If no explicit maximm is specified, the maximum is set to the largest value in the input data set.

limit-x-max <max>
Examples:
;; set x axis max value to 20
limit-x-max 20

limit-y

Set the 'y' axis value range to the closed interval [min, max]. If no explicit limits are specified, the limit is set to the smallest interval that contains all input data points.

limit-y (<min> <max)
Examples:
;; set y axis range to [1..10]
limit-y (1 10)

limit-y-min

Set the 'y' axis minimum value. If no explicit minimum is specified, the minimum is set to the smallest value in the input data set.

limit-y-min <min>
Examples:
;; set y axis min value to 2
limit-y-min 2

limit-y-max

Set the 'y' axis maximum value. If no explicit maximm is specified, the maximum is set to the largest value in the input data set.

limit-y-max <max>
Examples:
;; set y axis max value to 20
limit-y-max 20

scale-x

Set the 'x' scale type.

scale-x ([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 x axis to logarithmic mode
scale-x (log)

;; set x axis to inverted mode
scale-x (invert)

scale-y

Set the 'y' scale type.

scale-y ([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 x axis to logarithmic mode
scale-y (log)

;; set x axis to inverted mode
scale-y (invert)

scale-x-padding

Set the 'x' scale 'padding'. The scale padding is used to extend the automatically assigned scale limits. The padding option is hence only useful when no explicit limits are specified (using limit-x). The padding is specified in the display unit system of the axis.

scale-x-padding <value>
Examples:
;; set x axis padding to 10
scale-x-padding 10

scale-y-padding

Set the 'y' scale 'padding'. The scale padding is used to extend the automatically assigned scale limits. The padding option is hence only useful when no explicit limits are specified (using limit-y). The padding is specified in the display unit system of the axis.

scale-y-padding <value>
Examples:
;; set y axis padding to 10
scale-y-padding 10

Axis Options

axes

Specify a list of 'automatic' axes. This option is used to quickly add axis with default styling to a chart. For all customization options, add axes using the axis-{top,right,bottom,left} options.

The axes option will default to top right bottom left if no other axes are specified. If any other axis is specified, the property will default to the empty list.

axes ([top] [right] [bottom] [left])
Examples:
;; display a left and bottom axis only
axes (left bottom)

;; display all axes
axes (top left bottom right)

;; display no axes
axes ()

axis-top

Add a 'top' axis to the chart. See the plot/axis-top element for options.

axis-top (<options>)
Examples:
;; add a top axis with the title "Time"
axis-top (
  title "Time"
  title-font-size 14pt))

axis-right

Add a 'right' axis to the chart. See the plot/axis-right element for options.

axis-right (<options>)
Examples:
;; add a right axis with the title "Time"
axis-right (
  title "Time"
  title-font-size 14pt))

axis-bottom

Add a 'bottom' axis to the chart. See the plot/axis-bottom element for options.

axis-bottom (<options>)
Examples:
;; add a bottom axis with the title "Time"
axis-bottom (
  title "Time"
  title-font-size 14pt))

axis-left

Add a 'left' axis to the chart. See the plot/axis-left element for options.

axis-left (<options>)
Examples:
;; add a left axis with the title "Time"
axis-left (
  title "Time"
  title-font-size 14pt))

axis-x-title

Convenience option to set the axis title for all 'x' axes (top/bottom).

axis-x-title <title>
Examples:
;; set the top/bottom axis title to "Time"
axis-x-title "Time"

axis-y-title

Convenience option to set the axis title for all 'y' axes (left/right).

axis-y-title <title>
Examples:
;; set the left/right axis title to "Time"
axis-y-title "Time"

axis-x-label-format

Convenience option to control the label format for all 'x' axes (top/bottom). This option is an alias for the plot/axis element's label-format option.

axis-x-label-format <format>
Examples:
;; use scientific labels for the top/bottom axes
axis-x-label-format (scientific)

axis-y-label-format

Convenience option to set the label format for all 'y' axes (left/right). This option is an alias for the plot/axis element's label-format option.

axis-y-label-format <format>
Examples:
;; use scientific labels for the left/right axes
axis-y-label-format (scientific)

axis-x-label-placement

Convenience option to set the axis label-placement for all 'x' axes (top/bottom). This option is an alias for the plot/axis element's label-placement option.

axis-x-label-placement <label-placement>
Examples:
;; subdivide the x axis with 10 label-placement
axis-x-label-placement (subdivide 10)

axis-y-label-placement

Convenience option to set the axis label-placement for all 'y' axes (left/right). This option is an alias for the plot/axis element's label-placement option.

axis-y-label-placement <label-placement>
Examples:
;; subdivide the y axis with 10 label-placement
axis-y-label-placement (subdivide 10)

Grid & Legend Options

grid

Add a 'grid' to the chart. See the plot/grid element for options.

grid (<options>)
Examples:
;; add a white background grid
grid (color #fff)

legend

Add a 'legend' to the chart. See the chart/legend element for options.

legend (<options>)
Examples:
;; add a legend
legend (items ("My Data"))

Extra Elements

body

Add custom elements to the 'body' viewport of the chart

body (<elements>)

top

Add custom elements to the 'top' viewport of the chart

top (<elements>)

right

Add custom elements to the 'right' viewport of the chart

right (<elements>)

bottom

Add custom elements to the 'bottom' viewport of the chart

bottom (<elements>)

left

Add custom elements to the 'left' viewport of the chart

left (<elements>)

Layout Options

margin

Set the element's top/right/bottom/left margins. See the measure page for more details on valid values.

margin <measure>
Examples:
;; set the margin to 2em
margin 2em

margin-top

Set the element's top margin. see the measure page for more details on valid values.

margin <measure>
Examples:
;; set the top margin to 2em
margin 2em

margin-right

Set the element's right margin. see the measure page for more details on valid values.

margin <measure>
Examples:
;; set the right margin to 2em
margin 2em

margin-bottom

Set the element's bottom margin. see the measure page for more details on valid values.

margin <measure>
Examples:
;; set the bottom margin to 2em
margin 2em

margin-left

Set the element's left margin. see the measure page for more details on valid values.

margin <measure>
Examples:
;; set the left margin to 2em
margin 2em

padding

Set the element's top/right/bottom/left padding. See the measure page for more details on valid values.

padding <measure>
Examples:
;; set the padding to 2em
padding 2em

padding-top

Set the element's top padding. see the measure page for more details on valid values.

padding <measure>
Examples:
;; set the top padding to 2em
padding 2em

padding-right

Set the element's right padding. see the measure page for more details on valid values.

padding <measure>
Examples:
;; set the right padding to 2em
padding 2em

padding-bottom

Set the element's bottom padding. see the measure page for more details on valid values.

padding <measure>
Examples:
;; set the bottom padding to 2em
padding 2em

padding-left

Set the element's left padding. see the measure page for more details on valid values.

padding <measure>
Examples:
;; set the left padding to 2em
padding 2em

Background Options

background

Set the element's background fill/color. See the fill-style page for more details on valid values.

background <fill-style>
Examples:
;; set the background color to grey
background #eee

Border Options

border

Set the element's border stroke style. See the stroke-style page for more details on valid values.

border (<stroke-style>)
Examples:
;; set the border stroke to 2px solid
border (2px solid)

border-top

Set the element's top border stroke style. See the stroke-style page for more details on valid values.

border-top (<stroke-style>)
Examples:
;; set the border stroke to 2px solid
border-top (2px solid)

border-right

Set the element's right border stroke style. See the stroke-style page for more details on valid values.

border-right (<stroke-style>)
Examples:
;; set the border stroke to 2px solid
border-right (2px solid)

border-bottom

Set the element's bottom border stroke style. See the stroke-style page for more details on valid values.

border-bottom (<stroke-style>)
Examples:
;; set the border stroke to 2px solid
border-bottom (2px solid)

border-left

Set the element's left border stroke style. See the stroke-style page for more details on valid values.

border-left (<stroke-style>)
Examples:
;; set the border stroke to 2px solid
border-left (2px solid)

border-width

Set the element's border width. See the measure page for more details on valid values.

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

border-top-width

Set the element's top border width. See the measure page for more details on valid values.

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

border-right-width

Set the element's right border width. See the measure page for more details on valid values.

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

border-bottom-width

Set the element's bottom border width. See the measure page for more details on valid values.

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

border-left-width

Set the element's left border width. See the measure page for more details on valid values.

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

border-color

Set the element's border color. See the color page for more details on valid values.

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

border-top-color

Set the element's top border color. See the color page for more details on valid values.

border-top-color <color>
Examples:
;; set the border color to #333
border-top-color #333

border-right-color

Set the element's right border color. See the color page for more details on valid values.

border-right-color <color>
Examples:
;; set the border color to #333
border-right-color #333

border-bottom-color

Set the element's bottom border color. See the color page for more details on valid values.

border-bottom-color <color>
Examples:
;; set the border color to #333
border-bottom-color #333

border-left-color

Set the element's left border color. See the color page for more details on valid values.

border-left-color <color>
Examples:
;; set the border color to #333
border-left-color #333
Edit this page on GitHub