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.
The Stat component (
stat) uses the following properties:
||String||The primary statistic to display. It doesn’t need to be a number - for example, $10 or 3m 10s||yes|
||String||Label displayed next to the primary stat, for example, the unit of measure||yes|
||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)|
||String||Value must be either:
* sparkline: displays a spark line chart
* delta: displays the difference between the current value and a previous value
||String||Label displayed next to the secondary stat, for example a unit of measure.||no|
||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.
Here’s an example of the JSON to display the Stat components in the above image.
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.