RTL Support: Full

Accessibility: Full

Translations: Not Needed

Statistic

Statistic component is used to display a statistic with a title, a trend, a graph, and a footer.

Default

Provide a title and put the value in the default slot to render a basic statistic.

Views 24 hours

1,234,123

Trend title

vue

<template>
  <HLStatistic title="Views 24 hours" id="statistic" trendTitle="Trend title"> 1,234,123 </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
</script>

Set titleTooltipContent (and optionally titleTooltipConfig) to show a tooltip on the title.

Views 24 hours

1,234,123

Trend title

vue

<template>
  <HLStatistic
    title="Views 24 hours"
    id="statistic"
    trendTitle="Trend title"
    :show-graph="false"
    titleTooltipContent="This is a tooltip content"
    :titleTooltipConfig="{ placement: 'top' }"
  >
    1,234,123
  </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
</script>

Types

Set type to color the statistic semantically. It accepts primary (default), success, warning, error, and neutral, and tints the leading #icon accordingly.

primary

1,234

success

1,234

warning

1,234

error

1,234

neutral

1,234

vue

<template>
  <HLStatistic id="stat-success" title="Views 24 hours" type="success">
    1,234,123
    <template #icon>
      <TrendUp01Icon />
    </template>
  </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
  import { TrendUp01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Custom Icon Colors

By default the #icon is tinted by type. Override that with iconStroke (icon color) and iconBgColor (icon background) for a custom look. Both must be set together — providing only one falls back to the type tint.

Views 24 hours

1,234,123

vue

<template>
  <HLStatistic id="stat-custom-icon" title="Views 24 hours" iconStroke="#7c3aed" iconBgColor="#ede9fe">
    1,234,123
    <template #icon>
      <TrendUp01Icon />
    </template>
  </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
  import { TrendUp01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Graph and Trend

Add showGraph and provide your own chart in the #graph slot, and use the #trend slot for the delta tag beside the value.

Views 24 hours

1,234,123

100%

trend title

vue

<template>
  <HLStatistic title="Views 24 hours" id="statistic" trendTitle="trend title" showGraph>
    1,234,123
    <template #trend>
      <HLTag id="example-tag" size="lg" color="success" round>
        <template #icon>
          <TriangleIcon />
        </template>
        100%
      </HLTag>
    </template>
    <!-- Render your own chart in the #graph slot -->
    <template #graph>
      <MyTrendChart />
    </template>
  </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic, HLTag } from '@platform-ui/highrise'
  import { TriangleIcon } from '@gohighlevel/ghl-icons/24/outline'
  // MyTrendChart is your own sparkline/chart component
  import MyTrendChart from './MyTrendChart.vue'
</script>

With Options

Pass an options array to render a dropdown in the header; selecting an item emits @select.

Views 24 hours

1,234,123

vue

<template>
  <HLStatistic title="Views 24 hours" id="statistic" :show-graph="true" :options="options"> 1,234,123 </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'

  const options = [
    { label: 'Marina Bay Sands', key: 'Marina Bay Sands', disabled: true },
    { label: "Brown's Hotel, London", key: "Brown's Hotel, London" },
    { label: 'Atlantis Bahamas, Nassau', key: 'Atlantis Bahamas, Nassau' },
    { label: 'The Beverly Hills Hotel, Los Angeles', key: 'The Beverly Hills Hotel, Los Angeles' },
  ]
</script>

Title Addon

Use the #titleAddon slot to render content right after the title — a badge, a small tag, or an info icon.

Views 24 hours

Beta

1,234,123

vue

<template>
  <HLStatistic id="stat-title-addon" title="Views 24 hours">
    1,234,123
    <template #titleAddon>
      <HLTag id="addon-tag" size="xs" color="blue" round :bordered="false">Beta</HLTag>
    </template>
  </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic, HLTag } from '@platform-ui/highrise'
</script>

Clickable

Set isClickable to make the statistic focusable (keyboard-reachable) and show a pointer cursor — useful when the card links somewhere or opens a detail view.

WARNING

isClickable only applies the cursor-pointer style and a tabindex for keyboard focus — the component does not emit a click event, and an @click placed directly on <HLStatistic> will not fire. Wrap the component in a clickable element to handle the interaction, as shown below.

Views 24 hours

1,234,123

vue

<template>
  <div @click="openDetails">
    <HLStatistic id="stat-clickable" title="Views 24 hours" :is-clickable="true"> 1,234,123 </HLStatistic>
  </div>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'

  const openDetails = () => {
    // navigate or open a detail view
  }
</script>

Set type for a semantic color and a leading #icon, and use the #footer slot (with HLSectionFooter) for trailing actions.

Views 24 hours

1,234,123

Trend title

100%

vue

<template>
  <HLStatistic title="Views 24 hours" id="statistic" trendTitle="Trend title" type="success">
    1,234,123
    <template #icon>
      <TrendUp01Icon />
    </template>
    <template #trend>
      <HLTag id="example-tag" size="lg" color="success" round>
        <template #icon>
          <TriangleIcon />
        </template>
        100%
      </HLTag>
    </template>
    <template #footer>
      <HLSectionFooter :horizontalPadding="false" id="footer-5" :divider="true" :bottomPadding="false">
        <HLSectionFooterItem justify="end">
          <HLButton size="xs" id="btn-5" variant="text" color="blue" link>Learn more</HLButton>
        </HLSectionFooterItem>
      </HLSectionFooter>
    </template>
  </HLStatistic>
</template>

<script setup lang="ts">
  import { HLStatistic, HLTag, HLSectionFooter, HLSectionFooterItem, HLButton } from '@platform-ui/highrise'
  import { TrendUp01Icon, TriangleIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Event Testing

@select is the only event the component emits — it fires when a header dropdown option is selected, with the option's key and the full option object. This example logs each selection.

Views 24 hours

1,234,123

Event Log:

No events logged yet. Open the header dropdown and pick an option.

vue

<template>
  <HLStatistic
    id="stat-events"
    title="Views 24 hours"
    :options="options"
    @select="(key, option) => addEventLog('@select → ' + key)"
  >
    1,234,123
  </HLStatistic>
  <div class="text-sm">
    <p class="font-bold mb-2">Event Log:</p>
    <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Open the header dropdown and pick an option.</div>
    <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">{{ log.timestamp }}: {{ log.event }}</div>
  </div>
</template>

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const options = [
    { label: 'Marina Bay Sands', key: 'Marina Bay Sands', disabled: true },
    { label: "Brown's Hotel, London", key: "Brown's Hotel, London" },
    { label: 'Atlantis Bahamas, Nassau', key: 'Atlantis Bahamas, Nassau' },
  ]
  const eventLog = ref<{ event: string; timestamp: string }[]>([])
  const addEventLog = (event: string) => {
    eventLog.value.unshift({ event, timestamp: new Date().toLocaleTimeString() })
    if (eventLog.value.length > 5) {
      eventLog.value.pop()
    }
  }
</script>

Accessibility

aria-* attributes placed on <HLStatistic> do not reach the DOM. Apply them to a wrapping element or to the content you pass into the slots instead.
For live-updating metrics, wrap the number you put in the default slot in an element with aria-live="polite", or emit updates via an adjacent status message.
Pass a descriptive title so the metric has an accessible label alongside its value.

Props

Name	Type	Default	Description
id *	`string`	-	The id of the statistic. Rendered on the root element (this is the only attribute that reaches the DOM — see the note below the table).
title	`string`	-	The title of the statistic
type	`'primary' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`'primary'`	The type of the statistic
trendTitle	`string`	-	The title of the trend
showGraph	`boolean`	`false`	Whether to show the graph
options	`HLDropdownOption[]`	`[]`	The options rendered in the header dropdown. When non-empty, a dropdown trigger appears on hover.
titleTooltipContent	`string`	-	The content of the tooltip
titleTooltipConfig	`tooltipProps`	`{}`	The config of the tooltip
iconStroke	`string`	-	The color of the icon, this will override the `type` color
iconBgColor	`string`	-	The background color of the icon, this will override the `type` color
isClickable	`boolean`	`false`	Makes the statistic focusable and shows a pointer cursor, for use as a clickable card

WARNING

Only the id prop is rendered on the root element — any extra class, style, aria-*, data-*, or native listeners such as @click you place on <HLStatistic> are not applied to the DOM. Wrap the component in your own element when you need those.

Emits

Name	Params	Description
`@select`	`(key: string \| number, option: HLDropdownOption) => void`	Emitted when a header dropdown option is selected. Forwarded from the underlying `HLDropdown`; the payload is the option's `key` and the full option object.

Slots

Name	Params	Description
default	`()`	The default content slot
icon	`()`	The icon slot for button
trend	`()`	The trend slot
graph	`()`	The graph slot
footer	`()`	The footer slot
titleAddon	`()`	The title addon slot

Statistic

Default

With Tooltip

Types

Custom Icon Colors

With Graph and Trend

With Options

Title Addon

Clickable

With Footer

Event Testing

Accessibility

Props

Emits

Slots

Statistic ​

Default ​

With Tooltip ​

Types ​

Custom Icon Colors ​

With Graph and Trend ​

With Options ​

Title Addon ​

Clickable ​

With Footer ​

Event Testing ​

Accessibility ​

Props ​

Emits ​

Slots ​

Statistic

Default

With Tooltip

Types

Custom Icon Colors

With Graph and Trend

With Options

Title Addon

Clickable

With Footer

Event Testing

Accessibility

Props

Emits

Slots