Home Components Delta

Delta

36.6% ▲ 
<Delta data={sales} column=growth fmt=pct1 />

Examples

Value Types

Positive & Negative

36.6% ▲ -36.6% ▼ 
<Delta data={sales} column=growth fmt=pct1 />

Neutral

36.6% –  
<Delta data={sales} column=growth fmt=pct1 neutralMin=-0.4 neutralMax=0.4 />

Values are not defined as neutral until you define a range using the neutralMin and neutralMax props

Chips

Positive & Negative

36.6% ▲ -36.6% ▼ 
<Delta data={sales} column=growth fmt=pct1 chip=true />

Neutral

36.6% –  
<Delta data={sales} column=growth fmt=pct1 chip=true neutralMin=-0.4 neutralMax=0.4 />

Values are not defined as neutral until you define a range using the neutralMin and neutralMax props

Symbol Position

Symbol on Left

▲ 36.6% 
<Delta data={sales} column=growth fmt=pct1 symbolPosition=left/>

Symbol on Left in Chip

▼ -36.6% 
<Delta data={sales} column=growth fmt=pct1 chip=true symbolPosition=left/>

Options

data
Required

Query name, wrapped in curly braces

Options:
query name
column

Column to pull values from

Options:
column name
Default:
First column
row

Row number to display. 0 is the first row.

Options:
number
Default:
0
value

Pass a specific value to the component (e.g., value=100). Overridden by the data/column props.

Options:
number
fmt

Format to use for the value (see available formats)

Options:
Excel-style format | built-in format | custom format
downIsGood

If true, negative comparison values appear in green, and positive values appear in red.

Options:
Default:
false
showSymbol

Whether to show the up/down delta arrow symbol

Options:
Default:
true
showValue

Whether to show the value. Set this to false to show only the delta arrow indicator.

Options:
Default:
true
text

Text to display after the delta symbol and value

Options:
string
neutralMin

Start of the range for 'neutral' values, which appear in grey font with a dash instead of an up/down arrow. By default, neutral is not applied to any values.

Options:
number
Default:
0
neutralMax

End of the range for 'neutral' values, which appear in grey font with a dash instead of an up/down arrow. By default, neutral is not applied to any values.

Options:
number
Default:
0
chip

Whether to display the delta as a 'chip', with a background color and border.

Options:
Default:
false
symbolPosition

Whether to display the delta symbol to the left or right of the value

Options:
Default:
right
emptySet

Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in build:strict. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.

Options:
Default:
error
emptyMessage

Text to display when an empty dataset is received - only applies when emptySet is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.).

Options:
string
Default:
No records