`<graph>`

A 2D coordinate-axis graph

<graph> is a Graphical component that renders a 2D cartesian graph.

Attributes and Properties

Attributes for `<graph>`

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.

Other (30)

addControls

keyword. Whether to render interactive zoom/pan controls.

Value	Description
`all`	Render both sliders and input boxes.
`slidersOnly`	Render only slider controls.
`inputsOnly`	Render only input-box controls.
`none` (default)	Render no interactive controls.

aspectRatio

number. Default value: 1. Aspect ratio (width / height) for the graph.

controlsPosition

keyword. Position of the graph controls.

Value	Description
`bottom`	Place controls below the graph.
`left` (default)	Place controls to the left of the graph.
`right`	Place controls to the right of the graph.
`top`	Place controls above the graph.

decorative

boolean. Default value: false. Whether the graph is purely decorative (excluded from a11y tree).

displayMode

keyword. How to size the graph.

Value	Description
`block` (default)	Display as a block element on its own line.
`inline`	Render inline with surrounding text.

displayXAxis

boolean. Default value: true. Whether to display the x axis.

displayXAxisTickLabels

boolean. Default value: true. Whether to display labels on x-axis ticks.

displayXAxisTicks

boolean. Default value: true. Whether to display tick marks on the x axis.

displayYAxis

boolean. Default value: true. Whether to display the y axis.

displayYAxisTickLabels

boolean. Default value: true. Whether to display labels on y-axis ticks.

displayYAxisTicks

boolean. Default value: true. Whether to display tick marks on the y axis.

fixAxes

boolean. Default value: false. Whether the axis limits are locked (preventing zoom/pan).

grid

text. Grid density to render on the graph (off, minor, medium, or major).

hideOffGraphIndicators

boolean. Default value: false. Whether to suppress indicators for objects outside the visible region.

horizontalAlign

keyword. Horizontal alignment of the graph within its container.

Value	Description
`center` (default)	Center the graph horizontally.
`left`	Align the graph to the left edge.
`right`	Align the graph to the right edge.

identicalAxisScales

boolean. Default value: false. Whether to force the x and y axis scales to be equal.

renderer

keyword. Which renderer to use for the graph.

Value	Description
`doenet` (default)	Render using the built-in Doenet graph renderer.
`prefigure`	Render using the PreFigure SVG-based renderer.

showBorder

boolean. Default value: true. Whether to render a border around the graph.

showNavigation

boolean. Default value: true. Whether to show navigation controls (pan/zoom).

size

keyword. Named size preset for the graph.

Value	Description
`tiny`	About 1/12 the full width.
`small`	About 30% of the full width.
`medium` (default)	About half the full width.
`large`	About 70% of the full width.
`full`	The full available width.

width

componentSize. Explicit width of the graph (overrides size).

xLabelPosition

keyword. Position of the x-axis label.

Value	Description
`right` (default)	Place the x-axis label at the right end of the axis.
`left`	Place the x-axis label at the left end of the axis.

xMax

number. Default value: 10. Maximum value displayed on the x axis.

xMin

number. Default value: -10. Minimum value displayed on the x axis.

xTickScaleFactor

math. Scale factor applied to x-axis tick spacing.

yLabelAlignment

keyword. Alignment of the y-axis label.

Value	Description
`left` (default)	Align the y-axis label to the left of the axis.
`right`	Align the y-axis label to the right of the axis.

yLabelPosition

keyword. Position of the y-axis label.

Value	Description
`top` (default)	Place the y-axis label at the top of the axis.
`bottom`	Place the y-axis label at the bottom of the axis.

yMax

number. Default value: 10. Maximum value displayed on the y axis.

yMin

number. Default value: -10. Minimum value displayed on the y axis.

yTickScaleFactor

math. Scale factor applied to y-axis tick spacing.

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 `<graph name="g">`

Number display (5)

$g.avoidScientificNotation

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

$g.displayDecimals

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

$g.displayDigits

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

$g.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$g.padZeros

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

Other (42)

$g.addControls

text. Whether to render interactive zoom/pan controls.

$g.aspectRatio

number. The aspect ratio (width / height) of the graph.

$g.controlsPosition

text. Position of the graph controls.

$g.decorative

boolean. Whether the graph is purely decorative (excluded from a11y tree).

$g.disabled

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

$g.displayMode

text. How to size the graph.

$g.displayXAxis

boolean. Whether to display the x axis.

$g.displayXAxisTickLabels

boolean. Whether x-axis tick labels are displayed.

$g.displayXAxisTicks

boolean. Whether to display tick marks on the x axis.

$g.displayYAxis

boolean. Whether to display the y axis.

$g.displayYAxisTickLabels

boolean. Whether y-axis tick labels are displayed.

$g.displayYAxisTicks

boolean. Whether to display tick marks on the y axis.

$g.effectiveRenderer

text. The renderer actually used after resolving fallbacks.

$g.fixAxes

boolean. Whether the visible axes range is locked.

$g.fixed

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

$g.fixLocation

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

$g.grid

Grid line spacing on the graph.

$g.hasAuthorAnnotations

boolean. Whether the graph contains any author-provided <annotations> child.

$g.hidden

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

$g.hideOffGraphIndicators

boolean. Whether to suppress indicators for objects outside the visible region.

$g.horizontalAlign

text. Horizontal alignment of the graph within its container.

$g.identicalAxisScales

boolean. Whether to force the x and y axis scales to be equal.

$g.prefigureXML

text. The Prefigure-formatted XML rendered for this graph, or null if not using the Prefigure renderer.

$g.renderer

text. Which renderer to use for the graph.

$g.shortDescription

text. A short accessibility description of the graph.

$g.showBorder

boolean. Whether to render a border around the graph.

$g.showNavigation

boolean. Whether to show navigation controls (pan/zoom).

$g.size

text. The size of the graph.

$g.width

componentSize. The width of the graph.

$g.xLabel

label. The x-axis label text.

$g.xLabelPosition

text. Position of the x-axis label.

$g.xMax

number. Maximum x value displayed.

$g.xMin

number. Minimum x value displayed.

$g.xscale

number. Scale used along the x axis (xMax − xMin).

$g.xTickScaleFactor

math. Scale factor applied to x-axis tick spacing.

$g.yLabel

label. The y-axis label text.

$g.yLabelAlignment

text. Alignment of the y-axis label.

$g.yLabelPosition

text. Position of the y-axis label.

$g.yMax

number. Maximum y value displayed.

$g.yMin

number. Minimum y value displayed.

$g.yscale

number. Scale used along the y axis (yMax − yMin).

$g.yTickScaleFactor

math. Scale factor applied to y-axis tick spacing.

Common to all components (4)

$g.doenetML

text. The DoenetML source code that produced this component.

$g.hide

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

$g.isResponse

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

$g.styleNumber

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

Examples Page 1

Example: Default `<graph>`

Here a default <graph> is illustrated without any additional attributes.

Example: `<graph>` with default grid

A <graph> with a default grid is illustrated. As you zoom in and out of the graph the size of the grid adapts to the view. To zoom, use the (+) and (-) buttons at the bottom of the graph.

Example: Invisible `<graph>` with shapes

A <graph> without border, axes, or navigation buttons appears invisible.

Example: `<graph>` with axis labels

Axis labels are specified using the <xLabel> and <yLabel> components as children of the <graph>.

Example: `<graph>` with legend

Legends are constructed by adding a <legend> child to the <graph> component. See <legend> for more examples.

Example: Components that can be placed on a `<graph>`

Many different components can be placed on a <graph>. If the anchor attribute is included, the rendered object is centered at the point specified. Otherwise, the component is centered at $(0,0)$ .

Note that <mathInput/> components cannot be placed on a <graph>. Instead, a <textInput/> can be included, and basic math expressions can be performed for math entered into a <textInput/>.

Attribute Examples

Attribute Example: xmin, xmax, ymin, ymax

Use the xmin, xmax, ymin and ymax attributes to adjust the extents of the axis scales. Note that the relative proportions of the axes will automatically adjust to keep the <graph> square unless the identicalAxisScales attribute is also specified, as illustrated in the second graph.

Attribute Example: width

The width attribute specifies the absolute width of the graph. Doenet determines the size category that corresponds to that width and sizes the graph accordingly.

Attribute Example: size

The size attribute specifies one of 5 size categories for the <graph>: tiny, small, medium, large, or full.

Attribute Example: aspectRatio

The aspectRatio attribute allows for customization of the graph’s default proportions.

Attribute Example: displayMode

The displayMode attribute affects how the <graph> is positioned on screen. The default mode is “block”, which renders the graph centered on screen. The available modes are inline, and block.

Attribute Example: horizontalAlign

The horizontalAlign attribute specifies the horizontal position on-screen for the default block-mode style graph. Valid values are left, center, and right, with a default of center.

givenAnswer graph (Page 2)

<graph>

Attributes and Properties

Attributes for <graph>

Properties for <graph name="g">