Charting

Charting

Charts aren't decoration, they bring sanity to unwieldy rows of data, teasing out the hidden stories and trends that live below the surface. Great charts point your user toward the right response at the right time.

Which chart to use

Use charts instead of tables when possible to answer questions about your data. Choosing the proper chart type best reveals the hidden story in your data.

  • Bar iconBar - Used to compare a smaller set of non-cyclical or time-based data in a low number of categories.
  • Line iconLine - Used to compare many points of similar non-cyclical or time-based data.
  • Area iconArea - Used to compare many points of similar non-cyclical or time-based data where seeing the overlap is important.
  • Pie iconPie - Used to show a few larger segments of a total set.
  • Donut iconDonut - Used to show smaller segments in a total set, to show progress in smaller areas, or to show a piece of data or icon in the center.
  • Gauge iconGauge - Used to show a segment of data is within safe or dangerous limits.
  • Icon only iconIcon only - Used to show a simple status or value for a segment of data.

Chart clarity

While charts can be pleasant to look at, poorly executed charting has some seriously misleading effects. Design charts to be clear and understandable.

  • 3D perspective icon Use 2-D charts - Typically 3-D charts are hard to read. Especially with pie charts, perspective can make certain portions of data seem larger than they really are.
  • Clear axis iconUse standard, consistent axes - Volatility can be masked or exaggerated by altering the spread of an axis (e.g., starting at 300 - 400 instead of 0 - 400 increases visual volatility).
  • Different ratio iconSimilar charts presented together should use the same display ratio - A chart with the same data may look less drastic when stretched horizontally than if it is stretched vertically.
  • Missing data points icon Be wary of hiding data points - Dropping values between sets may hide volatility (e.g., 2003 has 10 leads, 2004 has 1, 2005 has 9. Showing only 2003 & 2005 hides the spike.)
  • Complex chart iconKeep charts simple - Not only can complexity cause confusion, it can also mask what’s really going on with the data.

Theming

The default palettes and patterns for charts are specifically created with color-perception disabilities in mind.

Palette

The default palette starts from the left, moves to the right, then down to the left again. To show sub-sections of a segment, you can use a monochromatic palette, which is ordered from top to bottom (you may see an example of this in the upcoming pie chart). True red and green are reserved for positive or negative charting.

  • #295ED9

    Blue
  • #113DA6

  • #98B7FD

  • #001F66

  • #E6EDFF

  • #E10B81

    Magenta
  • #A9085B

  • #FF99D1

  • #660035

  • #FFD9EE

  • #A9D400

    Olive
  • #7F9F00

  • #D5E695

  • #526600

  • #EEF2DA

  • #FFCA5F

    Yellow
  • #CC8914

  • #FFD791

  • #805100

  • #F8E2AD

  • #2B38A1

    Purple
  • #202A79

  • #959FE6

  • #08104D

  • #D9DDFF

  • #179595

    Teal
  • #00647D

  • #7CBFBF

  • #003D4D

  • #C3E6E6

  • #585B73

    Grey
  • #3A3C4D

  • #A3A6BF

  • #0D0E1A

  • #CFD1E6

  • #D91C29

    Red
  • #A6020D

  • #F2858D

  • #660007

  • #FFD9DB

  • #20AA50

    Green
  • #006624

  • #A3D9B6

  • #003312

  • #DAF2E3

Patterns

While most items do not have a pattern by default, patterns are another way for a user (especially color-blind ones) to easily distinguish segments. It is recommended to use each pattern as white or black at a 10 - 20% opacity over the palette color.

Patterns example

Layouts - KPI

A key performance indicator (KPI) can be displayed as a single value, non-interactive chart. These charts are typically used as supplemental info in a case.

KPI layout examples

Layout - Widgets

Single dimension or multi-dimension charts are typically used for dashboards or reporting. Interactivity is hidden when printing or converting to PDF. Static charts display the currently manipulated data.

Widget layout examples

Chart interaction

You can have as many or as few of the following interactions as make sense for your use case. By default, all interactions are enabled.

Interaction examples

Chart tooltips

Tooltip borders and categories inherit the color of the element and fade in -20px from where their arrow points. The tail of the tooltip should be pointing to the central part of the arc or line from which it appears. You can also make tooltips sticky by clicking a non-explorable chart element. Clicking the element again will disable it. Sticky tooltips are printed / are part of the generated PDF file.

Tooltips example

Last updated: Jul 2018

Next: Common actions