UI Kit - Data visualization


Charts are not 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.

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 - Used to compare a smaller set of non-cyclical or time-based data in a low number of categories.
  • Line - Used to compare many points of similar non-cyclical or time-based data.
  • Area - Used to compare many points of similar non-cyclical or time-based data where seeing the overlap is important.
  • Pie - Used to show a few larger segments of a total set.
  • Donut - 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 - Used to show a segment of data is within safe or dangerous limits.
  • Icon only - Used to show a simple status or value for a segment of data.

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

  • 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.
  • Use 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).
  • Similar 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.
  • 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).
  • Keep charts simple - Not only can complexity cause confusion, it can also mask what is really going on with the data.


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

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

  • #113DA6

  • #98B7FD

  • #001F66

  • #E6EDFF

  • #E10B81

  • #A9085B

  • #FF99D1

  • #660035

  • #FFD9EE

  • #A9D400

  • #7F9F00

  • #D5E695

  • #526600

  • #EEF2DA

  • #FFCA5F

  • #CC8914

  • #FFD791

  • #805100

  • #F8E2AD

  • #2B38A1

  • #202A79

  • #959FE6

  • #08104D

  • #D9DDFF

  • #179595

  • #00647D

  • #7CBFBF

  • #003D4D

  • #C3E6E6

  • #585B73

  • #3A3C4D

  • #A3A6BF

  • #0D0E1A

  • #CFD1E6

  • #D91C29

  • #A6020D

  • #F2858D

  • #660007

  • #FFD9DB

  • #20AA50

  • #006624

  • #A3D9B6

  • #003312

  • #DAF2E3

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

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

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

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