`<legend>`

A legend describing the contents of a graph

<legend> is a Graphical component that renders a legend when nested inside a <graph>. Individual legend entries are defined with the <label> component.

Attributes and Properties

Attributes for `<legend>`

Labels (1)

labelIsName

boolean. Default value: false. Whether to use this component's name as its rendered label.

Other (6)

applyStyleToLabel

boolean. Default value: false. Whether to apply this component's selected style to its label.

boxed

boolean. Default value: false. Whether to draw an opaque box behind the legend so that graph contents passing behind it stay hidden.

displayClosedSwatches

boolean. Default value: false. Whether to render closed/filled swatches in the legend.

layer

integer. Default value: 1. Z-order layer index used to stack graphical components (higher values render on top).

maskLabel

boolean. Default value: false. Whether to give the label an opaque background so it stays legible when it overlaps an axis, grid line, or another object.

position

keyword. Position of the legend on the graph.

Value	Description
`upperRight` (default)	Place the legend in the upper-right corner.
`upperLeft`	Place the legend in the upper-left corner.
`lowerRight`	Place the legend in the lower-right corner.
`lowerLeft`	Place the legend in the lower-left corner.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<legend name="l">`

Labels (2)

$l.label

label. The label rendered with this component.

$l.labelIsName

boolean. Whether to use this component's name as its rendered label.

Other (10)

$l.applyStyleToLabel

boolean. Whether to apply this component's selected style to its label.

$l.boxed

boolean. Whether to draw an opaque box behind the legend so that graph contents passing behind it stay hidden.

$l.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$l.displayClosedSwatches

boolean. Whether to render closed/filled swatches in the legend.

$l.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$l.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$l.hidden

boolean. Whether this component is hidden from the rendered output.

$l.layer

integer. Z-order layer index used to stack graphical components (higher values render on top).

$l.maskLabel

boolean. Whether to give the label an opaque background so it stays legible when it overlaps an axis, grid line, or another object.

$l.position

text. Position of the legend on the graph.

Common to all components (4)

$l.doenetML

text. The DoenetML source code that produced this component.

$l.hide

boolean. Whether to hide this component from the rendered output.

$l.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$l.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Default `<legend>` within a `<graph>`

By default, <label> children are assigned to graphical objects with unique styleNumber attributes in the order in which they are defined within the <graph>.

Example: `<legend>` with labels assigned by name

By default, <label> children are assigned to graphical objects with unique styleNumber attributes in the order in which they are defined within the <graph>.

This default order can be altered in the following way: use the forObject attribute within each <label> child, and as its input list the name of the component the label is attached to (no need to include the $).

Attribute Examples

Attribute Example: position

The default position for the <legend> is in the upper-right corner of the graphing window. To adjust this, use the position attribute. Valid text inputs for this attribute are: upperright, upperleft, lowerright and lowerleft.

Attribute Example: boxed

By default a <legend> has no background of its own, so graph contents passing behind it show through. The boxed attribute draws an opaque box behind the legend instead. The box paints the graph’s background color unless the legend’s <styleDefinition> names a backgroundColor:

A <legend>’s own styleNumber says how the legend itself is drawn — the background of its box, and the color of its labels — while each swatch is drawn from the style of the object it stands for. Labels are drawn in the style’s textColor, which is black on light and white on dark unless a <styleDefinition> or an active style palette says otherwise, so a box painted a color of its own can be given label text that reads against it.

Swatches follow the document’s theme alongside the box and the labels: in dark mode a swatch takes the dark-mode color of the object it stands for, so it is drawn in the color that object is actually drawn in.

Attribute Example: layer

A <legend> is drawn on layer="1" unless told otherwise, which puts it above everything on the default layer. Raise the layer to lift it above graphical components that set a layer of their own — here the legend asks for layer 3, above the rectangle’s layer 2, so the swatch stays visible.

The layer governs the legend’s swatches and its box. A legend’s labels are drawn as text laid over the graph, so they stay in front of the graph’s contents whatever layer the legend is given: lowering a legend’s layer will send its swatches behind a curve but not its labels.

Attribute Example: displayClosedSwatches

When a graph contains filled shapes, the displayClosedSwatches attribute can be used to alter the appearance of the symbols within the <legend> from that of the default line.

lcm li

<legend>