`<circle>`

A circle, potentially defined by center, radius, and/or points on the circle

<circle> is a Graphical component that renders inside a <graph>.

Attributes and Properties

Attributes for `<circle>`

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

addControls

keyword. Whether to render interactive control handles on the circle.

Value	Description
`center`	Show a control handle for moving the circle's center.
`radius`	Show a control handle for resizing the circle's radius.
`centerAndRadius` (default)	Show control handles for both moving the center and resizing the radius.
`none`	Show no control handles.

applyStyleToLabel

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

center

[ point ]. The circle's center point.

controlOrder

integer. Default value: 0. Slot order for graph controls (1-indexed; 0 means no explicit slot request).

draggable

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

extrapolateBackward

boolean. Default value: false. Whether to extrapolate the curve before its first defined point.

extrapolateForward

boolean. Default value: false. Whether to extrapolate the curve beyond its last defined point.

filled

boolean. Default value: false. Whether to fill the interior of the circle.

fillOpacity

number. Opacity of fills, 0 to 1.

flipFunction

boolean. Default value: false. Whether to swap the function and its argument (i.e., reflect across y=x).

hideOffGraphIndicator

boolean. Whether to suppress the indicator drawn at the edge when the component is off-screen.

labelPosition

keyword. Position of the curve's label relative to the curve.

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

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.

nearestPointAsCurve

boolean. Default value: false. Whether nearest-point queries should treat this as a curve in the plane rather than a graph y = f(x).

numDiscretizationPoints

number. Default value: 1000. Number of points used when discretizing the curve for rendering.

periodic

boolean. Default value: false. Whether the curve is treated as periodic when interpolating between control points.

radius

math. The circle's radius.

showCoordsWhenDragging

boolean. Default value: true. Whether to show coordinate labels while dragging the curve.

splineForm

keyword. Form of spline used to interpolate between control points.

Value	Description
`centripetal` (default)	Centripetal Catmull-Rom spline (avoids self-intersection at sharp turns).
`uniform`	Uniform Catmull-Rom spline with evenly spaced parameterization.

splineTension

number. Default value: 0.8. Tension parameter used when fitting a spline through control points.

through

pointList. Points the circle passes through.

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 `<circle name="c">`

Number display (5)

$c.avoidScientificNotation

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

$c.displayDecimals

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

$c.displayDigits

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

$c.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$c.padZeros

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

Labels (2)

$c.label

label. The label rendered with this component.

$c.labelIsName

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

Other (32)

$c.addControls

text. Whether to render interactive control handles on the circle.

$c.applyStyleToLabel

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

$c.area

math. The area enclosed by the circle.

$c.borderStyleDescription

text. A textual description of the circle's border style.

$c.center

[ math ]. The center coordinates of the circle.

$c.circumference

math. The circumference of the circle.

$c.controlOrder

integer. Slot order for graph controls (1-indexed; 0 means no explicit slot request).

$c.diameter

math. The diameter of the circle.

$c.disabled

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

$c.draggable

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

$c.extrapolateBackward

boolean. Whether to extrapolate the curve before its first defined point.

$c.extrapolateForward

boolean. Whether to extrapolate the curve beyond its last defined point.

$c.filled

boolean. Whether to fill the interior of the circle.

$c.fillStyleDescription

text. A textual description of the circle's fill style.

$c.fixed

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

$c.fixLocation

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

$c.flipFunction

boolean. Whether to swap the function and its argument (i.e., reflect across y=x).

$c.hidden

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

$c.hideOffGraphIndicator

boolean. Whether to suppress the off-graph indicator when the circle is outside the visible area.

$c.labelPosition

text. Position of the curve's label relative to the curve.

$c.layer

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

$c.numDiscretizationPoints

number. Number of points used when discretizing the curve for rendering.

$c.parMax

number. Maximum value of the curve parameter (always 2π for a circle).

$c.parMin

number. Minimum value of the curve parameter (always 0 for a circle).

$c.periodic

boolean. Whether the curve is treated as periodic when interpolating between control points.

$c.radius

math. The radius of the circle.

$c.showCoordsWhenDragging

boolean. Whether to show coordinate labels while dragging the curve.

$c.splineForm

text. Form of spline used to interpolate between control points.

$c.splineTension

number. Tension parameter used when fitting a spline through control points.

$c.styleDescription

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

$c.styleDescriptionWithNoun

text. Style description including the word "circle".

$c.throughPoints

[ math ]. Points the circle is constrained to pass through.

Common to all components (4)

$c.doenetML

text. The DoenetML source code that produced this component.

$c.hide

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

$c.isResponse

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

$c.styleNumber

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

Examples

Example: Default `<circle>`

This is a default <circle> without any additional attributes specified. It has a default radius of $1$ and center at $(0,0)$ .

Example: `<circle>` with center and radius

The center and radius of the circle are specified as attributes.

Example: `<circle>` through 3 points

Three points the circle passes through are specified using the through attribute.

Attribute Examples

Attribute Example: through

The through attribute can be used to specify one to three through-points and can be used in combination with other attributes.

Attribute Example: center

The center attribute references a constrained point, thereby restricting the movement of the <circle> to a grid.

Attribute Example: radius

A <circle> is defined with default center at the origin and a radius specified with a user-input.

Attribute Example: filled

Use the filled attribute to fill in a <circle> with the color corresponding to its styleNumber.

Attribute Example: Standard graphical attributes

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

Layers: By adjusting the layer attribute number, geometry can be placed in front of or behind other geometry. The default layer number is 0; all higher numbers are placed in front.

Attribute Example: throughPoints

The throughPoints property renders the values of the points specified in the through attribute stored in an array. These can be rendered on a <graph> or as a math. Enclose the reference in an <asList> component for clarity when rendering as a math.

Individual through-points or coordinates of individual through-points can be accessed using array notation.

Property Examples

Property Example: Style properties

The styleDescription, styleDescriptionWithNoun, fillStyleDescription, and borderStyleDescription properties render a text description corresponding to the styleNumber of the component.

choiceInput clampFunction

<circle>