Question

126

jqplot tooltip on bar chart

rated 0 times [ 130] [ 4] / answers: 1 / hits: 31077 / 14 Years ago, thu, february 3, 2011, 12:00:00

I'm using the jquery plugin jqplot for plotting some bar charts.
on hover, I'd like to display the tick for the bar and its value on a tooltip. I've tried

highlighter: { show: true, 

            showTooltip: true,      // show a tooltip with data point values.

            tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.

            tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.

            lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker

            }

but it doesn't work. the bar visually gets lighter, and there's a small dot on the top (which would ideally go away--probably from line chart renderer stuff), but there is no tooltip anywhere. Anyone know how I can do this? I'll have lots of bars so the x-axis will be cluttered and kind of a mess if I show them down there only.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nadiatristinl

Add To Favorites

Follow

Total Points: 151

Total Questions: 116

Total Answers: 108

Location: Japan

Member since Tue, Jul 26, 2022

2 Years ago

answered 14 Years ago sidneyh · Accepted Answer

I go through jqplot.highlighter.js and find an undocumented property: tooltipContentEditor.
I use it to customize the tooltip to display x-axis label.

Use something like this:

highlighter:{

        show:true,

        tooltipContentEditor:tooltipContentEditor

    },



function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {

    // display series_label, x-axis_tick, y-axis value

    return plot.series[seriesIndex][label] + ,  + plot.data[seriesIndex][pointIndex];

}