Bar Graph

The bar graph response type allows test takers to respond to an item by adjusting the height, number, and labels of bars in a bar graph or histogram.

Bar resizing is always provided for at least one bar. Test taker adjustment of the number and labels of bars may be omitted from a given item depending on its measurement goals.

Graph

Bar graphs and histograms are presented on the same graph, which includes the following elements.

  • Title (optional*). Centered above graph. Bolded and in all caps.
  • Graph border. Thick gray #757575 line that bounds the graph.
  • Major grid lines. Medium-weight gray #757575 lines that establish the major intervals of the y-axis.
  • Minor grid lines (optional*). Thin gray #757575 lines that establish the minor intervals of the y-axis.
  • x-axis. Thick black #000000 line at the bottom of the graph.
  • Axis names (optional*). Centered next to the associated axis.
  • Axis ticks. Short lines along each axis indicating the increments at which the grid lines appear. x-axis ticks are black #000000 , while y-axis ticks are gray #757575 . For the y-axis, only major grid lines receive ticks.
  • Axis tick labels. Appear immediately below (for the x-axis) or to the left (for the y-axis) of each axis tick.

* When an item in a pure mathematical context includes an xy-plane, a title and axis names are not provided.

Controls

A single-direction sizing handle is centered at the top of each resizable bar. (See the Transformable Objects page for more information about sizing handles.)

Undo and Reset buttons are right-justified beneath the graph. Both buttons use the small secondary filled button style. (See the Buttons page for more information.)

  • The Undo button reverts the last change to the graph.
  • The Reset button restores the graph to its initial state.

Bar Graph Bars

Bar graph bars are non-contiguous and have the following states.

  • Initial. Visible when the bar has a height of 0. Bar has a thick blue #127DFF border. Bar fill is not visible.
  • Default. Bar has a light blue #3B96FF fill.
  • Active. Visible while the bar’s sizing handle is being dragged. Bar fill becomes medium blue #0059C4 .
  • Pre-populated. Visible when the bar’s height is pre-set and cannot be changed by the test taker. Styling is the same as the default state, and no sizing handle is provided.
  • Disabled. Visible when the bar’s sizing handle is inactive (e.g., when a modal system tool like Scratchwork is enabled). Bar fill becomes gray #949494 .

Note: Demo only reflects states and theming. Other functionality not present. The second bar is in initial state, and the last bar is pre-populated._

The following demo presents bar graph bars where the second bar is in the initial state, and the last bar is pre-populated. The demo has limited functionality for the purpose of showing its themes and styles.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Histogram Bars

Histogram bars are contiguous and therefore require more assertive styling than bar graph bars to maintain WCAG contrast conformance. (See the Colors page for more information about color contrast.)

Histogram bars have the following states.

  • Initial. Visible when the bar has a height of 0. Bar has a thick blue #127DFF border. Bar fill is not visible.
  • Default. Bar has a light blue #B8E2FF fill and a gray #404040 border.
  • Hover. Visible when the cursor is over the bar’s sizing handle. Bar border becomes black #000000 .
  • Active. Visible while the bar’s sizing handle is being dragged. Bar border becomes black #000000 , and fill becomes medium blue #73C6FF .
  • Pre-populated. Visible when the bar’s height is pre-set and cannot be changed by the test taker. Styling is the same as the default state, and no sizing handle is provided.
  • Disabled. Visible when the bar’s sizing handle is inactive (e.g., when a modal system tool like Scratchwork is enabled). Bar fill becomes gray #949494 .

Demo only reflects states and theming. Other functionality not present. The second bar is in initial state, and the last bar is pre-populated.

The following demo presents histogram bars where the second bar is in the initial state, and the last bar is pre-populated. The demo has limited functionality for the purpose of showing its themes and styles.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.