Need help splitting date to new line in Doughnut Chart js

I’m using a permutation of @Cmyker’s code (see here) to have text in the center of a doughnut chart, but I’m having trouble getting the date setting I made to break into another line instead of sticking to the same line as the rest of the text. I’ve tried adding /n on the end of the text where I want it to break but that doesn’t seem to be working, any advice on this?

//Date for chart
let today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();

//Chart
window.onload = function(){
  //dataset
  var data = {
    labels: [" Akaun 1"," Akaun 2"],
    datasets: [{
      data: [1300.00, 895.75],
      backgroundColor: ["#430092","#36A2EB"],
      hoverBackgroundColor: ["#430092","#36A2EB"],
      cutout: ["70%"],
    }]
  };

  //init & config
  var chart = new Chart(document.getElementById('myChart'), {
    type: 'doughnut',
    data: data,
    options: {
      responsive: true,
      legend: { display: false},
      labels: { font: {size: 12}}
    }
  });

  const centerDoughnutPlugin = {
      id: "annotateDoughnutCenter",
      beforeDraw: (chart) => {
        let width = chart.chartArea.left + chart.chartArea.right;
        let height = chart.chartArea.top + chart.chartArea.bottom;
        let ctx = chart.ctx;

        ctx.restore();
        //Font setting
        let fontSize = (height / 250).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";

        let text = "Balance as of: n" + date;

        //Center text
        let textX = width / 2;
        let textY = height / 2;

        console.log("text x: ", textX);
        console.log("text y: ", textY);

        ctx.fillText(text, textX, textY);
        ctx.save();
      },
    };

  Chart.register(centerDoughnutPlugin);
}

<canvas id="myChart">
</canvas>