BigNumber

The BigNumber component calls attention to a specified data metric. A BigNumber gets its data from a parent Chart.

You can specify which data dimension (dataKey) a BigNumber should display. Also, you can optionally specify a metric aggregation method, as well as custom formatting with orientation, numberType, and/or numberFormat.

BigNumber can also display an icon and/or "sparkline" (basic line chart) to provide better context for the metric.

Examples

Basic Horizontal

<Chart data={[{ x: 20, y: 90 }]} height={100} width={200}>
	<BigNumber dataKey="x" label="Visitors" orientation="horizontal" />
</Chart>

Vertical with Icon

<Chart data={[{ x: 20, y: 90 }]} height={100} width={200}>
	<BigNumber dataKey="x" icon={<User />} /* From react-spectrum icons */ label="Visitors" orientation="vertical" />
</Chart>

Horizontal with Sparkline

<Chart
	data={[
		/* previous data values omitted for brevity */
		{
			x: 19,
			y: 55,
		},
		{
			x: 20,
			y: 90,
		},
	]}
	height={100}
	width={200}
>
	<BigNumber dataKey="x" label="Visitors" orientation="horizontal">
		<Line dimension="x" metric="y" scaleType="linear" />
	</BigNumber>
</Chart>

Vertical with Icon and Sparkline

<Chart
	data={[
		/* previous data values omitted for brevity */
		{
			x: 19,
			y: 55,
		},
		{
			x: 20,
			y: 90,
		},
	]}
	height={100}
	width={200}
>
	<BigNumber dataKey="x" icon={<User />} /* From react-spectrum icons */ label="Visitors" orientation="vertical">
		<Line dimension="x" metric="y" scaleType="linear" />
	</BigNumber>
</Chart>

Currency Format

<Chart data={[{ value: 255.56 }]} height={600} locale="de-DE" width={600}>
	<BigNumber dataKey="value" label="Ad Spend" numberFormat="$,.2f" orientation="horizontal" />
</Chart>

Props

name	type	default	description
children	LineElement	–	Optional sparkline element. When provided, renders a small line chart below or beside the number based on orientation.
dataKey	string	–	The key that references the metric this component will display.
icon	IconElement	–	Optional icon element from @adobe/react-spectrum icons.
label	string	–	A custom metric label that titles the data shown.
method	'sum' | 'avg' | 'last'	'last'	The aggregation method used before displaying the metric value. Last: display only the last metric value of dataKey from the Chart data Sum: display the sum of all the dataKey in the Chart data Average: display the arithmetic mean of the dataKey in the Chart data Additionally, the last method adds a visual indicator of the last value on the sparkline (if a sparkline is shown).
numberFormat	string	-	Sets the format for numeric axis labels. This format must be a d3-format specifier. Examples: ',' = 1,234,567 '$.2f' = $1,234.57 '~s' = 1.2M The number locale will be applied to the number format.
numberType	'linear' | 'percentage'	'linear'	If set to percentage, automatically formats the number as a percentage (e.g., 0.123 becomes "12.3%"). Otherwise, this component relies on the numberFormat prop.
orientation	'vertical' | 'horizontal'	'vertical'	Specifies the visual direction for this component's elements. In vertical orientation, elements are stacked top-to-bottom. In horizontal orientation, elements are arranged left-to-right. See visual examples above.
rscChartProps	RscChartProps	-	Used internally to drill down props from the parent Chart to the sparkline (if displayed). Modify at your own risk!