Infograms

Currently, there are six infogram types. Each type has been selected to visually represent actual data in various settings. For example, the bar, line and multiline infogram types communicate one point of data, but do so in a way that can give a visual snapshot, depicting an upward or downward trend, leading to that singular data point. Each type is suited, in its own way, to a targeted and instant visual comprehension of the data represented.

Draw infograms on the 32px x 32px master grid to maintain consistent positioning and proportions across the IBM pictogram set.

Use the the grid lines as your basic guideline to snap the stroked linework of your design elements. We recommend making adjustments along the way to ensure the right amount of details work at every size. The grid contains 1px padding. This padding ensures that the pictograms retain their desired appearance when exported. Only extend artwork into the padding for additional visual weight when necessary.

Infogram line weight is consistent with the line weight used in IBM pictograms, except for the highlighted data point. The highlighted data point uses a 1.5x stroke weight compared to the rest of the infogram, as well as a color fill. For circular gauge charts, a dotted line represents an inactive portion of the data sum.

When drawing standard grid infograms, data should be constrained to a 28px height within the grid. Data points should be placed within the 28px construction area proportional to their value. When a proportional value results in a non-integer number, round it up or down to the nearest integer and snap the line to the grid.

Infograms can be constructed on a radial grid, where necessary, based on the chart type. Unlike rules for IBM pictogram construction, infograms drawn on a radial grid should prioritize data accuracy over snapping to the grid. Occasionally, data points and line terminals will necessarily occur between grid lines.

Radial charts are typically used to display data as percentages of a whole. This data is mapped on a radial grid that breaks the circumference into 1% increments. In circular gauge charts, a solid line represents the main numerical data value of the chart, while a dotted line represents the remaining sum.

Infograms contain built-in numerical values of the hero statistic to give the chart meaning. Typography should be set in IBM Plex® Sans Mono at a 6px scale. The baseline of this text should align to the 32px grid with special care taken so that any portion of the typography does not extend beyond the boundary of the grid.

Because of the inherent kerning characteristics of monospace type, decimal points will need to be adjusted for optical balance. Decimal kerning should be set to -150 units on both sides.

Color is an important tool for clearly communicating data within a chart. Be sure to follow color contrast rules for accessibility when coloring infograms. Highlighted data points and values should be directly associated with their quantifier. One to three color families can be used when coloring infograms, though single-color families are recommended. Make sure the chosen colors meet accessibility requirements for contrast and color blindness.