CODEWITHSUNDEEP
javascriptchart.js
nawelittle
nawelittle

Reputation: 293

Chart Js , repeated labels yAxis

Y have this issue: User 1 repeats twice in two colors, gray and white. Gray should not be seen enter image description here

This problem starts when I put styles to the x axis, it repeats the labels. is there any solution for this case? The requirement is simply to change the color of the axis labels and ticks. The gray bar is at the bottom, that is, it does not stack with the red and blue ones

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

var options = {
  indexAxis: "y",
  scales: {
      y: {
        ticks: {
          color: "white",
          font: {
            size: 12, 
          },
        },
        stacked: true,
      },
      x: {
        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/[email protected]/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

Upvotes: 1

Views: 313

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31341

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/[email protected]/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

Upvotes: 1

Related Questions