`<line>`

A line through two points or defined by an equation

<line> is a Graphical component that renders a line when nested inside a <graph> component, and renders an equation otherwise.

Current functionality supports generation of lines in $\mathbb{R^2}$ through user-specification of:

a single pair of points
through a single point and a specified slope
with an equation, or <function>

Attributes and Properties

Attributes for `<line>`

Number display (5)

avoidScientificNotation

boolean. Default value: false. Whether to render numbers in full decimal form rather than scientific notation.

displayDecimals

integer. Default value: 2. Number of decimal places to display when rendering this number.

displayDigits

integer. Default value: 3. Number of significant digits to display when rendering this number.

displaySmallAsZero

number. Default value: 1e-14. Threshold below which numbers are displayed as zero.

padZeros

boolean. Default value: false. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (1)

labelIsName

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

Other (12)

applyStyleToLabel

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

draggable

boolean. Default value: true. Whether the line can be dragged on a graph.

equation

math. Implicit equation defining the line.

labelPosition

keyword. Where the label sits along this line/curve.

Value	Description
`upperRight`	Place the label above and to the right of the line.
`upperLeft`	Place the label above and to the left of the line.
`lowerRight`	Place the label below and to the right of the line.
`lowerLeft`	Place the label below and to the left of the line.
`center` (default)	Place the label at the midpoint of the line.
`top`	Place the label directly above the line.
`bottom`	Place the label directly below the line.
`left`	Place the label directly to the left of the line.
`right`	Place the label directly to the right of the line.

layer

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

lineStyle

keyword. Stroke style for lines.

Value	Description
`solid`	Continuous, unbroken stroke.
`dashed`	Stroke composed of evenly-spaced dashes.
`dotted`	Stroke composed of evenly-spaced dots.

lineWidth

number. Stroke width for lines, in pixels.

parallelTo

_directionComponent. Direction the line should be parallel to (e.g. another line or vector).

perpendicularTo

_directionComponent. Direction the line should be perpendicular to (e.g. another line or vector).

slope

number. Slope of the line.

through

pointList. Points the line passes through.

variables

[ _variableNameList ]. Names of the variables used in the line equation.

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 `<line name="l">`

Number display (5)

$l.avoidScientificNotation

boolean. Whether to render numbers in full decimal form rather than scientific notation.

$l.displayDecimals

integer. Number of decimal places to display when rendering this number.

$l.displayDigits

integer. Number of significant digits to display when rendering this number.

$l.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$l.padZeros

boolean. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

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 (25)

$l.applyStyleToLabel

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

$l.backgroundColor

text. Human-readable name for this component's background color, derived from the active style and theme.

$l.coeff0

math. The constant term in the implicit line equation coeff0 + coeffvar1·x + coeffvar2·y = 0.

$l.coeffvar1

math. The coefficient of the first variable in the implicit line equation coeff0 + coeffvar1·x + coeffvar2·y = 0.

$l.coeffvar2

math. The coefficient of the second variable in the implicit line equation coeff0 + coeffvar1·x + coeffvar2·y = 0.

$l.disabled

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

$l.draggable

boolean. Whether the line can be dragged on a graph.

$l.equation

math. The line's equation as a math expression.

$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.labelPosition

text. Where the label sits along this line/curve.

$l.latex

latex. The line's equation rendered as LaTeX.

$l.layer

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

$l.numDimensions

number. Number of dimensions the line lives in.

$l.points

[ math ]. Two points the line passes through.

$l.slope

math. The slope of the line (2D only).

$l.styleDescription

text. A textual description of the line's style.

$l.styleDescriptionWithNoun

text. Style description including the word "line".

$l.text

text. The line's equation rendered as plain text.

$l.textColor

text. Human-readable name for this component's text color, derived from the active style and theme.

$l.textStyleDescription

text. Human-readable description of this component's text styling (color and any background color).

$l.variables

[ _variableName ]. Variable names used in the line's equation.

$l.xintercept

math. The x-intercept of the line.

$l.yintercept

math. The y-intercept of the line.

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 `<line>`

The default <line> without any attributes specified (other than a styleNumber) is illustrated. This line is not very interesting; it is just the $x$ -axis. The equation of the line is copied below the <graph>. You can click and drag the line to see this equation updated.

Example: `<line>` with slope and through point

Two lines are graphed using both the slope and through attributes.

Example: `<line>` through 2 points

Two lines are graphed by specifying two through points using the through attribute.

Example: `<line>` by equation

Two lines are graphed by providing their equations directly.

Example: Line as a `<function>`

Two lines are defined using the <function> component. This is a useful alternative to defining a line with the <line> component if the function needs to be evaluated at different input values.

Attribute Examples

Attribute Example: through

Two lines are graphed by specifying two through points using the through attribute.

Attribute Example: slope

If only the slope attribute is specified, the $y$ -intercept defaults to $(0,0)$ .

Attribute Example: equation

The equation attribute takes any linear expression in $x$ and $y$ , unless the variables attribute is also employed.

Attribute Example: variables

The variables attribute allows customization of the independent and dependent variable names.

Attribute Example: Standard graphical attributes

The uses of the following standard graphical attributes are illustrated: hide, draggable, layer, styleNumber, applyStyleToLabel and labelIsName.

Property Examples

Property Example: Attributes as properties

The above listed attributes of a named <line> are also available as properties.

Property Example: points

The points property of a named <line> returns the through points of the line in an array.

Property Example: xIntercept, yIntercept

The xIntercept and yIntercept properties return the intercepts of the named <line>.

Property Example: coeff0, coeffVar1, coeffVar2

Linear coefficients corresponding to the linear form $A x + B y + C = 0$ can be obtained with the above properties, where $C =$ coeff0, $B =$ coeffVar2 and $A =$ coeffVar1.

Property Example: latex

The latex property renders the latex code for rendering the equation of the line.

li lineSegment

<line>