Delta
<Delta data={sales} column=growth fmt=pct1 />
Examples
Value Types
<Delta data={sales} column=growth fmt=pct1 />
Positive
Negative
Neutral*
*Values are not defined as neutral until you define a range using the neutralMin and neutralMax props
<Delta data={sales} column=growth fmt=pct1 neutralMin=-0.4 neutralMax=0.4 />
Chips
<Delta data={sales} column=growth fmt=pct1 chip=true />
Positive
Negative
Neutral*
*Values are not defined as neutral until you define a range using the neutralMin and neutralMax props
<Delta data={sales} column=growth fmt=pct1 chip=true neutralMin=-0.4 neutralMax=0.4 />
Symbol Position
Symbol on Left
<Delta data={sales} column=growth fmt=pct1 symbolPosition=left/>
Symbol on Left in Chip
<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