Highcharts show x-axis with dates - highcharts

Question

I have a Highchart with x-axis at dates and fixed positions that I want to display as "Mar 2018"
It's defined as
xAxis: {
type: "datetime",
tickPositions: [
new Date('2018-03-01'),
new Date('2019-03-01'),
new Date('2020-03-01'),
new Date('2021-03-01'),
]
}
and series data as
data: [
{ x: new Date('2018-03-01'), y: 2.2 },
{ x: new Date('2019-03-01'), y: 3.3 },
{ x: new Date('2020-03-01'), y: 3.2 },
{ x: new Date('2021-03-01'), y: 3.8 },
]
With this setup no labels show up on the x-axis. I want there to be four ticks showing:
Mar 2018 - Mar 2019 - Mar 2020 - Mar 2021
I've tried using Date.UTC which has no change in tickPositions, and on series data it doesn't plot anything
I also tried using dateTimeLabelFormats dateTimeLabelFormats: { day: '%b %Y' } and label date formatter, both to no avail
labels: {
formatter: function () {
return Highcharts.dateFormat('%b %Y', this.value);
}
}
How can I get x-axis date labels to display?

Answer 1

Numbers are needed in tickPositions and new Date ('string') does not return it:
https://jsfiddle.net/BlackLabel/e2gjqoty/
Also Date.UTC is slow so the months start indexing at 0:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
xAxis: {
type: "datetime",
tickPositions: [
Date.UTC(2018,02,01),
Date.UTC(2019,02,01),
Date.UTC(2020,02,01),
Date.UTC(2021,02,01)
]
}