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.

  • #076

    Blue
  • #24619D

  • #8FCDE5

  • #001E5B

  • #E2F4F9

  • #B50079

    Magenta
  • #790044

  • #D640B0

  • #49001F

  • #EC7ED9

  • #7CA82B

    Lime
  • #466D18

  • #B3CE68

  • #203F0B

  • #DCE99E

  • #FF9D00

    Goldenrod
  • #BF6300

  • #FFC840

  • #813700

  • #FFE67E

  • #87269B

    Purple
  • #4F1562

  • #BC64C7

  • #260A36

  • #E09AE5

  • #67BBC1

    Teal
  • #3A7F85

  • #99D5D9

  • #1A4D51

  • #C2EAEB

  • #666

    Grey
  • #393939

  • #9f9f9f

  • #1a1a1

  • #cbcbcb

  • #C23824

    Red
  • #871F14

  • #DD7462

  • #530F09

  • #EFA898

  • #0B8753

    Green
  • #064F2E

  • #4ABC8D

  • #032617

  • #86E0BC

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

Dark theme

When charts are meant to show “behind the scenes” analysis or data, a dark theme should be used. Dark theme uses the same color palette for data as the normal theme. This theme adjusts colors for the background, text, and lines.

  • #293135

    Background
  • #FFF

    Text
  • #516168

    Lines
Dark theme example

Last updated: Jun 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Empty states