[Chartjs]-Chart Js , repeated labels yAxis

by

1👍

It is because of your yAxisID, you dont define it but chart.js still makes a new axis for it since it isnt made by you with that id, so if you remove that or make it y which you have defined it doesnt make it again anymore

var data = {
  labels: ["User1", "User2"],
  datasets: [{
      label: "TotalTime",
      backgroundColor: "red",
      borderWidth: 1,
      data: [50, 50],
    },
    {
      label: "TotalTime",
      backgroundColor: "blue",
      borderWidth: 1,
      data: [40, 40],
    },
    {
      label: "Leave",
      backgroundColor: "rgba(191,191,191, 0.5)",
      borderWidth: 1,
      data: [100, 100],
    },
  ],
};

var options = {
  indexAxis: "y",
  scales: {
    y: {
      ticks: {
        color: "white",
        font: {
          size: 12,
        },
      },
      stacked: true,
    },
    x: {
      stacked: true,
      ticks: {
        color: "white",
        font: {
          size: 12,
        },
      },
    }
  }
}

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
canvas {
  background-color: black
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

Leave a comment