NumberDisplay

The NumberDisplay component renders data as an auto-formatted number, according to locale.

For more information on how to use the features and props for this component, check out the developer documentation.

The NumberDisplay component can be used to display a numerical value that can include a unit and unitPlacement. The component displays "--" in the case of an undefined value.

There are a variety of formatting options for the NumberDisplay component that enable you to show decimals, show group separators, and limit the number of decimals shown. The group separators used depend on your application's locale. You can configure the locale of your application via the Configuration component.

NameTypeDefaultDescription
classNamestringAdditional CSS classes.
formattingOptions
{
  numberOfDecimals: undefined | number;
  showDecimal: undefined | false | true;
  showGroupSeparators: undefined | false | true;
}
refRef<HTMLAnchorElement>Ref for the wrapping element.
unitstringUnit to be included in the text, for example '%'
unitPlacement
'before' |'after' 
"after" Determines the placement of the unit.
valuestringNumber value