Summary tables

A Summary Table is most often found proceeding a chart and has two variations depending on the data in the associated chart:

  1. Single metric - Displays the aggregate totals of the time series chart above it along with related metrics
  2. Breakdown metrics - Displays the aggregate totals of the time series chart above it broken down by metric, profile, etc.


Single metric

Instagram Profile Performance


Breakdown metrics

Paid Performance


Visual best practices


  • Cell Padding: Space size 350
  • Table Border: 1px, Neutral 300
  • When a table has additional columns that don’t fit in the field of view, a thin gradient should be displayed along the edge of either side which has additional columns
    • Gradient style: → Transparent
  • Column widths: Determined by content, but can be overridden if necessary


  • Font size:
  • Font weight: 600
  • Font color:
  • Match alignment of values in the rest of the column (see below)


  • Font size:
  • Font weight: 400
  • Font color:
  • Left align non-numeric values and right align numeric values

Aggregate table

  • Font weight: 600

Content best practices

Number formatting

  • Summary tables should follow our Number Formatting rules.
  • Totals should be whole numbers, but averages should have two decimals


  • [Metric]
    • The name of the metric(s) should always be displayed in the first column
  • Totals
    • This column displays the total count for the metric(s) over the entire time period in the preceding chart
  • % Change
    • The final column displays the percent change versus the comparison period

Emphasis Row

  • Totals and averages should be displayed in a row(s) at the top of the table
  • Totals and averages should only be displayed when more than one data source is selected
  • In addition to totals and average, emphasis rows can also include other metrics worth emphasizing - e.g. Facebook Impression and Daily Average Reach for Facebook Pages


Single Metric

  • Used when displaying a single metric
    • Examples: Followers, Listener Volume

Breakdown Metrics

  • Used when breaking down metrics by sub-metrics, channels, etc.
    • Examples:
      • Engagement Types (Likes, Shares, Replies, Link Clicks, Other)
      • Volume totals, by channel (Facebook, Youtube, Twitter, Instagram, etc.)
    • Include an inline bar chart with each metric, space permitting. Follow the Chart Colors - Color Rotations guidelines for displaying multiple bar charts.
      • The width of the bar chart for the largest value should have a width of 100%. The other, adjacent bar charts should then have relative widths.
      • Bar chart height: Space size 400