Question

0

264

Vistas

Chart Js , repeated labels yAxis

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

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

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-06T15:21:16.086Z

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>

0

264

Chart Js , repeated labels yAxis

1 Respuestas

0

Encuentra empleos remotos

Andres GPT