Format Numbers
Using DataFormatString
Numbers can be formatted through the DataFormatString property which is exposed by XAxis/YAxis Labels, Series Labels and ToolTips.
The number format can be set:
- directly (e.g.
DataFormatString = "N") - or in combination with additional text(e.g
DataFormatString = "Sales: {0:N}"), where the {0} placeholder will translate into the item's value.
The number of zeros after the decimal mark can be indicated next to the number format itself e.g. DataFormatString = "{0:C3}" will produce a currency symbol with three decimal places for the value.
List of Number Formats
| Format | Description |
|---|---|
| N | Number (e.g. the number 10500 will be formatted as 10,500.00) |
| C | Currency (e.g. the number 10500 will be formatted as $10,500.00) |
| P | Percentage (e.g. the number 10500 will be formatted as 1,050,000.00% because 1 is equal to 100%) |
| E | Exponential (e.g. the number 10500 will be formatted as 1.05e+4) |
The above numbers are formatted in the default "en-US" culture. More information on how to localize text elements is available in the Localization article.
Since Q2 2013 the RadHtmlChart can be data bound to DateTime objects , so that XAxis Labels,Series Labels and ToolTips can be formatted to the desired date format. More information on formatting dates is available in Date Axis article.
Formatting Labels and Tooltips by using their Client Templates
KendoUI number and date formats can be used inside the Client Templates. In order to set a certain format one should follow the examples that KendoUI offers in this help article.
KendoUI format functions
-
format:
Formats the corresponding values from the indicated column to the specified format. (e.g.
ClientTemplate="#= kendo.format(\'{0:C2}\', dataItem.myColumn)#").The numeric format strings listed above are applicable parameters for the
format()function.
parseFloat—parses a string to a floating point number (e.g.
ClientTemplate="#= kendo.parseFloat(dataItem.FloatColumn)#");- parseInt—parses a string to an integer (e.g.
ClientTemplate="#= kendo.parseInt(dataItem.IntColumn)#");
These formats are essentially JavaScript functions and are evaluated during runtime. This means that the strings that are passed to the ClientTemplate property must be properly escaped to allow JavaScript to work with them.
If these properties are set in the code-behind the strings must be additionally escaped for the code-behind language according to its specifics so that they are valid. More information on the matter is available in the Handling Special Symbols help article.