I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below

I want "Project Count" label in y axis and "Installers" label in x axis in this chart.js chart. At present, For x axis I am using the h5 html tag (not correct).
I attached my chart.js javascript code below. and Image of chart.js chart also added below..
THanks in advance.
my code:

<div class="cardImage" style="width:97%;height:480px;margin-top:40px;margin-left:20px;margin-right:10px;">
  <div class="columnChild child3" style="position: relative; height:32vh; width:80vw">
    <canvas class="bubble" id="bubble" style="margin-left:10px;width:25px;height:10px;"></canvas>
  </div>

  <center>
    <h5 style="color:black;margin-top:240px; margin-left:-100px;">Installers</h5>
  </center>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var bubbleBackgroundColor = function () {
      return 'rgba(194, 106, 137, 0.8)'
    };
    var bubbleBorderColor = function () {
      return 'rgba(243, 193, 28, 0.8)'
    };
    var bubbleData = {{ data['bubbleData'] | tojson }};
    var bubbleCategory = {{ data["bubbleCategory"] | tojson }};
    var colorBubbleHover = {{ data['colorBubbleHover'] | tojson }};
    var pointBorderColor = {{ data['pointBorderColor'] | tojson }};
    var bubbleChartData = {
      animation: {
        duration: 10
      },
      datasets: [{
        label: "Customer Segment",
        fill: true,
        lineTension: 0.1,
        backgroundColor: bubbleBackgroundColor(),
        borderColor: bubbleBorderColor(),
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: pointBorderColor,       //"rgba(75,192,192,1)"
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: colorBubbleHover,
        pointHoverBorderColor: "blue",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: bubbleData,
      }],
    };

    var ctx = document.getElementById('bubble');
    var bubble = new Chart(ctx, {
      type: 'bubble',
      data: bubbleChartData,
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false,
          }
        },
        scales: {
          x: {
            type: 'category',
            labels: bubbleCategory,
            labelStrng: "Installers",
            scaleLabel: {
              display: true,
              labelString: "Project Count",
              fontStyle: 'bold',
              fontColor: "black"
            }
          }

        }
      }
    });
  </script>
</div>

[My bubble Chart image][1]
[1]: https://i.stack.imgur.com/LVZS4.png

>Solution :

This is because you are using V2 syntax by trying to configure the title in the scaleLabel option. In V3 these options have been moved to the title namespace in the scale:

new Chart('websitecalls_chartel', {
  type: 'line',
  data: {
    labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
    }]
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'x title',
          font: {
            weight: 'bold'
          },
        }
      },
      y: {
        title: {
          display: true,
          font: {
            weight: 'bold'
          },
          text: 'y title'
        }
      },
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>