Stacked Bar Chart's Hover not Working

Question

I am checking Stacked Charts in Flot and I found out something weird in the Bar Chart.

I tried using this : http://jsfiddle.net/zNXBd/41/

In this sample codes, try to hover your mouse on the stacked lines. Hover is working. Now, this time, please try to change "lines" to "bars" and run again.

ds.push({
    data:completes,
    label: "Complete",
    yaxis: 2,
    stack:true,
    bars: {
        show: true, 
        fill: true, 
        order: 2,
    }
});
ds.push({
    data:screeners,
    label: "Pre-Screened",
    yaxis: 1,
    bars: {
        show: true, 
        fill: true, 
        order: 1,
    }
});
ds.push({
    data:holds,
    label: "Holds",
    yaxis: 2,
    stack:true,
    bars: {
        show: true, 
        fill: true, 
        order: 3,
    }
});

Notice that the bars are not anymore hoverable. Seems like there's an issue in this part.

Could you please help me how to fix this issue?

Answer 1

It seems your bars are too thin for the hover to trigger. You might need to put a barWidth in your bars options. By default, the barwidth is 1, in x-axis unit. In a time axis, 1 = 1ms, and at your scale, a one ms width bar isnt represented (we only see the stroke, not the bar itself)

From the doc:

"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.

example:

bars: {
    show: true, 
    fill: true, 
    order: 2,
    barWidth: 1*3600*1000
}

Here is your fiddle with barwidth set at 1 hour:

http://jsfiddle.net/zNXBd/42/