Number formatting

The way numeric values are formatted in the component can be defined in a report.

The default format is applied to all measures. In addition to this default format, specific number formats can be defined for certain measures. More details can be found in the following sections:

Number format properties
Setting a currency symbol
Default number format
Number format for a specific measure
Change number formatting using the Toolbar
Number formatting via API

If the component is connected to an OLAP cube wherein you have already formatted numbers, you can display these formatted values without applying any additional number formatting in the component. More information about this option below:

Number formatting from an OLAP cube

To see live examples on how to format numbers, refer to our Examples page.

Number format properties

With number formatting you can define the following:

Separators for thousands and for decimals.
The number of decimals to show after the decimal separator.
The display of null and infinity values.
The format for currencies specifying both the currency symbol and its position – right or left of the number.

See the full list of available FormatObject properties.

Default number format

The component has a built-in default number format that is applied to all measures by default. It is composed of the default values of the number format properties. The default format can be overridden in a report.

To override the default number format for a report, define a number format with an empty string name property in a report, as follows:

report: {
  dataSource: {
    filename: "data.csv" 
  }, 
  formats: [ 
    { 
      name: "", 
      thousandsSeparator: " ", 
      decimalSeparator: ".", 
      decimalPlaces: -1, 
      maxDecimalPlaces: -1, 
      maxSymbols: 20,
      negativeNumberFormat: "-1",
      currencySymbol: "", 
      negativeCurrencyFormat: "-$1", 
      positiveCurrencyFormat: "$1", 
      isPercent: false, 
      nullValue: "", 
      infinityValue: "Infinity", 
      divideByZeroValue: "Infinity", 
      textAlign: "right", 
      beautifyFloatingPoint: true 
    } 
  ], 
  slice: { 
    rows: [  
      { uniqueName: "Country" } 
    ],  
    columns: [ 
      { uniqueName: "[Measures]" } 
    ], 
    measures: [ 
      { 
        uniqueName: "Price",
        aggregation: "sum",
        active: true
      }, 
      {
        uniqueName: "Quantity",
        aggregation: "sum", 
        active: true
      } 
    ] 
  }
}

See the example on JSFiddle.

Setting a currency symbol

The currencySymbol property can be specified in three ways:

As the symbol itself (e.g., currencySymbol: "€").
As a numeric HTML code of the symbol (e.g., currencySymbol: "").
As a named HTML code of the symbol (e.g., currencySymbol: "€").

All the approaches are interchangeable unless you are planning to:

Use Flexmonster Pivot Charts or export them to any format.
Export the grid to PDF, Excel, or CSV.

In these cases, specify the currencySymbol as the symbol itself, e.g., by copy and paste. Otherwise, it will be displayed as code.

If exporting the grid to HTML or image, you can use all available approaches to set the currencySymbol.

Number format for a specific measure

A number format can be applied to a specific measure or measures. Each measure can have only one format, but a format can be applied to multiple measures.

For example, if you are visualizing financial data, you may want to apply currency formatting to some of the measures in addition to the default format. To apply a format to a specific measure:

Name a format.
Define the format name for the measure(s) in a default slice.

Properties defined in the default format get applied to all other formats. In the following example each measure with number formats "currency" and "amount" will have thousandsSeparator: ",", since it was defined in the default format:

report: {
  dataSource: {
    filename: "https://cdn.flexmonster.com/data/data.csv"
  },
  formats: [
    {   
      name: "",
      thousandsSeparator: ","
    },
    {
      name: "currency",
      currencySymbol: "$"
    },
    {
      name: "amount",
      decimalPlaces: 0,
      currencySymbol: " pcs.",
      positiveCurrencyFormat: "1$"
    }
  ],
  slice: {
    rows: [ { uniqueName: "Category" } ], 
    measures: [ 
      { 
        uniqueName: "Price",
        aggregation: "sum",
        active: true,
        format: "currency"
      }, 
      {
        uniqueName: "Discount",
        aggregation: "sum",
        active: false,
        format: "currency"
      },
      {
        uniqueName: "Quantity",
        aggregation: "sum",
        active: true,
        format: "amount"
      }
    ]
  }
}

Open the example on JSFiddle.

Note A format can be defined for measure(s) even if they are not active (active property is false) in a default slice.

Use Format > Format cells in the Toolbar to change/define number formatting for measures at runtime.

The number format will be applied to the measures and will be saved within the report.

Starting from version 2.8.22, you can apply formatting to several measures simultaneously. Just choose the needed values in the corresponding dropdown menu: