<graph>

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

Attributes and Properties

Examples Page 1

Example: Default <graph>

<graph>
  <point/>
  <line>y = x</line>
</graph>

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

Example: <graph> with default grid

<graph grid>
  <point/>
  <line>y = x</line>
</graph>

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 Example: xmin, xmax, ymin, ymax

<graph 
  name="g" 
  xmin="-1" 
  xmax="1" 
  ymin="-2" 
  ymax="2" 
  size="small">
    <point/>
    <line>y = x</line>
</graph>
 
<graph extend="$g" identicalAxisScales/>

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

<p>Enter a width for the graph:
<mathInput name="w" prefill="80"/> pixels.</p>
<graph name="g" width="$w">
  <point/>
  <line>y = x</line>
</graph> 
<p>The size for that width is:
$g.size</p>
 
 

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

<graph name="g" size="small">
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" size="tiny"/>

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

Attribute Example: aspectRatio

<graph name="g" aspectRatio="2/1">
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" aspectRatio="1/2"/>

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

Attribute Example: displayMode

<graph name="g" displayMode="inline" size="tiny">
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" displayMode="block" size="tiny"/>

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

<p>A left graph</p>  
<graph name="g" displayMode="block" horizontalAlign="left" size="tiny">
  <point/>
  <line>y = x</line>
</graph>
 
<p>A centered graph (default)</p>
<graph extend="$g" horizontalAlign="center"/>
 
<p>A right graph </p>
<graph extend="$g" horizontalAlign="right"/>

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.