Command: plot/areas

The plot/areas command takes an input data table, transforms it according to a user-provided scale configuration and then plots the data as one or more 'area' shapes.

Syntax

(plot/areas <options>)
(plot/areas 
data-x (...)
data-x-high (...)
data-x-low (...)
data-y (...)
data-y-high (...)
data-y-low (...)
direction (...)
color (...)
stroke-color (...)
stroke-width (...)
stroke-style (...)
stroke-high-color (...)
stroke-high-width (...)
stroke-high-style (...)
stroke-low-color (...)
stroke-low-width (...)
stroke-low-style (...)
scale-x (...)
scale-y (...)
limit-x (...)
limit-x-min (...)
limit-x-max (...)
limit-y (...)
limit-y-min (...)
limit-y-max (...))

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.
Examples:
['charts-editorial/stacked_areas']

data-x-low

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

Examples:
['charts-editorial/stacked_areas']

data-y-high

Alias for the data-y option.
Examples:
['charts-editorial/stacked_areas']

data-y-low

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>
Examples:
;; set the color to grey
color #eee

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

stroke-color

Set the area's stroke color.

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

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

stroke-width

Set the area's stroke width.

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

stroke-style

Set the area's stroke style.

stroke-style (<stroke-style>)
Examples:
;; set the stroke to dashed
stroke-style dashed

stroke-high-color

Set the area's high ("upper") stroke color.

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

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

stroke-high-width

Set the area's high ("upper") stroke width.

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

stroke-high-style

Set the area's high ("upper") stroke style.

stroke-high-style (<stroke-style>)
Examples:
;; set the stroke to dashed
stroke-high-style dashed

stroke-low-color

Set the area's low ("lower") stroke color.

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

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

stroke-low-width

Set the area's low ("lower") stroke width.

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

stroke-low-style

Set the area's low ("lower") stroke style.

stroke-low-style (<stroke-style>)
Examples:
;; set the stroke to dashed
stroke-low-style dashed

scale-x

Set the type of the 'x' (horizontal) scale.

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

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

scale-y

Set the type of the 'y' (vertical) scale.

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

;; set the scale to inverted mode
scale-y (invert)

limit-x

Set the limits (minimum and maximum values) for the 'x' (horizontal) scale.

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

limit-x-min

Set the minimum value (lower limit) for the 'x' (horizontal) scale.

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

limit-x-max

Set the maximum value (upper limit) for the 'x' (horizontal) scale.

Examples:
['charts-editorial/stacked_areas']

limit-y

Set the limits (minimum and maximum values) for the 'y' (vertical) scale.

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

limit-y-min

Set the minimum value (lower limit) for the 'y' (vertical) scale.

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

limit-y-max

Set the maximum value (upper limit) for the 'y' (vertical) scale.

Examples:
['charts-editorial/stacked_areas']

Examples

Example: examples/charts-editorial/stacked_areas


Edit this page on GitHub