Big Number (rc)

RELEASE CANDIDATE

BigNumber is currently in rc. This means that the component, behavior, and API are all subject to change. To use, you will need to import from @adobe/react-spectrum-charts/rc. If your app is bundled with parcel, check out the troubleshooting guide for details on how to setup your package.json so it will accept this style of import.

import { Chart, ChartProps } from '@adobe/react-spectrum-charts';
import { BigNumber } from '@adobe/react-spectrum-charts/rc';

Big Number

The BigNumber component is designed to display a large numeric value, often used in dashboards or reports to quickly showcase key metrics. It allows for formatting options, and data aggregation methods, and can display icons and sparklines for additional context.

Data aggregation

The BigNumber component provides several aggregation methods, such as sum, avg, or last, to compute the metric value displayed. This is useful when you are passing in multiple data points for the same key and need to condense the information into a single, representative figure.

A static point can also be added to the chart within the BigNumber. The position of the point will be based on the aggregation method.

Formatting options

The number displayed in BigNumber can be formatted using d3-format specifiers. The component also supports icon integration and orientation customization, allowing for a tailored display of information.

Examples

Horizontal

<Chart data={data}>
    <BigNumber dataKey="x" orientation="horizontal" label="Visitors" />
</Chart>

Vertical

<Chart data={data}>
    <BigNumber dataKey="x" orientation="vertical" label="Visitors" />
</Chart>

With Icon

<Chart data={data}>
    <BigNumber dataKey="x" orientation="horizontal" label="Visitors" icon={<User data-testid="icon-user" />}/>
</Chart>

Sparkline

<Chart data={data}>
        <BigNumber dataKey="x" orientation="horizontal" label="Visitors" icon={<User data-testid="icon-user">}>
            <Line dimension="x" metric="y" scaleType="linear" />
        </BigNumber>
</Chart>

Percent Format

<Chart data={data}>
        <BigNumber dataKey="x" orientation="horizontal" label="Capacity" numberType="percentage" />
</Chart>

Currency Number Format

<Chart data={data}>
        <BigNumber dataKey="x" orientation="horizontal" label="Ad Spend" numberFormat="$,.2f" />
</Chart>

Props

label	string	-	A label to include within the `BigNumber` contents.
children	Line[]	–	The line component to use as a sparkline within the Big Number. Line components within BigNumber will automatically include a static point. The point position is determined by the `method` prop.
orientation	('vertical' | 'horizontal')	-	Display the BigNumber contents in either a vertical or horizontal orientation.
dataKey	string	-	The key in the data used to aggregate the data and produce the number value.
numberFormat	string	''	The locale to use when formatting the number value. Locales are based on the Vega locale implementation: https://vega.github.io/vega/docs/api/locale/.
numberType	('linear' | 'percentage')	'linear'	Determines whether the number value should be formatted as a percent or linear value.
method	('sum' | 'average' | 'last')	'last'	The aggregation method used to calculate the BigNumber value based on the value of the `dataKey` key in each datum.
icon	ReactElement< IconProps | IconPropsWithoutChildren, JSXElementConstructor >	-	A `spectrum` icon component that will display within the `BigNumber` contents.