Stacked Column/Bar Chart

A stacked column/bar chart uses stacks of vertical columns or rows of sequential bars to represent groups of data. This is useful when you have a number of totals with breakdowns. The Stacked Column/Bar Chart will favour drawing a stacked column chart, which is easier to read, but will switch to a stacked bar chart if there is too much data to comfortably fit along the x-axis.

Interactions

On hover a tooltip shows the total and breakdown of a stacked column or bar.

Usage

The first data column is the name of the entity or group. All subsequent data columns represent a data series. The chart will draw a coloured column/bar for each series, with the series name shown in the key.

Example

Options

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

data-fm-axis-label

Adds a label to the axis used for values (which depends if stacked 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-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)