title: Rickshaw: HoverDetail at incorrect position when using line renderer plus RangeSlider.Preview
body: <p>I have a <a href="http://code.shutterstock.com/rickshaw/" rel="noreferrer">Rickshaw Graph</a> with two lines.</p>
  
  <p>I need <code>Rickshaw.Graph.RangeSlider.Preview</code> and <code>Rickshaw.Graph.HoverDetail</code>:</p>
  
  <pre><code>var graph = new Rickshaw.Graph( {
      element: document.getElementById('chart'),
      renderer: 'line',
      width: 400,
      height: 300,
      offset: 'value',
      series: [
          {
              name: 'foo',
              data: seriesData.shift(),
              color: 'rgba(255, 0, 0, 0.4)'
          }, {
              name: 'bar',
              data: seriesData.shift(),
              color: 'rgba(255, 127, 0, 0.4)'
          }
      ]
  } );
  
  var slider = new Rickshaw.Graph.RangeSlider.Preview({
      graph: graph,
      element: document.getElementById('preview')
  });
  
  var detail = new Rickshaw.Graph.HoverDetail({
      graph: graph
  });
  
  graph.render();
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nsams/1jfswzp5/3/" rel="noreferrer">http://jsfiddle.net/nsams/1jfswzp5/3/</a></p>
  
  <h2>My Issue</h2>
  
  <p>My issue is now that the Hover is shown at an invalid position:</p>
  
  <p><img src="https://i.stack.imgur.com/sYFHT.png" alt="Screenshot"></p>
  
  <h2>What I have found out so far:</h2>
  
  <ul>
  <li>Removing the <code>RangeSlider.Preview</code> fixes the problem</li>
  <li>Changing the renderer to 'stack' fixes the problem (Seems like the Hover is at the stack position even when using line renderer)</li>
  </ul>