The Stat component is used to display a single statistic. You can also optionally display a secondary statistic as a spark chart or a delta. On the card below, the first Stat component has only a primary statistic. The second contains a primary statistic and a spark chart, and the third contains a primary statistic and a corresponding delta. You can optionally add a link attribute to have the component open content in a takeover.

Stat dashboard components
Stat dashboard components

Stat Properties

The Stat component (type = stat) uses the following properties:

Property Type Description Required?
primary_value String The primary statistic to display. It doesn’t need to be a number - for example, $10 or 3m 10s yes
primary_label String Label displayed next to the primary stat, for example, the unit of measure yes
secondary_value String if display is delta
Array if display is sparkline
Value or array of values for a secondary statistic no (unless secondary_display is set)
secondary_display String Value must be either:
* sparkline: displays a spark line chart
* delta: displays the difference between the current value and a previous value
no
secondary_label String Label displayed next to the secondary stat, for example a unit of measure. no
link URL ​​URL to the content that displays in the takeover when the arrow is clicked. Must be served over HTTPS. Can include a JWT token. no

This graphic shows how the properties are used to display the Stat component.

Properties of the Stat component
Properties of the Stat component

Here’s an example of the JSON to display the Stat components in the above image.


[
    {
        "type": "stat",
        "primary_value": "50",
        "primary_label": "Label for the primary stat"
        "link": "https://myurl.com:jwt"
    },
    {
        "type": "stat",
        "primary_value": "50",
        "primary_label": "Stat component with sparkline",
        "secondary_display": "sparkline",
        "secondary_value": [30,50,23,10,65,20,50]
    },
    {
        "type": "stat",
        "primary_value": "50",
        "primary_label": "Stat component with delta",
        "secondary_display": "delta",
        "secondary_value": "+50%",
        "secondary_label": "Secondary label"
    }
]

Stat Design Considerations

Keep the following in mind when using the Stat component:

  • Sparklines should contain recent data and indicate their timeframe. Data should be counted in days or weeks, as months and years are too long for a quick dashboard card overview.
  • When using a sparkline, consider not pushing the latest data if it would result in reporting for an incomplete time period, as this could be potentially confusing. For example, if the chart is to show data for a full day, and you push data in the middle of the day, the number will be low compared to other days, and therefore misleading.

Help make these docs better!