Statistics | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The Statistics component renders a visual spotlight of one or more data points. Includes the StatisticsItem and StatisticsTrend subcomponents.

design-guidelines-statistics

  1. StatisticItem label: the statisticItem's label text.
  2. StatisticItem number: the statisticItem's primary number.
  3. StatisticTrend value: the percentage trend value.
  4. StatisticTrend direction: the direction if the trend arrow (up or down).
import { Statistics, StatisticsItem, StatisticsTrend } from '@hubspot/ui-extensions'; const Extension = () => { return ( <Statistics> <StatisticsItem label="Item A Sales" number="10000"> <StatisticsTrend direction="decrease" value="200%" /> </StatisticsItem> <StatisticsItem label="Item B Sales" number="100000"> <StatisticsTrend direction="increase" value="100%" /> </StatisticsItem> </Statistics> ); };

StatisticsItem props

Prop Type Description
id String The statistic item's unique identifier.
label Required String The item's label.
number Required String | number The string to be displayed as the item's primary number.

StatisticsTrend props

Prop Type Description
direction 'increase' (default) |
'decrease'		 The direction of the trend arrow.
value Required String The text to be displayed as the trend value.

Variants

In StatisticsTrend components, use the direction prop to describe whether the data is trend upwards or downwards.

  • increase: for additions or positive progression for a given time period.
    design-guidelines-increase-trend
  • decrease: for subtractions or negative progression for a given time period.
    design-guidelines-decrease-trend

Note that the positive or negative movement of a given statistic is intended solely to represent the increase or decrease in numerical value. Be mindful of how these movements can communicate sentiment. For example, a decrease in support volume can be a net positive, which can be confusing when represented by a red, downward arrow.

Usage examples

  • Calling out the progress of quarterly sales for a company.
  • Monitoring the amount of traffic and social media engagement that a contact has for the month.

Guidelines

  • DO: keep statistics labels short and concise.
  • DO: place statistics components towards the top of a card when possible to enable users to more easily scan information without scrolling.
  • DON'T: include more than three statistics components per card if possible.
  • DON'T: use more than four statistics components side by side.
  • DON'T: include sensitive data that you don't want all users to see.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.