Big Value
Use big values to display a large value standalone, and optionally include a comparison and a sparkline.
Num Orders
304
▲ 2.7% vs. Last Month
<BigValue
data={orders_with_comparisons}
value=num_orders
sparkline=month
comparison=order_growth
comparisonFmt=pct1
comparisonTitle="vs. Last Month"
/>Examples
Default
Num Orders
304
<BigValue
data={orders_with_comparisons}
value=num_orders
/>Comparisons
Num Orders
304
▲ 2.7% MoM
<BigValue
data={orders_with_comparisons}
value=num_orders
comparison=order_growth
comparisonFmt=pct1
comparisonTitle="MoM"
/>Multiple cards
Multiple cards will align themselves into a row.
Sales
$9,905
▼ -11.0% MoM
Orders
304
▲ 2.7% MoM
Average Order Value
$32.58
▼ -13.3% MoM
<BigValue
data={orders_with_comparisons}
value=sales
fmt=usd0
comparison=sales_growth
comparisonFmt=pct1
comparisonTitle="MoM"
/>
<BigValue
data={orders_with_comparisons}
value=num_orders
title="Orders"
comparison=order_growth
comparisonFmt=pct1
comparisonTitle="MoM"
/>
<BigValue
data={orders_with_comparisons}
value=aov
title="Average Order Value"
fmt=usd2
comparison=aov_growth
comparisonFmt=pct1
comparisonTitle="MoM"
/>Linking to other pages
The link property makes the Value component clickable, allowing navigation to other pages.
<BigValue
data={orders_with_comparisons}
value=num_orders
sparkline=month
comparison=order_growth
comparisonFmt=pct1
comparisonTitle="vs. Last Month"
link='/components/data/big-value'
/>Non-Delta Comparisons
Num Orders
304
296 Last Month
<BigValue
data={orders_with_comparisons}
value=num_orders
comparison=prev_month_orders
comparisonTitle="Last Month"
comparisonDelta=false
/>Sparkline
Sales
9,905.10
<BigValue
data={orders_with_comparisons}
value=sales
sparkline=month
/>Options
Data
Required
Query name, wrapped in curly braces
- Options:
- query name
Required
Column to pull the main value from.
- Options:
- column name
Title of the card.
- Options:
- string
- Default:
- Title of the value column.
Overrides min-width of component
- Options:
- % or px value
- Default:
- 18%
Adds a max-width to the component
- Options:
- % or px value
Sets format for the value (see available formats)
- Options:
- Excel-style format | built-in format | custom format
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
Used to navigate to other pages. Can be a full external link like https://google.com or an internal link like /sales/performance
Comparison Options
Column to pull the comparison value from.
- Options:
- column name
Text to the right of the comparison.
- Options:
- string
- Default:
- Title of the comparison column.
Sets the bottom of the range for 'neutral' values - neutral values appear in grey rather than red or green
- Options:
- number
- Default:
- 0
Sets the top of the range for 'neutral' values - neutral values appear in grey rather than red or green
- Options:
- number
- Default:
- 0
Sets format for the comparison (see available formats)
- Options:
- Excel-style format | built-in format | custom format
Sparkline
Column to pull the date from to create the sparkline.
- Options:
- column name
Formatting for tooltip values
- Options:
- format code
- Default:
- same as fmt if supplied
Formatting for tooltip dates
- Options:
- format code
- Default:
- YYYY-MM-DD
Color of visualization
- Options:
- CSS name | hexademical | RGB | HSL
Group name to connect this sparkline to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected
- Options:
- string
Adds an info icon with description tooltip on hover
- Options:
- string