Highcharts xAxis datetime on xrange graph

Question

I'm learning how to use highcharts and I have an issue with the xrange type. I'm trying to display a simple graph in a div on my website, however I can't see the graph completely. I have an extremely hard time with datetimes... Isn't it supposed to adjust automatically with my data ?

xAxis has the datetime type, and yAxis categories. I was wondering if the problem could come from my div but I tried various sizes and nothing changed...

Am I forgetting something ? I also tried different formats, but in vain, I just want to adjust the scale so I can see the whole graph

Here's my code (it's very basic right now, I'm trying to understand):

Highcharts.chart('chart_{{ Stm.id }}_{{ rowPse.id }}', {

chart: {
    type: 'xrange'
},
title: {
    text: 'Période des données pour chaque dépôt'
},
xAxis: {
    type: 'datetime'
},
yAxis: {
    categories: [/*'Dépôt 15', 'Dépôt 16'*/],
    reversed: false
},
legend: {
    enabled: false
},
colors: ['orange'],
series: [{
    name: '',
    pointWidth: 15,
    data: [{
        x:  Date.UTC(2018, 5, 4),
        x2: Date.UTC(2018, 5, 10),
        y: 0
    }, {
        x:  Date.UTC(2018, 5, 15),
        x2: Date.UTC(2018, 5, 19),
        y: 0
    }, {
        borderColor: 'black',
        borderWidth: 1,
        color: 'rgba(255, 255, 255, 0.1)',
        x:  Date.UTC(2018, 5, 4),
        x2: Date.UTC(2018, 5, 19),
        y: 0
    }, {
        x:  Date.UTC(2018, 5, 27),
        x2: Date.UTC(2018, 6, 9),
        y: 1
    }, {
        x:  Date.UTC(2018, 6, 14),
        x2: Date.UTC(2018, 6, 21),
        y: 1
    }, {
        borderColor: 'black',
        borderWidth: 1,
        color: 'rgba(255, 255, 255, 0.1)',
        x:  Date.UTC(2018, 5, 27),
        x2: Date.UTC(2018, 6, 21),
        y: 1
    }]
}]

});

I'm very sorry if the question has already been asked, but I didn't find anything. I have no doubt it's a stupid issue.

Thanks !