Step serie for navigator - highcharts

Question

Is it possible to use "step" in the navigator serie? As documented in the API it should be possible, but for some reason is not working for me.
I'm making a "Gantt" chart with Highstock, and I don't like the default navigator behavior for charts with multiple panes (by default the navigator "borrow" the first serie data). That's why I'm supplying the navigator series data
Fiddle
$(function () {
var data1 = [[1, 0, 1], [2, 0, 1], [2, null, null], [3, 0, 1], [5, 0, 1], [5, null, null], [6, 0, 1], [10, 0, 1]]
var data2 = [[1, null, null], [2, 0, 1], [4, 0, 1], [10, null, null]]
var dataNavigator = [[1, 1], [3, 2], [4, 1], [5, 0], [6, 1], [10, 1]]
$('#container').highcharts('StockChart', {
chart: {
type: 'arearange'
},
xAxis : {
ordinal: false
},
navigator : {
series : {
step: true,
data: dataNavigator
}
},
yAxis: [{
gridLineWidth: 0,
opposite: false,
height: '50%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y0"
}
}, {
gridLineWidth: 0,
opposite: false,
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y1"
}
}],
rangeSelector: {
selected: 2
},
title: {
text: 'Temperature variation by day'
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>'
},
series: [{
name: 'Serie Name 1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Serie Name 2',
data: data2,
step: true,
yAxis: 1,
id: 'series1'
}]
});
});

Answer 1

As step is defined for series of type line you have to manually define it. Also, the values for step are 'left', 'right' and 'center'. For example:
navigator : {
series : {
type: 'line',
step: 'left',
data: dataNavigator
}
}
See this JSFiddle demonstration of how it looks.