Highcharts two datetime xAxis chart with same ticks interval - charts

Question

I two days think about problem, but i don't know make chart with two normalized datetime xAxis.
I Tried use linkedTo and normalize data arrays (but this hard overkill).
linkedTo showing only overlapped data.
Without linkedTo and normalization arrays, ticks showed as async like this
Help me, please
What make chart like this?
$('#container').highcharts({
yAxis: {
gridLineWidth:0
},
xAxis: [
{
gridLineWidth: 1,
type: 'datetime',
lineColor: '#ff9c00'
},
{
type: 'datetime',
opposite: true,
lineColor: '#FF6B6B'
}
],
series: [
{
"name": "first",
"data": [
[
1479164400000,
7323
],
[
1479160800000,
6204
],
[
1479157200000,
3561
],
[
1479153600000,
9706
],
[
1479150000000,
2539
],
[
1479146400000,
4570
],
[
1479142800000,
4187
],
[
1479139200000,
3631
],
[
1479135600000,
7512
],
[
1479132000000,
2456
],
[
1479128400000,
6983
],
[
1479124800000,
3511
],
[
1479121200000,
2765
],
[
1479117600000,
3401
],
[
1479114000000,
2565
],
[
1479110400000,
4425
],
[
1479106800000,
4592
],
[
1479103200000,
4328
],
[
1479099600000,
2694
],
[
1479096000000,
2787
],
[
1479092400000,
11633
],
[
1479088800000,
3311
],
[
1479085200000,
2839
],
[
1479081600000,
12620
]
]
},
{
"name": "second",
"data": [
[
1479250800000,
22730
],
[
1479247200000,
10695
],
[
1479243600000,
12017
],
[
1479240000000,
12110
],
[
1479236400000,
9689
],
[
1479232800000,
4288
],
[
1479229200000,
3702
],
[
1479225600000,
5575
],
[
1479222000000,
5694
],
[
1479218400000,
3098
],
[
1479214800000,
9885
],
[
1479211200000,
6587
],
[
1479207600000,
3028
],
[
1479204000000,
3281
],
[
1479200400000,
12577
],
[
1479196800000,
3886
],
[
1479193200000,
4014
],
[
1479189600000,
6553
],
[
1479186000000,
2041
],
[
1479182400000,
4056
],
[
1479178800000,
4223
],
[
1479175200000,
4920
],
[
1479171600000,
5432
],
[
1479168000000,
7857
],
[
1479164400000,
7323
],
[
1479160800000,
6204
],
[
1479157200000,
3561
],
[
1479153600000,
9706
],
[
1479150000000,
2539
],
[
1479146400000,
4570
],
[
1479142800000,
4187
],
[
1479139200000,
3631
],
[
1479135600000,
7512
],
[
1479132000000,
2456
],
[
1479128400000,
6983
],
[
1479124800000,
3511
],
[
1479121200000,
2765
],
[
1479117600000,
3401
],
[
1479114000000,
2565
],
[
1479110400000,
4425
],
[
1479106800000,
4592
],
[
1479103200000,
4328
],
[
1479099600000,
2694
],
[
1479096000000,
2787
],
[
1479092400000,
11633
],
[
1479088800000,
3311
],
[
1479085200000,
2839
],
[
1479081600000,
12620
]
],
"xAxis": 1,
"dashStyle": "shortdot"
}
]
});
#container {
min-width: 1024px;
max-width: 1024px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

Answer 1

My solution is as follows:
Grab the bottom axis ticks values
Map the values to pixels
Map the pixels to top axis values
Set the values to top axis ticks
All the calculation can be done in tickPositioner.
tickPositioner: function() {
var axisTop = this,
axisBottom = this.chart.xAxis[0],
ticksBottom = axisBottom.tickPositions;
var ticksTop = ticksBottom.map(function(tickValue) {
return axisTop.toValue(axisBottom.toPixels(tickValue));
});
return ticksTop;
},
example: https://jsfiddle.net/439adgpa/
After setting tick positions in tick positioner, you have to manually set the correct format or use it from the bottom axis ticks.
labels: {
format: '{value:%H:%M}'
}
or
ticksTop.info = ticksBottom.info;
example: https://jsfiddle.net/439adgpa/1/

Answer 2

Use stacked series over each other. yAxis stacked and numbered as 0,1,2.
Here is an example fiddle
{
name : 'First',
data :data for first,
zIndex : 1,
lineWidth:3,
color:'red',
yAxis: 0 ,
marker : {
enabled : false
}
}, {
name : 'second',
data : data for second,
lineWidth:3,
zIndex : 1,
yAxis: 1 ,
color:'#BE6230',
marker : {
enabled : false
}
}