Skip to main content

​
Overview

The BigValue component displays a large, prominent metric with an optional title, comparison value, and sparkline chart. It’s ideal for showcasing key performance indicators (KPIs) in dashboards.

​
Basic Usage

<BigValue data={sales} value="total" title="Total Revenue" />

​
With Comparison

<BigValue 
  data={sales} 
  value="current_revenue" 
  comparison="revenue_change"
  title="Monthly Revenue"
  comparisonTitle="vs. last month"
/>

​
With Sparkline

<BigValue 
  data={daily_sales} 
  value="revenue" 
  sparkline="date"
  title="Revenue Trend"
/>

​
Props

​
Data Selection

​
data
Query | object | array
required
Query result, object, or array containing the values to display.
​
value
string
required
Column name for the primary value to display.
​
comparison
string
Column name for the comparison value (shown below the main value).

​
Display Options

​
title
string
Title displayed above the value. Defaults to the column name if not specified.
​
comparisonTitle
string
Label for the comparison value. Defaults to the comparison column name.
​
comparisonDelta
boolean
default:"true"
Show comparison as a delta with up/down arrows. When false, shows raw value.

​
Formatting

​
fmt
string
Format string for the main value. Examples: "usd", "usd0", "pct1", "#,##0".
​
comparisonFmt
string
Format string for the comparison value. Inherits from fmt if not specified.

​
Sparkline

​
sparkline
string
Column name for the sparkline x-axis (typically a date column).
​
sparklineType
'line' | 'area' | 'bar'
default:"'line'"
Type of sparkline chart to display.
​
sparklineColor
string
Color for the sparkline. Accepts color names, hex codes, or theme colors.
​
sparklineValueFmt
string
Format string for sparkline tooltip values.
​
sparklineDateFmt
string
Format string for sparkline tooltip dates.
​
sparklineYScale
boolean
default:"false"
Show y-axis scale on sparkline.
​
connectGroup
string
Group name to connect multiple sparklines for synchronized tooltips.

​
Delta Styling

​
downIsGood
boolean
default:"false"
Reverse color coding for deltas (green for negative, red for positive).
​
neutralMin
number
default:"0"
Minimum value for neutral range (values between neutralMin and neutralMax show as neutral).
​
neutralMax
number
default:"0"
Maximum value for neutral range.

​
Sizing

​
maxWidth
string
default:"'none'"
Maximum width of the component. Accepts CSS width values.
​
minWidth
string
default:"'18%'"
Minimum width of the component. Accepts CSS width values.
​
link
string
URL to navigate to when clicking the value.
​
description
string
Description text shown in an info tooltip next to the title.

​
Custom Classes

​
titleClass
string
Custom CSS class for the title element.
​
valueClass
string
Custom CSS class for the value element.
​
comparisonClass
string
Custom CSS class for the comparison element.

​
Error Handling

​
emptySet
'pass' | 'warn' | 'error'
How to handle empty datasets.
​
emptyMessage
string
Custom message to display when dataset is empty.

​
Examples

​
Simple KPI

<BigValue 
  data={sales} 
  value="total" 
  title="Total Revenue" 
  fmt="usd0"
/>

​
With Delta Comparison

<BigValue 
  data={metrics} 
  value="current_revenue" 
  comparison="revenue_change"
  comparisonTitle="vs. last month"
  fmt="usd0"
  comparisonFmt="pct1"
  downIsGood={false}
/>

​
With Sparkline

<BigValue 
  data={daily_metrics} 
  value="fare" 
  sparkline="departure_date"
  sparklineType="area"
  sparklineColor="blue"
  title="Daily Fare Trend"
/>

​
Multiple BigValues

<div class="flex gap-4">
  <BigValue data={sales} value="total_x" title="Metric X" />
  <BigValue data={sales} value="total_y" title="Metric Y" />
</div>

​
With Non-Delta Comparison

<BigValue 
  data={metrics} 
  value="current_value" 
  comparison="previous_value"
  comparisonDelta={false}
  comparisonTitle="Last Period"
  fmt="usd0"
/>

​
With Linked Value

<BigValue 
  data={revenue} 
  value="total" 
  title="Total Revenue" 
  fmt="usd0"
  link="/revenue-details"
/>

​
Notes

  • The component displays inline-block, allowing multiple BigValues to appear side by side
  • When comparisonDelta is true, the comparison shows with colored arrows (up/down) and appropriate positive/negative coloring
  • Use downIsGood={true} for metrics where decreases are positive (e.g., cost, error rate)
  • Sparklines are automatically sized to fit within the component

Build docs developers (and LLMs) love

Get started for freeTalk to us