Skip to main content

deltaValue Renderer

renderAs: 'deltaValue' renders a signed numeric change with color coding and an optional directional label (UP, DOWN, FLAT). Use it for period-over-period variance, KPI movement, or any metric where direction matters.

Core Examples​

Basic Delta​

Signed numeric change with UP/DOWN/FLAT label and green/red/grey coloring.

Name
Change
Aurora ChenUP +12.4
Mateo SilvaDOWN -5.2
Priya NairUP +3.1
{
  key: 'change',
  renderAs: 'deltaValue',
  renderAsOptions: { trendIndicator: true, fractionDigits: 1 },
}

Zero and Label Control​

Zero values render as FLAT with no sign prefix. trendIndicator: false removes the label entirely, leaving only the signed number — useful when space is tight or when the color alone is sufficient.

Aurora is zero: shows 'FLAT 0.0' with label, '0.0' without. Mateo is negative: 'DOWN -22.0' vs '-22.0'. Priya is positive: 'UP +14.5' vs '+14.5'.

Name
YoY (with label)
YoY (no label)
Aurora ChenFLAT 0.00.0
Mateo SilvaDOWN -22.0-22.0
Priya NairUP +14.5+14.5
// With trend label
{ renderAs: 'deltaValue', renderAsOptions: { trendIndicator: true,  fractionDigits: 1 } }
// Zero → 'FLAT 0.0'   Negative → 'DOWN -22.0'   Positive → 'UP +14.5'

// Without trend label
{ renderAs: 'deltaValue', renderAsOptions: { trendIndicator: false, fractionDigits: 1 } }
// Zero → '0.0'        Negative → '-22.0'         Positive → '+14.5'

Percent Suffix​

suffixPercent: true appends % to the formatted number. Combine with trendIndicator for compact KPI cells. A zero value renders as FLAT 0.0%.

Two percent-change columns — one non-zero and one zero (FLAT).

Name
% Change
YoY %
Aurora ChenUP +8.3%FLAT 0.0%
Mateo SilvaDOWN -3.1%DOWN -22.0%
Priya NairUP +1.7%UP +14.5%
{ key: 'pct', renderAs: 'deltaValue', renderAsOptions: { suffixPercent: true, trendIndicator: true, fractionDigits: 1 } }
{ key: 'yoy', renderAs: 'deltaValue', renderAsOptions: { suffixPercent: true, trendIndicator: true, fractionDigits: 1 } }

Custom Palette​

Override the default green/red/grey palette with your own brand colors.

Same change values using a blue/crimson/slate palette instead of the default green/red/grey.

Name
Change (custom palette)
Aurora Chen+12.4
Mateo Silva-5.2
Priya Nair+3.1
{
  key: 'change',
  renderAs: 'deltaValue',
  renderAsOptions: {
    trendIndicator: false,
    fractionDigits: 1,
    palette: { positive: '#0284c7', negative: '#b91c1c', neutral: '#64748b' },
  },
}

Options Reference​

OptionTypeDefaultEffect
trendIndicatorbooleantruePrepend UP, DOWN, or FLAT to the value.
suffixPercentbooleanfalseAppend % after the formatted number.
fractionDigitsnumber0Decimal places (clamped 0–6).
palette.positivestring'#2f855a'Color for positive values.
palette.negativestring'#c53030'Color for negative values.
palette.neutralstring'#718096'Color for zero values.
classNamestringunsetAdditional CSS class on the root element.

Caveats​

  • Non-numeric values (including null, undefined, and unparseable strings) render the plain text Invalid with no color applied.
  • Zero values use an empty sign prefix — they render as 0.0 (or FLAT 0.0 with trendIndicator), never as +0.0.
  • Positive values are always prefixed with +; negative values with -. There is no option to suppress the sign independently of trendIndicator.
  • palette accepts partial overrides — you can override only positive and let negative and neutral fall back to their defaults.
  • fractionDigits is clamped to [0, 6]. Values outside this range are silently clamped.
  • formatter can pre-process the value before rendering. Use it to normalise units (e.g. convert basis points to a decimal) before the sign and color logic runs.

See Also​