The Icon Chart widget allows you to create an infographic that uses the size of the data value for an area using a set of repeating icons.

The section below describes specific settings for the Icon Chart widget. Note that generic widget settings are described on the Widget Generic Settings page, so if you cannot find the setting you are looking for check there too.



Choose an icon type.


Type the URL to an image or use the browse button to the right of the box. This setting will be greyed out if Type is not ‘image’.


Type a tooltip format for the icon(s) e.g. #COLOR #FNAME, #INAME: #IVALUE


Choose an icon for the widget. Type some text in the box to see any matching icons e.g. ‘male’ or use the arrow to the right of the box to access the list of available icons. You can add more than one icon if you wish. There is a button to toggle direct edit view if you wish to enter a list of icon names with a space between each e.g. ‘arrow-left arrow-right’


Type or use the arrow buttons to set the size of the icon(s).

Value per icon

Type or use the arrow buttons to set a value per icon e.g. ‘100’ if you want each icon to represent a value of 100.


Choose a color palette for the icons. You can edit the active palette by clicking the x buttons to remove colors or the + button to add colors. There are also buttons to change to a different palette completely, to copy/paste color codes to/from the clipboard and to toggle the direct edit view that allows you to type in color codes delimited by commas e.g. #a6cee3 #b2df8a #fb9a99 #fdbf6f #cab2d6 #ffff99 #1f78b4 #33a02c #e31a1c #ff7f00.


Choose a layout for the icons.

Bar labels

Type a label format for the bars in the chart e.g. #INAME<br/><b>#IVALUE</b>

Bar labels alignment

Choose an alignment for bar labels.

Bar labels width

Choose a width for bar labels.

Bar Value labels

Choose a label format for bar value labels e.g. #IVALUE

Bar separation

Type of use the arrow buttons to set a bar separation value.

Icons – Layout


Choose an alignment for the icons.