Skip to main content

Formatting labels

Features that allow formatting labels and values within labels.

Labels on Charts

Axes host the main format settings for themselves and related values on a chart. This means that the Y axis format string setting will affect the point's y value format in any label. The axis properties associated with formatting are axis.formatString and axis.cultureName. However, a culture name can be specified for the entire chart with the chart.defaultCultureName property.

Formatting labels is very simple by using a culture name, and a format string. By default, the culture name 'en-US' indicating US English language is used. However, all cultures are supported. Example:

{
  defaultCultureName: "en-US"
}
Reference:
cultures Enum All possible culture names.

A format string can be used with an axis to specify the type of values the axis represents. The 'c' format string indicates currency and depending on the culture name, Y axis values will be shown as currency no matter where on the chart they appear.

{
  yAxis_formatString: "c"
}

In summary, the following chart options:

{
  defaultCultureName: "en-US",
  defaultPoint_label_text: "%yValue",
  yAxis_formatString: "c"
}

Will result in data labels such as '$5.00'. As well as the actual axis tick labels being formatted the same way. And if related tokens are used in the legend or title, the formatting will persist there as well.

Note: For series types that utilize the z value such as bubble and pie types, the zAxis_formatString property can be used.
Sample:
Axis Formatting Sample In this sample, notice how the axis, point, legend, and title labels are formatted as currency.

Text in Code

Number or date values can be formatted without a chart as well by using the JSC.formatDate() and JSC.formatNumber() utility functions. This is useful when using a function with chart label text properties instead of strings.

JSC.formatNumber(50, "n1") // -> 50.0

The following references list the supported format strings that can be used with formatString properties:

Reference:
Standard Date: Standard Date Format Strings
Custom Date: Custom Date Format Strings
Standard Number: Standard Number Format Strings
Custom Number: Custom Number Format Strings

Additional Format Strings

In addition the formatStrings listed above, the following formats have been implemented as well.

Format specifierDescriptionExample
'a'Magnitude shortened numbers. The number after can specify the magnitude explicitly, otherwise a suitable magnitude is chosen automatically.(1000, 'a') -> 100
(10000, 'a') -> 10k
(10000000,'a') -> 10M
(10000000,'a1') -> 10000k
(10000000,'a3') -> 0.01G
't'(Ten) Exponent format. The number following t indicates the minimum exponent at which to begin showing the exponent to avoid values like 100(10, 't') -> 101
(1000, 't') -> 103
(1000, 't3') -> 1000

Inline Formatting

Formatting can also be inlined within any specific label text if the default behavior is not desired. The formatting can be specified within the label text using the following syntax:

{(value):(formatString)}

For example, the following code can be used in a chart title label.

{
  title_label_text: "(Total Formatted As) Currency: {%sum:c} integer: {%sum:n0} decimal: {%sum:n2}"
}

Will show the following label in the title:

(Total Formatted As) Currency: $22.00 integer: 22 decimal: 22.00
Sample:
Label Inline Formatting Sample Label formatting.