Chart Layout and Sizing

By default, Factmint charts will draw themselves in an SVG. The actual chart will attempt to make the best use of the space available; for a column chart that would mean filling the space but for other chart types - like Pie Charts - there is an optimum aspect ratio which may lead to unused white-space for some dimensions.

Configuring chart size

All charts accept configuration values: data-fm-width and data-fm-height. Both of these values can be set to any valid CSS length, including px, %, em and rem. By default, the width is 100% and the height is 450px.

The chart would then appear within this space:

Chart "spillover"

Most charts can be configured to create an SVG element which is larger than the chart’s size; a negative margin is applied to keep the position of the chart consistent despite the larger SVG element.

This creates extra room around the graphic, allowing for transient elements, such as tooltips.

There are some disadvantages to enabling the spillover - most notably that the visualization will sit on top of any previous content, potentially covering links and other clickable content. The spillover can be enabled by setting the configuration option: data-fm-enable-spillover=”true”. The reason for the inclusion of the spillover option is that by default all content, including transient elements, will be drawn within the area defined by data-fm-width and data-fm-height: this can sometimes cause the chart to appear to be surrounded by too much negative space when the transient elements are not visible.