Highcharts Datetime x axis (Scatter Data)

The data has X Y values for each point. Demos the 'setExtremes' function

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="buttonweek" class="autocompare">Set extremes (week)</button>
<button id="buttonmonth" class="autocompare">Set extremes (month)</button>
<button id="buttonreset" class="autocompare">reset extremes</button>

JavaScript

$(function () {
data = '[{name: "Limite BARIO",color:"yellow",data: [{x:Date.UTC(2018, 5, 0),y: 5},{x:Date.UTC(2018, 5, 1),y: 5},{x:Date.UTC(2018, 5, 2),y: 5},{x:Date.UTC(2018, 5, 3),y: 5},{x:Date.UTC(2018, 5, 4),y: 5},{x:Date.UTC(2018, 5, 5),y: 5},{x:Date.UTC(2018, 5, 6),y: 5},{x:Date.UTC(2018, 5, 7),y: 5},{x:Date.UTC(2018, 5, 8),y: 5},{x:Date.UTC(2018, 5, 9),y: 5},{x:Date.UTC(2018, 5, 10),y: 5},{x:Date.UTC(2018, 5, 11),y: 5},{x:Date.UTC(2018, 5, 12),y: 5},{x:Date.UTC(2018, 5, 13),y: 5},{x:Date.UTC(2018, 5, 14),y: 5},{x:Date.UTC(2018, 5, 15),y: 5},{x:Date.UTC(2018, 5, 16),y: 5},{x:Date.UTC(2018, 5, 17),y: 5},{x:Date.UTC(2018, 5, 18),y: 5},{x:Date.UTC(2018, 5, 19),y: 5},{x:Date.UTC(2018, 5, 20),y: 5},{x:Date.UTC(2018, 5, 21),y: 5},{x:Date.UTC(2018, 5, 22),y: 5},{x:Date.UTC(2018, 5, 23),y: 5},{x:Date.UTC(2018, 5, 24),y: 5},{x:Date.UTC(2018, 5, 25),y: 5},{x:Date.UTC(2018, 5, 26),y: 5},{x:Date.UTC(2018, 5, 27),y: 5},{x:Date.UTC(2018, 5, 28),y: 5},{x:Date.UTC(2018, 5, 29),y: 5}]}]';
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate from 2006 through 2008'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            minRange: 14 * 24 * 3600000 // fourteen days
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
      ...