How to display tooltips on jqplot pie chart

emt14 picture emt14 · Nov 21, 2011 · Viewed 23.5k times · Source

I have a jqplot pie chart with a legend and I would like to get the legend text to appear as a tooltip when the mouse hovers on the pies. I'm not sure how to do that. Does anyone have any experience doing similar?

example code:

$(document).ready(function(){
  var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]];
  var plot1 = jQuery.jqplot ('chart1', [data],
    {
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});

Answer

Srinidhi picture Srinidhi · Jan 4, 2012

I'm using the latest version of jqPlot and got the tooltips to work by just using the following inside "seriesDefaults" section:

highlighter: {
  show: true,
  formatString:'%s', 
  tooltipLocation:'sw', 
  useAxesFormatters:false
}

The important part is "useAxesFormatters: false" since there are no axes in a pie chart. Feel free to change the "formatString" to whatever it is you want to, but for me, just "%s" shows the exact same string which shows up in the legends.