jqDataVisualization for jQuery Documentation
'
'

Tooltips

Contents

  1. Overview
  2. Custom Tooltips
  3. Highlighting

Overview

The tooltips appears when hovering over a data point in a series. By default the tooltip shows the values of the point and the name of the series.

The tooltips can be normal or shared. When the tooltips are shared, the mouse needs to be somewhere on the chart area and texts for all series are shown in a single tooltip. This is recommended for single series charts and charts for mobile devices.

For all available tooltips options, see Common.Tooltips.

Custom Tooltips

For the different series jqChart decides which value(s) to display. If you want to change the default appearance, you can create advanced tooltips with using the "tooltipFormat" event. In the event return a subset of HTML code.

$('#selector').bind('tooltipFormat', function (event, data) {
    return '<div>Custom Tooltip</div>';
}

Where the type of the 'data' parametter (depending on the series type) can be:

Here is an example of creating custom tooltips for the pie chart:

$(document).ready(function () {
  $('#selector').jqChart({
      title: { text: 'Pie Chart' },
      legend: { title: 'Countries' },
      series: [
        {
            type: 'pie',
            labels: {
                font: '15px sans-serif',
                fillStyle: 'white'
            },
            data: [['United States', 65], ['United Kingdom', 58], ['Germany', 30], 
                   ['India', 60], ['Russia', 65], ['China', 75]]
        }
      ]
  }

  $('#selector').bind('tooltipFormat', function (e, data) {
      var percentage = data.series.getPercentage(data.value);
      percentage = data.chart.stringFormat(percentage, '%.2f%%');

      return '<b>' + data.dataItem[0] + '</b></br>' +
          data.value + ' (' + percentage + ')';
  }
}

When the tooltips are shared and the tooltip is diplayed for 2 or more series, the 'data' parametter is an array of data contexts - Chart.Contexts.DataPointContext[].

Here is an example of creating custom shared tooltips:

$(document).ready(function () {
  $('#selector').jqChart({
      title: { text: 'Shared Tooltips' },
      tooltips: {
          type: 'shared'
      },
      axes: [
        {
            type: 'category',
            location: 'bottom',
            categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
        }
      ],
      series: [
        {
            type: 'line',
            title: 'Series 1',
            data: [62, 70, 68, 58, 52, 60, 48]
        },
        {
            type: 'line',
            title: 'Series 2',
            data: [56, 30, 62, 65, 40, 36, 70]
        }
      ]
  }

  $('#selector').bind('tooltipFormat', function (e, data) {

      if ($.isArray(data) == false) {

          var tooltip = '<b>' + data.x + '</b></br>';

          tooltip += '<span style="color:' + data.series.fillStyle + '">' +
                      data.series.title + '</span>: ' + data.y + ' Items</br>';

          return tooltip;
      }

      var tooltip = '<b>' + data[0].x + '</b></br>';

      for (var i = 0; i < data.length; i++) {

        var context = data[i];

        tooltip += '<span style="color:' + context.series.fillStyle + '">' +
                    context.series.title + '</span>: ' + context.y + ' Items</br>';
      }

      return tooltip;
  }
}

Highlighting

When the mouse is over a data point in a series, this data point is highlighted.

Here is an example how to customize the data points highlighting appearance:

$(document).ready(function () {
    $('#selector').jqChart({
        title: 'Highlighting',
        tooltips: {
            disabled: true,
            highlighting: true,
            highlightingFillStyle: 'rgba(0, 204, 0, 0.5)',
            highlightingStrokeStyle: 'black'
        },
        series: [
            {
                type: 'column',
                title: 'Column',
                data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], 
                       ['E', 27], ['F', 85], ['D', 43], ['H', 29]]
            },
            {
                type: 'spline',
                title: 'Spline',
                data: [['A', 78], ['B', 72], ['C', 86], ['D', 23], 
                       ['E', 70], ['F', 60], ['D', 88], ['H', 22]]
            }
        ]
    }
}