Tables and charts

Large sets of data can be overwhelming and frustrating – but well-presented data inspires action and answers questions, such as:

  • “What’s most important right now? Tomorrow? Next year?”
  • “Are there any strange patterns?”
  • “What haven’t we thought about?”
  • “Is this the right choice?”
    Help people know what’s happening now, what might happen later, if there are unusual things going on, how different parts of a business are doing, or nuanced details about a record – and what to do with that information.
    Don’t rely only on tables, charts and timelines oftentimes tell better stories with the data.

Where they appear

Large sets of data appear throughout the design system. Here are just some places you’ll find them:

  • On their own landing pages, dashboards, or within widgets or tabs within those pages
  • In ‘Explore Data’ Insights
  • Within Cases or Data object tabs
  • Within forms
  • And even within Charts as a click through to Tables

Choices designers and developers make

There are many small configurations for data displays, but two main questions will guide the direction to take.

Location

Where data is shown is a user experience question. Answer the following to choose the right location:

  • Critical daily info: Use on a Landing page set as the home page. Mix tables, charts, KPIs, timelines, as needed to show what’s important each day. However, be aware Landing pages can’t filter data at the page level.
  • Curated data collections: Dashboards let users customize and filter data at the page level. They’re not as easy to set up as Landing pages, so don’t use it as the home page. However, they are great for supporting content for business functions.
  • Exploring complex data: Provide the “Explore data” page in the design system. Users can create Public, Private, or Shared insights with charts, tables, and other visuals.
  • Details and actions for current work: Show tables, timelines, and other visuals in Case or Data object tabs, alongside forms being worked on. Of note, it’s not best practice to include tables or timelines within forms. If needed, check the Building forms page for guidance. Additionally, Insight-based assets aren’t supported in forms.

Answering user questions

Large sets of data should be actionable. Most user questions about data fall into these categories, listed from fastest to slowest to understand:

  • What’s important now?
    • Simple value insight – Best used for critical KPIs. Shows trends and conditions. Low visual impact; can be used more often than Gauges.
    • Gauge insight – Shows health based on thresholds. Higher visual impact than Simple values. Use sparingly to prevent visual overload.
    • Pie & Donut insights –Common chart for understanding how categories add up to 100% during a certain point of time. Pie has a higher visual impact than Donut. Use Pie for important data, Donut for less critical data.
  • What’s been happening? What trends are forming?
    • Line insight – Shows values over time, handles both negative and positive values well. Supports multiple categories but doesn’t show how they relate as a unit. Has a lower visual impact than Area.
    • Bar or column insights – Shows values over time, doesn’t handle negative numbers as well as Line charts. Higher visual impact than Line, best for understanding trends of a set together over time. Stacked bar or column charts with few categories are best for understanding trends of collection over time. Choose layout based on space; don’t forget to check 400% zoomed layout size as well.
    • Area insight – Similar to Line, shows values over time. Higher visual impact but doesn’t handle negative numbers or many categories well.
    • Timeline view – Sortable rows grouped by time. Best for understanding historic changes or interactions on a case. Iconography can be applied conditionally to entry types.
    • Summary table insight – Simple tally of groups or categories. Allows for drill-in and reviewing full data set. Best for extreme amounts categories or returning a fixed number of results.
  • What are my outliers or root causes?
    • Bubble chart insight – Shows impact of individual points by color, size, and location. Helpful for finding outliers in small data sets.
    • Pareto insight – Identifies significant issues. Bars arranged from most to least impactful. Use cautiously as it’s hard to understand for those unfamiliar.
  • Is this the right object, record, or choice? What don’t I know?
    • Tables – Most robust display type, supports millions of records and intense data manipulation. Choose based on user needs and where info must appear:
      • View-based tables provide configurations to: Filter, sort, group, hide/show columns, manage display size, save views, export data, bulk actions, reorder rows/columns, add/edit/delete records.
      • Insight-based tables provide configurations to: conditionally format, save custom views, filter, sort, and group. While it isn’t recommended to do so anyways, these tables cannot be used within forms.
        No matter the direction taken, always use clear, concise labels, legends, and headings to help users understand the data.

Learn how to configure table or timeline views or configure insights here.

What the design system takes care of

While most configurations are highly flexible, there are some settings handled automatically.

Charts

Charts have standardized legends, set label sizes, basic keyboard navigation methods , and preconfigured category colors to help those with color blindness.

Tables and grids

  • Pega’s tables are actually grids, following ARIA guidelines. This helps keyboard users navigate without getting stuck in large grids.
  • Grids have specific design rules: toolbar actions are in a set order for easier wayfinding, numeric values are right aligned for simpler calculation, and row actions are at the end for consistency.
  • Grids don’t use pagination. Searching, sorting, filtering, and grouping are more efficient than repeated actions to arrive at a specific page – especially as results may vary with incoming data.

While components can’t be placed wherever in the UI via authoring, knowing how they work in these patterns can help you understand our center-out design practices.