Format String in HTML5 charts

One can use Format String to format labels in the HTML5 charts. A format string is a template for labels, where variables are inserted. The variables are inserted using the curly braces notation, for example {point.x}, {series.name}. An example of a format string:

"The point X value is {point.x} and Y value is {point.y}"

This format string will show the respective x and y values of the data point when displayed. One can use {point}, {series}, {value}, {x}, {y} in the format string, depending on the property you'll be applying it to. The properties that will expect a format string are named format or end with format, such as tooltip.pointFormat or xAxis.labels.format. {point}, {series}, {x} and {y} can be used in all labels formats, {value} are applicable to axis labels.

You can see what members of point and series class you can access in the format string here:

https://api.highcharts.com/class-reference/Highcharts.Point
https://api.highcharts.com/class-reference/Highcharts.Series

You can apply number formatting to your point, for example:

"{point.y:.2f}"  - display two decimal spaces, no thousands separator
"{point.y:,.0f}" - display no decimal places and use , as thousands separator
"{point.y:,.1f}" - display one decimal place and use , as a thousands separator

General rule in this formatting is that you place a : and then right after it specify whether you want to use a thousands separator or not by placing a comma, then you put a dot and you specify the number of decimal places with the number after the dot and then you add f.

You can also use HTML tags in your format string.The following tags are supported:

<b>, <strong>, <i>, <em>, <br/>, <span> 

You can also specify the style for the span. For example:

<span style="font-size:22px; color: {point.color}; font-weight: bold; text-align: center">{point.y:,.2f}</span>

See attached sample that demonstrates how to use format string with tooltips and data labels.

formatstring.jrxml