View on

Element: legend

The legend element is a container object for legends.

Syntax

(plot <options>)

Options

Legend Options

position item item-flow item-column-padding item-row-padding extra

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

Legend Options

position

Set the legend position.

position ([top|center|bottom] [left|center|right])
Examples:
;; set the position to top left
position (top left)

item

Add a legend/item element to the legend. See the legend/item element for options.

item (<options>)

item-flow

Enable flowing/inline item layout.

item-flow [on|off]

item-column-padding

Set the item column padding. See the measure page for more details on valid values.

item-column-padding <measure>
Examples:
;; set the column padding to 1em
item-column-padding 2em

item-row-padding

Set the item row padding. See the measure page for more details on valid values.

item-row-padding <measure>
Examples:
;; set the row padding to 1em
item-row-padding 2em

extra

Add custom elements to the legend

extra (<element>)

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