Skip to main content

​
Overview

The Value component displays a single formatted value from a query result. It’s useful for showing metrics inline within text or displaying individual data points.

​
Basic Usage

Total revenue: <Value data={sales} column="revenue" />

​
With Formatting

<Value data={sales} column="revenue" fmt="usd0" />

​
With Aggregation

Average fare: <Value data={flights} column="fare" agg="avg" fmt="usd" />

​
Props

​
Data Selection

​
data
Query | object | array
required
Query result, object, or array containing the value to display.
​
column
string
Column name to display. If not specified, uses the first column in the dataset.
​
value
string
Alias for column. Use either column or value, not both.
​
row
number
default:"0"
Row index to select from the dataset (0-based).
​
agg
'sum' | 'avg' | 'max' | 'min' | 'median'
Aggregation function to apply to the column. When specified, aggregates all rows.

​
Formatting

​
fmt
string
Format string for the value. Examples: "usd", "usd0", "pct1", "#,##0".

​
Styling

​
color
string
Color for the value text. Accepts color names, hex codes, or theme colors.
​
redNegatives
boolean
default:"false"
Display negative values in red color.

​
Placeholder

​
placeholder
string
Text to display when no data is provided. Shows [placeholder text] with hover tooltip.
​
description
string
Description text shown in an info tooltip next to the value.

​
Error Handling

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

​
Examples

​
Inline in Text

Our total sales reached <Value data={sales} column="total" fmt="usd0" /> 
this quarter, with an average order value of 
<Value data={sales} column="order_value" agg="avg" fmt="usd" />.

​
With Aggregations

<div>
  Min: <Value data={flights} column="fare" agg="min" fmt="usd0" />
  Max: <Value data={flights} column="fare" agg="max" fmt="usd0" />
  Avg: <Value data={flights} column="fare" agg="avg" fmt="usd" />
  Median: <Value data={flights} column="fare" agg="median" fmt="usd" />
</div>

​
With Color

<Value 
  data={revenue} 
  column="total" 
  fmt="usd0" 
  color="#00FF00" 
/>

<Value 
  data={revenue} 
  column="change" 
  fmt="usd0" 
  color="#45818E" 
  redNegatives 
/>

​
With Data as Object

{#each my_data as row}
  <div>
    {row.series}: <Value data={row} value="total" color="#674EA7" />
  </div>
{/each}

​
With Placeholder

<Value placeholder="No data selected" />

​
Notes

  • When using agg, the component automatically aggregates the specified column across all rows
  • If both value and column are provided, column takes precedence
  • Colors can be specified as hex codes ("#00FF00"), color names ("green"), or theme variables
  • The component automatically detects and formats date columns

Build docs developers (and LLMs) love

Get started for freeTalk to us