Customizing Style

Editing SASS

Factmint Charts visualizations have been developed using SASS, with the SCSS syntax. In order to modify the appearance of a visualization, you can edit the supplied stylesheets, or you can override any classes with your own stylesheet (which can, of course, be plain CSS).

theme.scss (Download)

Generic styles that are applicable to all types of chart.

This includes basic properties such as background/foreground colours, typography settings, and the main colour wheel. The wheel consists of twelve colours, which have been selected to work well in various sequences used on the visualizations. Additionally, there is an overflow colour that is used on visual elements that indicate data that could not fit on the visualization in its basic form (an example being the black "overflow" segment on pie charts that can be clicked to reveal data that was hidden).

classes.scss (Download)

Generic classes that can be applied to elements on any type of chart.

This stylesheet generates colour classes based on the colour definitions in variables.scss. There is a class for each colour in the colour wheel, with the added option of using it to stroke an element (e.g. .fm-color-wheel-a .with-stroke) or to avoid filling the element (e.g. .fm-color-wheel-c .no-fill).

chart-name.scss (See below for download)

Styles that are specific to a given type of chart.

If you modify this stylesheet, ensure that the two @import calls at the top to variables.scss and classes.scss remain in place, otherwise you will lose the generic styles (which will likely break your visualizations). This is the main SCSS file that can be compiled using Sass to create a new chart-name.css.