Delta
<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={growth} column=positive fmt=pct1 />Negative
<Delta data={growth} column=negative fmt=pct1 />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
Positive & Negative
36.6% ▲ -36.6% ▼<Delta data={sales} column=growth fmt=pct1 chip=true />Neutral
<Delta data={growth} column=positive fmt=pct1 chip=true/>Negative
<Delta data={growth} column=negative fmt=pct1 chip=true/>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
Query name, wrapped in curly braces
- Options:
- query name
Column to pull values from
- Options:
- column name
- Default:
- First column
Row number to display. 0 is the first row.
- Options:
- number
- Default:
- 0
Pass a specific value to the component (e.g., value=100). Overridden by the data/column props.
- Options:
- number
Format to use for the value (see available formats)
- Options:
- Excel-style format | built-in format | custom format
Text to display after the delta symbol and value
- Options:
- string
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
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
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.
- Default:
- error
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