1👍
✅
The background is already the same chart in the rangeslider.
You cannot logically move the range slider into main area – where would you drag the slider to?
However, if you are just looking to select a moving window (say as a filter), you can do it by resizing the chartScrollbar to fill the height of the chart (leaving a bit so that it doesn’t get clipped off)
"scrollbarHeight": 490
and the hiding the actual chart’s components (points, lines, axes, tooltips) using CSS so that they don’t interfere.
#chartdiv svg > g:nth-child(<<index of layer to hide>>) {
display: none;
}
If you want the axes, identify the chart layer with the axes and set it’s transform to translate(0, 0) so that it overlaps the scrollbarChart.
CodePen – http://codepen.io/anon/pen/waYzpw
