Datapoint

View source on GitHub

Datapoint displays at-a-glance data for a user to quickly view key metrics.

Figma:

Partially ready

Web:

iOS:

Android:

A11y:

<Datapoint
  size="lg"
  title="Total impressions"
  tooltipText="The number of times your ads were seen, including earned impressions"
  trend={{ value: 30, accessibilityLabel: "Trending up" }}
  value="2.34m"
/>

<Datapoint
  size="lg"
  title="Total impressions"
  tooltipText="The number of times your ads were seen, including earned impressions"
  trend={{ value: 30, accessibilityLabel: "Trending up" }}
  value="2.34m"
/>

Props

Component props
Name	Type	Default
`title` Required	`string`	-
	The header text for the component.
`value` Required	`string`	-
	The datapoint value (e.g., 1.23M)
`badge`	`{\| text: string, type?: "info" \| "error" \| "warning" \| "success" \| "neutral" \| "darkWash" \| "lightWash", \|}`	-
	Adds a badge to the title. Currently a beta feature, expect changes.
`size`	`"md" \| "lg"`	`"md"`
	Used to set the size of the datapoint. See the size variant to learn more.
`tooltipText`	`string`	-
	Contextual information displayed in a tooltip to describe the Datapoint. See the tooltipText variant to learn more.
`tooltipZIndex`	`Indexable`	-
	Specifying the z-index of the tooltip may be necessary if other elements with higher z-indices overlap the tooltip. See ZIndex Classes to learn more.
`trend`	`{\| accessibilityLabel: string, value: number, \|}`	-
	Object detailing the trend value (change in time - e.g., +30%), and accessibilityLabel to describe the trend's icon (e.g., "Trending up"). See the trend variant to learn more.
`trendSentiment`	`"good" \| "bad" \| "neutral" \| "auto"`	`"auto"`
	A visual indicator whether the trend is considered "good", "bad" or "neutral". By setting `trendSentiment` to `auto`, a positive trend will be considered "good", a negative trend will be considered "bad" and a trend of zero will be considered "neutral". See the trendSentiment variant to learn more.

Usage guidelines

When to use

To display a single numerical metric.

When not to use

When the information to convey is qualitative (e.g., “In Progress” or “Healthy”). Use Status instead.
When the Datapoint’s metric/value is not clear or understandable in isolation.

Best practices

Whenever possible, use the full number with locale-specific separators to ensure clarity across all languages.

Don't

Use long decimal values for trend. Limit the trend to one decimal point.

Make sure to localize numeric values.

Don't

Use subjective values for Datapoint's value.

Be certain to use a positive trendSentiment only when the trend is overtly positive for the end user. Use a neutral trendSentiment in cases of ambiguity.

Don't

Be cautious of using Datapoint for large volumes of data. In cases where the content is tabular, use Table.

Accessibility

Ready

Datapoint's trend prop requires an accessibilityLabel to describe the trend icon (e.g., Trending up).

Localization

Be sure to localize the title, tooltipText and trend accessibilityLabel props. Note that localization can lengthen text by 20 to 30 percent.

Of particular importance is the need to localize the value prop. Similar to text, numerical data needs to be localized with regard to characters displayed, separators used, currency, percentages, and other considerations.

Variants

Size

<Datapoint size="md" title="Spend" value="$1.23m" />

<Datapoint size="md" title="Spend" value="$1.23m" />

Medium

<Datapoint size="lg" title="Spend" value="$1.23m" />

<Datapoint size="lg" title="Spend" value="$1.23m" />

Large

Trend

Use trend to display the change in the value of a Datapoint over time. Make sure to provide an accessibilityLabel when the trend is above or below zero.

<Flex direction="column" gap={{ column: 4, row: 0 }}>
  <Datapoint
    title="Pin clicks"
    value="1.23k"
    trend={{ value: 12, accessibilityLabel: "Trending up" }}
  />
  <Datapoint
    title="Saves"
    value="123"
    trend={{ value: 0, accessibilityLabel: "" }}
  />
  <Datapoint
    title="Total impressions"
    value="1.23m"
    trend={{ value: -5, accessibilityLabel: "Trending down" }}
  />
</Flex>

<Flex direction="column" gap={{ column: 4, row: 0 }}>
  <Datapoint
    title="Pin clicks"
    value="1.23k"
    trend={{ value: 12, accessibilityLabel: "Trending up" }}
  />
  <Datapoint
    title="Saves"
    value="123"
    trend={{ value: 0, accessibilityLabel: "" }}
  />
  <Datapoint
    title="Total impressions"
    value="1.23m"
    trend={{ value: -5, accessibilityLabel: "Trending down" }}
  />
</Flex>

Trend sentiment

By default, a positive trend will be considered "good" (displayed as a green trend), a negative trend "bad" (displayed as a red trend) and a trend of 0 "neutral" (displayed as a dark gray trend). However, the trendSentiment property can be used to explicitly set whether the trend is considered "good", "bad" or "neutral", as demonstrated below.

<Flex direction="column" gap={{ column: 4, row: 0 }}>
  <Datapoint
    title="Bounce rate"
    value="86.3%"
    trend={{ value: 29, accessibilityLabel: "Trending up" }}
    trendSentiment="bad"
  />
  <Datapoint
    title="Conversion falloffs"
    value="92"
    trend={{ value: -10, accessibilityLabel: "Tending down" }}
    trendSentiment="good"
  />
  <Datapoint
    title="Spend"
    value="$19.3k"
    trend={{ value: -4, accessibilityLabel: "Trending down" }}
    trendSentiment="neutral"
  />
</Flex>

<Flex direction="column" gap={{ column: 4, row: 0 }}>
  <Datapoint
    title="Bounce rate"
    value="86.3%"
    trend={{ value: 29, accessibilityLabel: "Trending up" }}
    trendSentiment="bad"
  />
  <Datapoint
    title="Conversion falloffs"
    value="92"
    trend={{ value: -10, accessibilityLabel: "Tending down" }}
    trendSentiment="good"
  />
  <Datapoint
    title="Spend"
    value="$19.3k"
    trend={{ value: -4, accessibilityLabel: "Trending down" }}
    trendSentiment="neutral"
  />
</Flex>

The tooltipText prop is intended to provide the user context, detail and/or framing for a Datapoint through a Tooltip.

<Datapoint
  title="Spend"
  value="$5.7k"
  tooltipText="Total ad spend in the selected time period"
/>

<Datapoint
  title="Spend"
  value="$5.7k"
  tooltipText="Total ad spend in the selected time period"
/>

With a badge

Beta

The badge prop is available to add a Badge to the title. This feature is in beta, so please use cautiously.

<Datapoint
  title="Spend"
  value="$5.7k"
  tooltipText="Total ad spend in the selected time period"
  badge={{ text: "Early access" }}
/>

<Datapoint
  title="Spend"
  value="$5.7k"
  tooltipText="Total ad spend in the selected time period"
  badge={{ text: "Early access" }}
/>

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Partially ready	Component is live in Figma, however may not be available for all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Table
Use Table when displaying a large volume of data values and trends (for instance, 10 or more).

Status
Use Status in instances where information is more categorical or qualitative (such as health or phase).

Edit page on GitHub

Datapoint

Props

Usage guidelines

Best practices

Accessibility

Localization

Variants

Size

Trend

Trend sentiment

Tooltip text

With a badge

Component quality checklist

Related