A Summary Table is most often found proceeding a chart and has two variations depending on the data in the associated chart:
- Single metric - Displays the aggregate totals of the time series chart above it along with related metrics
- Breakdown metrics - Displays the aggregate totals of the time series chart above it broken down by metric, profile, etc.
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: → Transparentneutral.200
- Gradient style:
- Column widths: Determined by content, but can be overridden if necessary
- Font size: Size 100
- Font weight: 600
- Font color: neutral.600
- Match alignment of values in the rest of the column (see below)
- Font size: Size 200
- Font weight: 400
- Font color: neutral.800
- Left align non-numeric values and right align numeric values
- Font weight: 600
Content best practices
- Summary tables should follow our Number Formatting rules.
- Totals should be whole numbers, but averages should have two decimals
- The name of the metric(s) should always be displayed in the first column
- 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
- 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
- Used when displaying a single metric
- Examples: Followers, Listener Volume
- Used when breaking down metrics by sub-metrics, channels, etc.
- 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