Scatter Graph

A Scatter Graph is used to show correlations between two measures, X and Y.

Interactions

On hover a tooltip shows the details of a particular point.

Usage

The first column is the label for each point. The second and third are the X and Y values, respectively. The fourth column, which is optional, can be used to define groups. If a groups column is used the points will be coloured based upon their group and a key will be present below the scatter graph to show which colours correspond to which groups.

Example

Options

The following data attributes are available for a Scatter Graph:

data-fm-x-prefix

Adds a prefix to x values (displayed on hover). For example, you may wish to add the ‘£’ symbol before each number

data-fm-x-suffix

Adds a suffix to x values (displayed on hover). For example, you may wish to add the ‘$’ symbol after each number

data-fm-y-prefix

Adds a prefix to y values (displayed on hover). For example, you may wish to add the ‘£’ symbol before each number

data-fm-y-suffix

Adds a suffix to y values (displayed on hover). For example, you may wish to add the ‘$’ symbol after each number

data-fm-show-trend-lines

Adds trend lines ('lines of best fit') to your plotted data. One line will be drawn for each group of points

data-fm-height

Enforces an explicit height. Expects a value with CCS syntax, e.g. "250px" (see sizing guide)

data-fm-width

Enforces an explicit width. Expects a value with CCS syntax, e.g. "800px" (see sizing guide)

data-fm-enable-spillover

If "true", the scatter graph will draw some transient elements outside of its configured height and width (see layout guide)