jqPlot Pie Chart Tooltips Not Appearing

Question

My pie charts are rendering properly, however tooltips are not appearing when hovering over the slices when attempting to use the highlighter plugin for the tooltips. Please take a look at the options I'm setting and let me know if I'm missing something obvious, thanks.

I've included the following relevant js files:

jquery.min.js
jquery.jqplot.min.js
jqplot.pieRenderer.min.js
jqplot.highlighter.min.js

Here are the options I'm setting:

var options = {
    seriesDefaults: {
        seriesColors: ['#00809d', '#c22a33'],
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
            showDataLabels: true,
            dataLabels: 'label',
            dataLabelPositionFactor: .45,
            sliceMargin: 1,
            drawBorder: false,
            startAngle: -90,
            highlightMouseOver: true
        },
        highlighter: {
            show: true,
            showTooltip: true,
            formatString:'%s',
            tooltipLocation: 'ne',
            useAxesFormatters: false
        },
        shadow: false
    },  
    legend: { show:false },
    grid: {
        drawGridlines: false,  
        borderColor: 'transparent',
        shadow: false,
        drawBorder: false,
        shadowColor: 'transparent',
        background: 'transparent'
    }
};

The only bad rendering I can see is the one regarding visual trouble due to label rendering. The labels are too long to fit in your pie chart. Try to comment the "dataLabels: 'label'" line to see if the rendering is well then. Please see an example here — AnthonyLeGovic
Thanks, but I don't see a tooltip when hovering over the slices in your example either? — user857159

AnthonyLeGovic AnthonyLeGovic · Accepted Answer · 2014-02-18T06:53:01

The only bad rendering I can see is the one regarding visual trouble due to label rendering. The labels are too long to fit in your pie chart. Try to comment the "dataLabels: 'label'" line to see if the rendering is well then.

In order to display tooltips when hovering slices, you have to take the highlighter part out of the seriesDefaults block and to put it in the options block :

var options = {
  seriesDefaults: {
    //the 'seriesDefaults' options without the 'highlighter' part  
  },  
  highlighter: {
    show: true,
    showTooltip: true,
    formatString:'%s',
    tooltipLocation: 'ne',
    useAxesFormatters: false
  },
  legend: { show:false },
  grid: { /* the 'grid' options }
};

Please see a working example here

jqPlot Pie Chart Tooltips Not Appearing

1 Answers