How to avoid empty spaces when adding scatter series to candlestick chart? - highcharts

Question

I thought a newly added series should not affect old ones, but when I tried to add a scatter series with custom markers, empty spaces will be created between candlesticks where the new points are. I know set ordinal option on xAxis to false will avoid it, but the problem of that is it may be possible that some of the data points for candlesticks are missing, creating gaps on the candlestick series. Hence, what I want is a scatter series does not change the look of the candlestick series.
This is the options that I pass to highstock series:
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]
In a word, I just want to get rid of the empty space on the candlestick series when a scatter series is created.
Here is the fiddle http://jsfiddle.net/vRDNZ/. Thank you for your help!

Answer 1

In general this is exactly how ordinal axis should work. There is simple workaround for this, use second xAxis, which is linked to first one, and connect scatter series to that axis. Example: http://jsbin.com/oyudan/267/
xAxis: [{
opposite: false
}, {
linkedTo: 0,
offset: 0,
labels: {
enabled: false
}
}],
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
xAxis: 1,
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]