How can I make my compass chart go all the way around instead of stopping at the top?

I have this code that recieves data (wind direction) from an Arduino and this script that shows a compass with the direction. The compass itself works and the data I recieve is correct. The problem is that there is a "wall" at north, so if the wind direction is NW and changes to NE, it doesnt do NW -> N -> NE, it goes like NW -> W -> SW -> S -> SE -> E -> NE Is there a way to remove this barrier?

CODE FOR COMPASS ITSELF starts at //Kompass

Compass

var socket = io();

socket.on('data', function (data) {
  console.log(data);


  function safelyParseJSON(json) {
    var parsed

    try {
      parsed = JSON.parse(json)
    } catch (e) {
    }

    return parsed
  }

  obj = safelyParseJSON(data);


  windSpeed = obj.windSpeed;
  windDir = obj.windDir;
  windFloat = obj.windFloat;
  waterAmount = obj.waterAmount;


  //Data i tekstform
  // document.getElementById('windSpeed').innerHTML = obj.windSpeed;
  document.getElementById('windDir').innerHTML = obj.windDir;
  document.getElementById('waterAmount').innerHTML = obj.waterAmount;



  // Vind-graf
  if (chart.data.labels.length != 15) {
    chart.data.labels.push(time);
    chart.data.datasets.forEach((dataset) => {
      dataset.data.push(windSpeed);
    });
  }
  else {
    chart.data.labels.shift();
    chart.data.labels.push(time);
    chart.data.datasets.forEach((dataset) => {
      dataset.data.shift();
      dataset.data.push(windSpeed);
    });
  }
  chart.update();

});



//Kompas
am5.ready(function () {

  var root = am5.Root.new("chartdiv");

  root.setThemes([
    am5themes_Animated.new(root)
  ]);

  var compassChart = root.container.children.push(
    am5radar.RadarChart.new(root, {
      panX: false,
      panY: false,
      startAngle: -90,
      endAngle: 270
    })
  );


  var axisRenderer = am5radar.AxisRendererCircular.new(root, {
    strokeOpacity: 1,
    strokeWidth: 5,
    minGridDistance: 10

  });

  var axis = compassChart.xAxes.push(
    am5xy.ValueAxis.new(root, {
      maxDeviation: 0,
      min: 0,
      max: 360,
      strictMinMax: true,
      renderer: axisRenderer
    })
  );
  axisRenderer.ticks.template.setAll({
    forceHidden: true
  });
  axisRenderer.grid.template.setAll({
    forceHidden: true
  });
  axisRenderer.labels.template.setAll({
    forceHidden: true
  })

  var handDataItem = axis.makeDataItem({
    value: 0
  });

  var hand = handDataItem.set("bullet", am5xy.AxisBullet.new(root, {
    sprite: am5radar.ClockHand.new(root, {
      radius: am5.percent(99),
      topWidth: 5,
      bottomWidth: 20,
    })
  }));

  hand.get("sprite").hand.setAll({
    fill: am5.color(0xff0000),
    fillOpacity: 1
  });

  axis.createAxisRange(handDataItem);

  handDataItem.get("grid").set("visible", false);
  handDataItem.get("tick").set("visible", false);

  function createLabel(text, value, tickOpacity) {
    var axisDataItem = axis.makeDataItem({ value: value });
    axis.createAxisRange(axisDataItem);
    var label = axisDataItem.get("label");
    label.setAll({
      text: text,
      forceHidden: false,
      inside: true,
      radius: 20
    });

    var tick = axisDataItem
      .get("tick")
      .setAll({
        forceHidden: false,
        strokeOpacity: tickOpacity,
        length: 12 * tickOpacity,
        visible: true,
        inside: true
      });
  }

  createLabel("N", 0, 1);
  createLabel("NE", 45, 1);
  createLabel("E", 90, 1);
  createLabel("SE", 135, 1);
  createLabel("S", 180, 1);
  createLabel("SW", 225, 1);
  createLabel("W", 270, 1);
  createLabel("NW", 315, 1);

  for (var i = 0; i < 360; i = i + 5) {
    createLabel("", i, 0.5);
  }


  setInterval(() => {
    handDataItem.animate({
      key: "value",
      to: Math.round(windFloat),
      duration: 500,
      easing: am5.ease.out(am5.ease.cubic)
    });


  }, 500);

});