Skip to main content

DeltaText

DeltaText

An inline change against a previous value, coloured by whether the direction is good

Tags: chart stat kpi delta change comparison table reporting

View Demo

DeltaText shows how a value changed against a previous one: a ▲/▼ arrow, the signed change (percent, absolute or both) coloured by whether the direction is good, and a "vs previous" label. It is the change line of StatCard as its own component, for KPI rows, table cells and anywhere else a value is compared with a prior period. It renders nothing when either value is missing.

Svelte only (@classic-homes/charts-svelte); React support is pending.

Import​

<script>
  import { DeltaText } from '@classic-homes/charts-svelte';
</script>

Basic Usage​

<script>
  import { DeltaText } from '@classic-homes/charts-svelte';
</script>

<DeltaText current={142} previous={130} label="vs last year" />

Props​

Prop Type Default Description
current number | null | undefined required The current value
previous number | null | undefined required The value compared against
display 'percent' | 'absolute' | 'both' 'percent' How the change is shown; a change from zero falls back to absolute
goodWhen 'up' | 'down' | 'none' 'up' Which direction is coloured as good; 'none' stays neutral
valueFormat ValueFormat - How the absolute change and the previous value are written
locale string 'en-US' Locale for valueFormat and the percentage
label string 'vs <previous>' Text after the change; '' hides it
class string - Custom CSS class

A rise is green when goodWhen is 'up' and red when it is 'down'; 'none' keeps it neutral. A change from zero has no percentage, so 'percent' falls back to the absolute change.

Examples​

Lower Is Better​

<DeltaText current={112} previous={121} valueFormat="days" goodWhen="down" display="both" />

In a Table Cell​

{#snippet closingsCell(value, row)}
  <div class="flex flex-col items-end">
    <span class="tabular-nums">{value}</span>
    <DeltaText current={row.closings} previous={row.priorClosings} label="" />
  </div>
{/snippet}

<DataTable
  {data}
  columns={[{ id: 'closings', header: 'Closings', accessor: 'closings', cell: closingsCell }]}
/>

Accessibility​

  • Direction is shown with ▲/▼ and a sign as well as colour; the arrow itself is hidden from screen readers
  • Numbers use tabular figures so columns of changes line up
  • StatCard - A headline metric with its change and trend
  • StatGroup - Responsive grid of stat cards
On this page