0

Necesito graficar un bar horizontal. El problema es que me repite los labels

Now

Es posible que solo se muestren una vez? Actual:

var data = {
  labels: ["User1", "User2"],
  datasets: [
    {
      stacked: "test",
      label: "TotalTime",
      backgroundColor: "blue",
      borderWidth: 1,
      data: [100, 100],
      yAxisID: "bar-x-axis2",
    },
    {
      stacked: "test",
      label: "Leave",
      backgroundColor: "rgba(191,191,191, 0.5)",
      borderWidth: 1,
      data: [160, 160],
      yAxisID: "bar-x-axis1",
    },
  ],
};

var options = {
  indexAxis: "y",
  scales: {
    xAxes: [
      {
        id: "bar-y-axis1",
        stacked: true,
      },
    ],
    yAxes: [
      {
        id: "bar-x-axis2",
        stacked: true,
      },
      {
        display: true,
        stacked: true,
        id: "bar-x-axis1",
      },
    ],
  },
}

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

Version : "chart.js": "^3.5.1",

1 respuesta 1

1

Te adjunto una posible solución basado en tu código. He eliminado algunas configuraciones innecesarias y agregado otras.

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

var options = {
  indexAxis: "y",
   scales: {
      y: {
        stacked: true
      }
    }
}

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

Agregando un tercer dataset:

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",
}

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

5
  • Genial! muchas gracias, si quisiera agregar otro dataset y que se stackee solo en el azul, es decir que el gris quede de fondo, y que quede por ejemplo la barra azul + un dataset rojo, se podría?
    – nawelittle
    Commented el 15 oct. 2021 a las 17:38
  • @nawelittle claro que se puede. Checa el ejemplo que te adjunté en mi respuesta a ver si es eso lo que querías.
    – Jaime
    Commented el 15 oct. 2021 a las 18:02
  • Genial, me refería a que el gris quede de fondo, por ejemplo si el rojo y el azul tienen un valor de 50, y el gris es de 110, debería stackear las barras rojas y azules y superponerla sobre esos 110, es decir solo debería ver 10 del gris
    – nawelittle
    Commented el 22 oct. 2021 a las 12:36
  • @nawelittle ya entendí, ahí te lo dejo. Saludos.
    – Jaime
    Commented el 22 oct. 2021 a las 13:46
  • Jaime, si agrego al objeto options.scales.y.ticks.color = red, repite el eje de Y, hay forma de cambiar el color de los ticks del eje de Y? sin afectar al renderizado
    – nawelittle
    Commented el 25 oct. 2021 a las 20:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.