Pictorial Bar Chart

The Pictorial Bar Chart is similar in layout to a conventional 100% stacked bar chart but uses a row of symbols, with different symbols for each series.

Interactions

On hover a tooltip shows a series’ details on hover.

Usage

The first column is the label for each bar. All subsequent columns are data series.

By default, colours and glyphs are chosen automatically, however in all cases the glyphs - at least - should be overridden by configuration (see below).

Example




	








	
		

			Industry
			Male executives
			Female executives
		

	
	
		

			IT
			1203
			201
		

		

			Healthcare
			1534
			890
		

		

			Retail
			4223
			3039
		

		

			Real estate
			929
			835
		

	








Options



The following data attributes are available for a Pictorial Bar Chart.




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






Customizing glyphs



Using custom glyphs



By default, the Pictorial Bar Chart will use the first letter of the series title (columns header) as the symbol to represent the series - for example, “Male executives” would be represented by an “m”. In most cases this is not suitable and should be avoided. You can choose a different glyph for the series by adding the “data-fm-glyph” attribute to the th, like so:






Any character can be used. In the example above, the charcter is a standard UTF-8 character, which can be used as an HTML entity code or (if the HTML document has the correct character set) the character itself.



Customizing glyph classes



As well as changing the glyph, you can apply a CSS class using the “data-fm-glyph-class” annotation on a th. For example, ‘data-fm-glyph-class=”male”’ would apply a class of “male” to all symbols for Males:






Remember that the glyphs are rendered as SVG text elements, so the CSS rules are different from those for HTML. For example, SVG supports “stroke” and “fill”.



Using icon fonts



By providing a custom glyph class, setting the “font-family”, and using HTML character entities as glyphs you can utilize icon fonts. For example:






There are a number of tools online which can help you find the HTML entity value, including this one from Toolz.