Text Styling and Formatting

Text font, size & colors

In jqxChart you can change the default style for all text elements using Cascading Style Sheets (CSS). You must edit the styles defined in jqx.base.css located inside the jqwidgets\styles directory or the .css file of the theme you are using in your project. jqxChart uses the following styles:

• jqx-chart-axis-text - Text style for the units and values display on the Y-axis and X-axis.
• jqx-chart-label-text - Text style for all labels.
• jqx-chart-tooltip-text - Tooltips text style.
• jqx-chart-legend-text - Style for the the chart's legend texts.
• jqx-chart-axis-description - Style for the Axis description text.
• jqx-chart-title-text - Title style.
• jqx-chart-title-description - Style for the text description displayed below the title.

Text formatting

jqxChart allows you to format text in two different ways. The first approach is to use the formatSettings property which is available for each series group, serie and axis. The series and series group settings affect the formatting of labels and tooltips. The axis format settings affect the formatting of the labels displayed along the axis.

The formatSettings property provides the following options:

decimalSeparator - character used as a decimal separator. If not specified the default separator is '.'
thousandsSeparator - character used as thousands separator. Default value is ','
decimalPlaces - number of digits after the decimal separator. Default value is 2 for floating point numbers.
negativeWithBrackets - boolean which specifies whether to display negative numbers in brackets. Default value is false.
perfix - any string which will be added as a prefix. Default value is empty.
sufix - any string which will be added as a sufix. Default value is empty.
dateFormat - optional date format string. This property is applicable only when displaying Date objects.

The second approach is more powerful. It allows you to use a custom text formatting function written in JavaScript. The function is required to accept at least one parameter which is the value that will be formatted. jqxChart will call the function every time it needs to format and display a value. You can specify a custom format function for each series group, serie or axis. The following example is a simple format function which returns the month for a given date value:

 formatFunction: function (value, itemIndex, serie, group) {
 var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
 return days[value];
 }
 

Tooltips formatting

In order to format the tooltips, you can use the 'toolTipFormatFunction' which works the same way as the formatFunction. It accepts one parameter which is the value that will be formatted and returns a string. The following example is a simple format function for the jqxChart tooltips which returns a formatted Date string for a given date value:

 toolTipFormatFunction: function(value, itemIndex, serie, group, xAxisValue, xAxis)
 return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
 } 
 

jqxChart uses priorities to determine which format settings or format function to use. When available, format functions are used instead of format settings. For example, if you specify both , jqxChart will use the format function and ignore the format settings. When neither a format function nor format settings are specified for a serie, jqxChart will try to use the format function or the format settings specified for the series group. If neither is available it will use default settings.

The following code shows the usage of format settings: