Column/Bar Chart

A column chart uses vertical bars to represent groups or data, a bar chart uses horizontal bars. The Column/Bar Chart will favour drawing a column chart, which is easier to read, but will switch to a bar chart if there is too much data to comparably fit along the x-axis.

Interactions

On hover a tooltip shows the exact value of a column or bar.

Usage

The first data column is the name of the entity. All subsequent data columns represent a data series. If you have multiple series then there will be one coloured column/bar for each series, with the series name shown in the key.

Example

Options

The following data attributes are available for a Column/Bar Chart:

data-fm-axis-label

Adds a label to the axis used for values (which depends if column or bar chart is being shown)

data-fm-value-prefix

Adds a prefix to the values. For example, you may wish to add the ‘£’ symbol before each number

data-fm-value-suffix

Adds a suffix to each of your values. For example, you may wish to add the ‘$’ symbol after each number

data-fm-pullout-items

Comma separated list of bars to draw attention to, can be either the data series number or the data series name (e.g. “Ice cream”)

data-fm-pullout-title

Adds a title to the key explaining the pull-out items

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 column/bar chart will draw some transient elements outside of its configured height and width (see layout guide)