Pictogram – an overview

What is it for?

Isotype charts use pictograms – simplified pictures of people or things – designed to function as repeatable units. Isotype and pictogram charts are often more engaging and playful than the traditional bar and column charts (but perhaps not as precise).

You can specify the orientation of the bars (whether bottom to top, left to right, top to bottom or right to left), and add filler icons with this template. It's also possible to use your own custom icons and set the value of each icon.

In this article

How to get started

There are two data sheets: Data and Icons. (The Icons sheet is optional.)

The Data sheet has 5 bindings:

Binding name Type Description
Main category Categorical (Optional) A bar is created for each main category. If left blank, the icons will appear in a single block compiling all the data. 
Sub category Categorical (Optional) A layer (or stack) within each bar is created for each sub category. If  Sub category is active, each bar will be stacked according to the categories in the chosen column. If Sub category is left blank, the bars will not be stacked.
Value Numeric Determines the size of each bar. If the Sub category binding is active, this column determines the size of each layer within each bar.
Icon id Categorical (Optional) This binding lets you associate icons with particular categories, so a chart can hold multiple icons. This template also allows you to input and use custom icons.
Color Categorical (Optional) This binding specifies which column is used to color the icons.

By default the template will automatically calculate the value each icon represents so that each bar contains a sensible number of icons (typically around 100 per bar). However, the icon value can be overridden should you prefer more or fewer icons.

The Icons sheet lets you associate icons with particular categories. It has 4 bindings:

Binding name Type Description
Icon id Unique Specifies a column containing unique IDs. The names in the Icon id binding of the Data sheet should match these IDs.
Icon Text Either a string containing the name of a built-in icon (e.g. "cat", "dog") or an SVG path string provided by the user (e.g. "M10, 10 l90,0 l0,90 l-90,0 z").
Icon width Number (Optional) If an SVG path string has been specified, this column contains the width (in pixels) of the icon.
Icon height Number (Optional) If an SVG path string has been specified, this column contains the height (in pixels) of the icon.

You can learn how to add your own custom icons to your Pictogram chart here.


The main settings of this chart are:

Settings section Setting
Chart settings Bar orientation. Sets whether the bars are vertical or horizontal
Flip bars Flips the bar direction. For example, if bar orientation is Vertical and Flip bars is true, the bars will point downwards.
Icons Icons. Sets whether the Icon binding (if set) determines the icon shapes. Otherwise, this setting determines the shape of all the icons.
Auto icon value If true, the template will compute a sensible value for each icon.
Icon value If Auto icon value is false, this setting determines the value of each icon.
Use filler icons If true, extra "filler" icons will be added to the end of each bar so that all bars are the same length. This is particularly useful when showing parts of a whole. Learn more about filler icons in our help doc.
Maximum bar value (Optional) If Use filler icons is true, this sets the maximum value of all bars. Filler icons are used to fill space between the actual maximum and the chosen maximum.
Get started with your own pictogram chart now! »