Hover over unstacked graph

[gingerlime]

I love rickshaw. It's really cool!

I'm having a small issue with an unstacked bar chart however and adding HoverDetail:

for example (a slightly modified version of negative.html)

<!doctype>                                                                                                                                                                                                                                   

<link type="text/css" rel="stylesheet" href="../src/css/graph.css">                                                                                                                                                                          
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">                                                                                                                                                                         
<link type="text/css" rel="stylesheet" href="css/lines.css">                                                                                                                                                                                 

<script src="../vendor/d3.v2.js"></script>                                                                                                                                                                                                   

<script src="../rickshaw.js"></script>                                                                                                                                                                                                       

<div id="chart"></div>                                                                                                                                                                                                                       

<script>                                                                                                                                                                                                                                     

var graph = new Rickshaw.Graph({                                                                                                                                                                                                             
    unstack: true,                                                                                                                                                                                                                           
    element: document.querySelector("#chart"),                                                                                                                                                                                               
    width: 580,                                                                                                                                                                                                                              
    height: 250,                                                                                                                                                                                                                             
    renderer: 'bar',                                                                                                                                                                                                                         
    series: [ {                                                                                                                                                                                                                              
        color: 'steelblue',                                                                                                                                                                                                                  
        data: [ { x: 0, y: 20 }, { x: 1, y: 3 }, { x: 2, y: 15 } ]                                                                                                                                                                           
    }, {                                                                                                                                                                                                                                     
        color: 'olive',                                                                                                                                                                                                                      
        data: [ { x: 0, y: 5 }, { x: 1, y: 7 }, { x: 2, y: 13 } ]                                                                                                                                                                            
    }, {                                                                                                                                                                                                                                     
        color: 'tomato',                                                                                                                                                                                                                     
        data: [ { x: 0, y: 12 }, { x: 1, y: 11 }, { x: 2, y: 18 } ]                                                                                                                                                                          
    } ]                                                                                                                                                                                                                                      
});                                                                                                                                                                                                                                          

var hoverDetail = new Rickshaw.Graph.HoverDetail( {                                                                                                                                                                                          
    graph: graph                                                                                                                                                                                                                             
} );                                                                                                                                                                                                                                         

graph.render();                                                                                                                                                                                                                              

</script>

When you hover over the unstacked bars, the hover detail appears as though the chart is stacked, i.e. glued to the leftmost item and stacked one over the other...

Is there a fix / workaround for this?

[dziemian007]

any progress on that?

[dchester]

I see. That will take a bit of doing to get fixed up. We just need to be a little smarter in Rickshaw.Graph.HoverDetail in this case.

[pkpp1233]

Any word on this? Still broken.

[turt2live]

I'm having this issue as well - any possible workarounds?

[chug2k]

+1

[yLark]

I'm also having this issue.

Plus, the y-axis doesn't auto resize. We ca easily see it in tutorial's graph.

However, it doesn't happen in the real-time data example. Is there any trick to avoid the issue?