Visual Language

When there is the possibility of negative values within a chart, use vertical grey bands to align bars with their corresponding x-axis labels.

Responsiveness

At container sizes of 600px or less, the chart’s legend moves to the top, and the internal padding between elements tightens.

Editorial

Use the “Abbreviated” Y-Axis Label ,y1abbreviation, for things like currency abbreviations or other short labels, up to a maximum of 10 characters. Anything longer than that should use the “Full” Y-Axis Label, y1AxisLabel.

Include single characters, such as a “$”, at the beginning of the maximum Y-axis value. However, a “%” sign after the value should be moved to the “Abbreviated” Y-Axis label, y1abbreviation, to avoid offsetting the alignment of the Y-Axis text.