Skip to main content

Big Value

<BigValue /> displays a large value, and can be configured to include a comparison and a sparkline.

Example

<BigValue 
data={orders_with_comparisons}
value=sales_usd0k
sparkline=month
comparison=sales_change_pct0
comparisonTitle="vs. Last Month"
/>

bigvalue

Multiple cards

Multiple cards will align themselves into a row.

bigvalue

Non-Delta Comparisons

<BigValue 
data={orders_with_comparisons}
value=sales_usd0k
title="Category Sales"
comparison=sales_change_pct0
comparisonTitle="of Total"
comparisonDelta=false
/>

bigvalue

Options

NameDescriptionRequired?OptionsDefault
dataQuery name, wrapped in curly bracesYesquery name-
valueColumn to pull the main value from.Yescolumn name-
comparisonColumn to pull the comparison value from.-column name-
sparklineColumn to pull the date from to create the sparkline.-column name-
titleTitle of the card.-stringTitle of the value column.
comparisonTitleText to the right of the comparison.-stringTitle of the comparison column.
comparisonDeltaWhether to display delta symbol and color-true | falsetrue
downIsGoodIf present, negative comparison values appear in green, and positive values appear in red.-true | falsefalse
minWidthOverrides min-width of component-% or px value18%
maxWidthAdds a max-width to the component-% or px valuenone
fmtSets format for the value (see available formats)-Excel-style format | built-in format | custom format-
comparisonFmtSets format for the comparison (see available formats)-Excel-style format | built-in format | custom format-
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. - error | warn | pass 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.). - string No records

Sparkline Options

NameDescriptionRequired?OptionsDefault
sparklineTypeChart type for sparkline-line | area | barline
sparklineValueFmtFormatting for tooltip values-format codesame as fmt if supplied
sparklineDateFmtFormatting for tooltip dates-format codeYYYY-MM-DD
sparklineColorColor of visualization-CSS name | hexademical | RGB | HSL-
sparklineYScaleWhether to truncate the y-axis of the chart to enhance visibility-true | falsefalse
connectGroupGroup name to connect this sparkline to other charts for synchronized tooltip hovering. Charts with the same connectGroup name will become connected-string-