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={query_name}
value='new_activations'
comparison='monthly_growth'
sparkline='date'
comparisonTitle="Month over Month"
maxWidth='10em'
/>

bigvalue

Multiple cards

Multiple cards will align themselves into a row.

bigvalue

All 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.
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