Rickshaw - Incompatibility between HoverDetail and RangeSlider

Question

I have a rickshaw graph with multiple data series on it (line graph)

I decided to have the hover detail and also a range slider preview at the bottom of the graph - however when I hover over the lines the detail always "snaps" to one line only. If I take the range slider preview away it the hover detail works fine.

Anyone know whats wrong? Thanks in advance.

Code snippet:

var graph = new Rickshaw.Graph( {
                    element: document.querySelector('#timeSeriesPlot_'+index),
                    series: chartData,
                    renderer: 'multi',
                    width: jQuery('.chartAndLegend').width()-100,
                    height: 500,
                    dotSize: 2
              });

var xAxis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

var yAxis = new Rickshaw.Graph.Axis.Y( {
              graph: graph,
              orientation: 'left',
              element: document.querySelector('#y_axis_'+index)
          } );

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

var slider = new Rickshaw.Graph.RangeSlider.Preview({
                    graph: graph,
                    element: document.querySelector('#slider_'+index)
                  });

var legend = new Rickshaw.Graph.Legend({
                    graph: graph,
                    element: document.querySelector('#legend_'+index)
               });

var toggle = new Rickshaw.Graph.Behavior.Series.Toggle({
                graph: graph,
                legend: legend
              });

graph.render();

Screenshot - my mouse is actually above the top green line

Answer 1

It seems that Multi graphs in Rickshaw have stack:true by default. This makes the hover detail locations offset from the actual graph lines. It also causes other problems, such as not allowing multiple series with different numbers of points. To fix, just set stack:false in your Graph constructor arguments, as in:

var graph = new Rickshaw.Graph( {
                    element: document.querySelector('#timeSeriesPlot_'+index),
                    series: chartData,
                    renderer: 'multi',
                    width: jQuery('.chartAndLegend').width()-100,
                    height: 500,
                    dotSize: 2,
                    stack: false
              });