Rickshaw: HoverDetail в неправильном положении при использовании средства визуализации линии плюс RangeSlider.Preview

У меня есть Rickshaw Graph с двумя строками.

Мне нужны Rickshaw.Graph.RangeSlider.Preview и Rickshaw.Graph.HoverDetail:

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();

http://jsfiddle.net/nsams/1jfswzp5/3/

Мой вопрос

Моя проблема в том, что Hover отображается в недопустимой позиции:

Screenshot

То, что я выяснил до сих пор:

  • Удаление RangeSlider.Preview устраняет проблему
  • Изменение рендерера в 'stack' исправляет проблему (похоже, что Hover находится в позиции стека даже при использовании средства визуализации строк)

Ответ 1

Задайте stack:false в конструкторе Rickshaw.Graph:

var graph = new Rickshaw.Graph( {
    element: document.getElementById('chart'),
    renderer: 'line',
    width: 400,
    height: 300,
    offset: 'value',
    stack: false,
    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();