View on

Element: chart/linechart

The chart/linechart element is a helper element for creating linecharts.

Syntax

(chart/linechart <options>)

Example

Options

Line Options

data-x data-y color stroke-style stroke-width stroke-color marker-shape marker-size marker-color

Label Options

labels label-font-size label-color label-padding

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

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

Line 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-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)

color

Set the stroke and marker color.

color <color>

stroke-style

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

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

stroke-width

Set the line's stroke width. See the Typographic Units page for more details on valid values.

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

stroke-color

Set the stroke color.

stroke-color <color>

marker-shape

Set the marker-shape for the plot. If set, a marker will be drawn for each point in the dataset at the points (x, y) coordinate.

marker-shape (<marker-shape>)
Examples:
;; set marker size to 'hexagon'
marker-shape (hexagon)

marker-size

Set the marker-sizes for the plot. If set, a marker will be drawn for each point in the dataset at the points (x, y) coordinate.

marker-size <measure>
Examples:
;; set marker size to 2pt
marker-size 2pt

marker-color

Set the marker color.

marker-color <color>

Label Options

labels

Set the labels for the plot. If set, a label will be drawn for each point in the dataset at the points (x, y) coordinate,

label-format (<values>...)
labels (csv <file> <column>)
Examples:
;; list of static values
label-format ("A" "B" "C")

;; load a csv file
labels (csv myfile.csv mylabels)

label-font-size

Set the label font size. See the measure page for more details on valid values.

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

label-color

Set the label color. See the color page for more details on valid values.

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

label-padding

Set the label padding/spacing. See the measure page for more details on valid values.

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

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)

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