Documentation
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();
}
The following code shows the usage of format settings:
<html lang="en"><head> <title id='Description'>jqxChart Formatting Example</title> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data var sampleData = [ { Day:0, Keith:30, Erica:15, George: 25}, { Day:1, Keith:25, Erica:25, George: 30}, { Day:2, Keith:30, Erica:20, George: 25}, { Day:3, Keith:35, Erica:25, George: 45}, { Day:4, Keith:20, Erica:20, George: 25}, { Day:5, Keith:30, Erica:20, George: 30}, { Day:6, Keith:60, Erica:45, George: 90} ]; // prepare jqxChart settings var settings = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise", padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, xAxis: { dataField: 'Day', formatFunction: function (value, itemIndex, serie, group) { // value is from 0-6 (see 'Day' field in sampleData above) var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; return days[value]; }, valuesOnTicks: false }, valueAxis: { minValue: 0, maxValue: 100, unitInterval: 10, title: {text: 'Time in minutes'}, labels: { horizontalAlignment: 'right', formatSettings: { decimalPlaces: 2 } } }, colorScheme: 'scheme01', seriesGroups: [ { type: 'line', toolTipFormatFunction: function(value, itemIndex, serie, group, xAxisValue, xAxis) { var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; var formattedTooltip = "<div>" + "<b>Day: </b>" + days[xAxisValue] + "</br>" + "<b>Serie: </b>" + serie.dataField + "</br>" + "<b>Time: </b>" + value + " min</br>" + "</div>"; return formattedTooltip; }, series: [ { dataField: 'Keith', displayText: 'Keith'}, { dataField: 'Erica', displayText: 'Erica'}, { dataField: 'George', displayText: 'George'} ] } ] }; // select the chartContainer DIV element and render the chart. $('#chartContainer').jqxChart(settings); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body style="background:white;"> <div id='chartContainer' style="width:600px; height: 400px"/></body></html> |
