Big Number

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="horizontal"
  />
</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.
dataKey	string	–	The key that references the metric this component will display.
icon	IconElement	–	Optional icon element.
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 (Example: '$.2f' = $5,432.10). Number locale will be applied to the number format.
numberType	'linear' | 'percentage'	'linear'	If set to percentage, automatically formats the number as a percentage. Otherwise, this component relies on the numberFormat prop.
orientation	'vertical' | 'horizontal'	'vertical'	Specifies the visual direction for this component's elements. 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!