Documentation

Tooltip settings and content formatting

The tooltips in jqxChart provide a great way of displaying more content when the user positions over a specific data point.

Turning tooltips on and off

A tooltip will show automatically if the cursor does not move for a few hundred milliseconds. Tooltips are enabled by default. You can always turn them on or off by changing the showToolTips property: 
$('#myChartElement').jqxChart('showToolTips', false);

Tooltips delay

Normally a tooltip will show 500ms after you position over a data point. After that it will automatically hide after 4s, if you click, tap or move outside of the chart. If the tooltip is visible and you move the position to another element, the content will change and the tooltip will reposition closer to the new element. You may change the default show and hide delays using the toolTipShowDelay and toolTipHideDelay properties: 
// show tooltips after 1 second
$('#myChartElement').jqxChart('toolTipShowDelay', 1000);
// hide tooltips after 5 seconds
$('#myChartElement').jqxChart('toolTipHideDelay', 5000);

Tooltips format settings

In jqxChart there are two ways to format the content of the tooltips. The first one is to specify format settings that will be applied when the tooltip is displayed. The second option is to define a custom tooltip format function. You can apply format settings to a x-Axis, series group or individual series by defining a toolTipFormatSettings object. When applied to a x-Axis, the settings will be used to format the value on the x-axis. Similarily, when applied to a series group or a serie, the settings will be used to format the y-axis value. The final text displayed in the tooltip is using the following format:
"serie display text", "x-axis text" : "y-axis text".

The toolTipFormatSettings object may contain one or more of the following paramters:
  • prefix - a string that will appear at the begining of the text.
  • sufix - a string that will appear at the end of the text.
  • decimalSeparator - a symbol used to mark the border between the integer and fractional part of a number.
  • thousandsSeparator - a symbol used to mark the border between thousands, millions, billions, etc.
  • decimalPlaces - the number of digits displayed after the decimal separator.
  • negativeWithBrackets - a boolean value indicating whether to display negative numbers in brackets.
  • dateFormat - optional date format string. This property is applicable only when displaying Date objects.

The following example demonstrates the usage of tooltip format settings: 
var sampleData = [
    { Country: 'Switzerland', Inflation2012: -0.95, Inflation2011: -0.72 },
    { Country: 'USA', Inflation2012: 2.35, Inflation2011: 2.96 },
    { Country: 'Germany', Inflation2012: 2.03, Inflation2011: 2.10 },
    { Country: 'India', Inflation2012: 8.38, Inflation2011: 6.49 },
    { Country: 'China', Inflation2012: 3.34, Inflation2011: 4.06 },
    { Country: 'Canada', Inflation2012: 2.05, Inflation2011: 2.30}];
var settings = {
    title: "CPI inflation comparison by country",
    description: "Years: 2011 vs 2012",
    showLegend: true,
    enableAnimations: true,
    padding: { left: 20, top: 5, right: 20, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    xAxis:
        {
            dataField: 'Country',
            toolTipFormatSettings: { prefix: 'Country: '},
        },
    colorScheme: 'scheme02',
    seriesGroups:
        [
            {
                type: 'column',
                orientation: 'horizontal',
                columnsGapPercent: 50,
                valueAxis:
                {
                    displayValueAxis: true,
                    description: '',
                    unitInterval: 1,
                    minValue: -5,
                    maxValue: 10,
                    formatSettings: { sufix: '%' }
                },
                toolTipFormatSettings: { 
                    sufix: '%',
                    decimalPlaces: 3,
                    decimalSeparator: '.',
                    negativeWithBrackets: true
                },
                series: [
                        { dataField: 'Inflation2012', displayText: 'Inflation 2012' },
                        { dataField: 'Inflation2011', displayText: 'Inflation 2011' }
                    ]
            }
        ]
};
$('#jqxChart').jqxChart(settings);

In the above example, when the tooltip is displayed for any of the bars it will have the following format: "serie display text", "x-axis text" : "y-axis text"

The text used for the x-axis axis (x-axis text) values will have a prefix 'Country'.

The text for the data values in this series group will have a '%' sufix, and the numbers will be formatted with 3 decimal places, '.' as a decimal separator symbol, and negative numbers will be displayed in brackets.

The final text in the tooltip will look like this: "Inflation 2012, Country: Switzerland: (-0.950)"

Tooltips format function

The second option of customizing the text in the tooltip is to define a tooltip format function. This callback function will be invoked by jqxChart just before a tooltip shows or when you reposition to a different element. The custom tooltip format function is the most flexible approach as it allows you to put almost any content in the tooltip. Make sure that the function you provide is quick otherwise you may introduce a performance problem. You may define a tooltip format function that will be used for the entire chart, a series group or an individual serie. This allows you to use different functions for different series and series groups. Starting with version 2.9, jqxChart supports rich tooltips which means that you can return any HTML text from the tooltip format callback function.

jqxChart passes the following paramters to the tooltip format function:
  • value - the y-axis value of the currently selected element.
  • itemIndex - the 0-based index of the selected element in the data source.
  • serie - the object representing the serie of the selected element.
  • serieGroup - the object representing the series group of the selected element.
  • xAxisValue - the x-axis value of the selected element.
  • xAxis - the object representing the x-axis of the selected element.
The following example demonstrates the usage of a custom tooltip format function: 
var data = [
    { "month": "Jan", "min": -1.9, "max": 3.7, "avg": 0.2 },
    { "month": "Feb", "min": -0.9, "max": 5.9, "avg": 1.1 },
    { "month": "Mar", "min": 0.8, "max": 9.8, "avg": 4.9 },
    { "month": "Apr", "min": 4.1, "max": 13.9, "avg": 8.7 },
    { "month": "May", "min": 8.0, "max": 18.4, "avg": 13.1 },
    { "month": "Jun", "min": 11.3, "max": 22.2, "avg": 16.6 },
    { "month": "Jul", "min": 13.3, "max": 25.3, "avg": 18.4 },
    { "month": "Aug", "min": 13.0, "max": 24.4, "avg": 17.6 },
    { "month": "Sep", "min": 10.3, "max": 20.8, "avg": 14.3 },
    { "month": "Oct", "min": 6.6, "max": 14.9, "avg": 9.2 },
    { "month": "Nov", "min": 2.1, "max": 8.4, "avg": 4.2 },
    { "month": "Dec", "min": -0.5, "max": 4.5, "avg": 1.5 }
    ];
                
<b>
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, xAxisValue, xAxis) {
    var dataItem = data[itemIndex];
    return '&lt;DIV style="text-align:left";&gt;&lt;b&gt;Month: ' +
            xAxisValue + '&lt;/b&gt;&lt;br /&gt;Min: ' +
            dataItem.min + '°&lt;br /&gt;Max: ' +
            dataItem.max + '°&lt;br /&gt;Average: ' + 
            dataItem.avg + '°&lt;/DIV&gt;';&gt;
};
</b>
            
var settings = {
    title: "Weather in Geneva, Switzerland",
    description: "Climatological Information about Geneva",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: data,
    xAxis:
        {
            dataField: 'month',
            unitInterval: 1
        },
    colorScheme: 'scheme05',
    seriesGroups:
        [
            {
                type: 'columnrange',
                columnsGapPercent: 100,
                <b>toolTipFormatFunction: toolTipCustomFormatFn</b>,
                valueAxis:
                {
                    unitInterval: 5,
                    title: {text: 'Temperature [C]'},
                    minValue: -5,
                    maxValue: 30
                },
                series: [
                        { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min' }
                    ]                        
            },
            {
                type: 'spline',
                <b>toolTipFormatFunction: toolTipCustomFormatFn</b>,
                valueAxis:
                {
                    unitInterval: 5,
                    displayValueAxis: false,
                    minValue: -5,
                    maxValue: 30
                },
                series: [
                        { dataField: 'avg', displayText: 'Average Temperature', lineWidth: 2 }
                    ]
            }
        ]
};
$('#jqxChart').jqxChart(settings);


Tooltip colors and style

The default behavior of jqxChart is to render the tooltips using the settings of the style sheet in the current theme. You may change the CSS in the theme itself. The name of the tooltips text style is 'jqx-chart-tooltip-text'. If you don't want to change the CSS in the existing themes an alternative approach is to define a style and set the toolTipClass property in a seriesGroup or a serie.
In jqxChart you can also change the background color of the tooltip as well as color of the border line around the tooltip. This can be done by setting the toolTipBackground and toolTipLineColor propertis. This properties can be set at series group or serie level.
Example:
series: [
        { 
            dataField: 'avg',
            toolTipClass: myTooltipClass,
            toolTipLineColor: '#FF0000', 
            toolTipBackground: '#00FF00' }
    ]