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  style="width:97%;height:480px;margin-top:40px;margin-left:20px;margin-right:10px;">
  <div  style="position: relative; height:32vh; width:80vw">
    <canvas  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

CodePudding user response：

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>