View on

Element: plot/areas

The plot/areas element is used to create area charts.

Syntax

(plot/areas <options>)

Example

Options

Area Options

data-x data-x-high data-x-low data-y data-y-high data-y-low direction color stroke-high-color stroke-high-width stroke-high-style stroke-low-color stroke-low-width stroke-low-style

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

Area Options

data-x

Set the 'x' dataset for the plot. The 'x' dataset will be used to calculate the horizontal position of geometry.

data-x (<values>...)
data-x (csv <file> <column>)
Examples:
;; list of static values
data-x (10px 20px 30px)

;; load a csv file
data-x (csv myfile.csv mycolumn)

data-x-high

Alias for the data-x option.

data-x-low

Set the 'x2' dataset for the plot. The 'x2' dataset will be used to calculate the horizontal position of geometry.

data-x-low (<values>...)
data-x-low (csv <file> <column>)
Examples:
;; list of static values
data-x-low (10px 20px 30px)

;; load a csv file
data-x-low (csv myfile.csv mycolumn)

data-y

Set the 'y' dataset for the plot. The 'y' dataset will be used to calculate the vertical position of geometry.

data-y (<values>...)
data-y (csv <file> <column>)
Examples:
;; list of static values
data-y (10px 20px 30px)

;; load a csv file
data-y (csv myfile.csv mycolumn)

data-y-high

Alias for the data-y option.

data-y-low

Set the 'y2' dataset for the plot. The 'y2' dataset will be used to calculate the vertical position of geometry.

data-y-low (<values>...)
data-y-low (csv <file> <column>)
Examples:
;; list of static values
data-y-low (10px 20px 30px)

;; load a csv file
data-y-low (csv myfile.csv mycolumn)

direction

Set the area 'direction'.

direction [horizontal|vertical]
Examples:
;; draw a vertical area chart
direction vertical

color

Set the area's fill and stroke color.

color <color>

stroke-high-color

Set the area's high ("upper") stroke color. See the color page for more details on valid values.

stroke-high-color <color>
Examples:
;; set the area's high ("upper") stroke color to grey
stroke-high-color #eee

stroke-high-width

Set the area's high ("upper") stroke width. See the measure page for more details on valid values.

stroke-high-width <measure>
Examples:
;; set the area's high ("upper") stroke width to 2pt
stroke-high-width 2pt

stroke-high-style

Set the area's high ("upper") stroke style. See the Fill & Stroke Styles page for more details on valid values.

stroke-high-style <stroke-high-style>
Examples:
;; set the area's high ("upper") stroke style to none
stroke-high-style solid

stroke-low-color

Set the area's low ("lower") stroke color. See the color page for more details on valid values.

stroke-low-color <color>
Examples:
;; set the area's low ("lower") stroke color to grey
stroke-low-color #eee

stroke-low-width

Set the area's low ("lower") stroke width. See the measure page for more details on valid values.

stroke-low-width <measure>
Examples:
;; set the area's low ("lower") stroke width to 2pt
stroke-low-width 2pt

stroke-low-style

Set the area's low ("lower") stroke style. See the Fill & Stroke Styles page for more details on valid values.

stroke-low-style <stroke-low-style>
Examples:
;; set the area's low ("lower") stroke style to none
stroke-low-style solid

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
Edit this page on GitHub