Highcharts tickPositions problems - highcharts

Question

I have a weekly chart to display data of 3 years in weeks,
And the chart have 2 XAxis, one show the week number , the other one show the year,
Screen Capture of the chart
Both Axis have the same data Length, but different tick Length,
the Year XAxis label only show on the tick where week number equal to 1
(I have set offset to the Year Axis, so it not exactly shown below the week number 1)
Now I want to display Year Axis Tick when week number equal to 1 only.
So I add "tickPositions" with array [0,53,105] (position of week number of those 3 year) to Year Axis,
but the chart become:
Screen Capture after adding "tickPositions"
Since I only add 3 tick according to the array, why there are so many ticks on the chart?
And how can I fix it? Thank you very much! :)
Thanks Sebastian, after I include the plug-in to the page, it show below error:
Have you seen it before? Thanks!
Another question, I also have a same chart that show daily data, how can I group date time chart? Thanks!
Screen Capture of the error__http://postimg.org/image/iqgfspxqt/
My Year xAxis code:
{
labels: {
align: 'left',
x: 25,
formatter: function () {
var ex = this.axis.getExtremes();
if ((ex.max - ex.min) > 30) {
if (xCategoriesWeekNum[this.value] == 1)
return xCategoriesYear[this.value];
}
else if (((ex.max - ex.min) > 10)) {
if ((xCategoriesWeekNum[this.value] == 1) || ((xCategoriesWeekNum[this.value] % 10) == 0))
return xCategoriesYear[this.value];
}
else {
if ((xCategoriesWeekNum[this.value] == 1) || ((xCategoriesWeekNum[this.value] % 5) == 0))
return xCategoriesYear[this.value];
}
}
},
//offset: 0,
lineWidth: 0,
tickLength: 12,
tickPosition: 'inside',
tickInterval: 1,
tickPositions: [0, 53, 105],
tickPlacement: 'on',
//tickPositioner: function () {
// var ex = this.chart.xAxis[0].getExtremes();
// alert(getTickPosition(ex.min, ex.max));
// return getTickPosition(ex.min, ex.max);
//},
title: {
text: 'Week Number',
},
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
}],
My Week xAxis code:
[{
labels: {
formatter: function () {
var ex = this.axis.getExtremes();
if ((ex.max - ex.min) > 30) {
if ((xCategoriesWeekNum[this.value] == 1) || (xCategoriesWeekNum[this.value] == 7) || (xCategoriesWeekNum[this.value] == 13) || (xCategoriesWeekNum[this.value] == 19) || (xCategoriesWeekNum[this.value] == 25) || (xCategoriesWeekNum[this.value] == 31) || (xCategoriesWeekNum[this.value] == 37) || (xCategoriesWeekNum[this.value] == 43) || (xCategoriesWeekNum[this.value] == 49)) {
return xCategoriesWeekNum[this.value];
//if (xCategoriesWeekNum[this.value] == 1)
// return xCategoriesWeekNum[this.value] + '<br>' + xCategoriesYear[this.value];
//else
}
}
else {
return xCategoriesWeekNum[this.value];
}
}
},
tickPixelInterval: $('#' + container).width() / dataLength,
tickInterval: 1,
showLastLabel: true,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
}