6

Es posible graficar de la siguiente manera?

  • Dos barras
  • La otra "Overlap" es decir, superpuestas.
  • Una de ellas "Stacked" es decir, sumando ambas.

Ex: Ex

Actualmente ambas se stackean,Data 4 y Data 2 se suman.

Actual: Test

Esperado: Lo esperado es que Data 4 y Data 2 se superpongan Ex

var data = {
  labels: ["User1"],
  datasets: [
    
     {
      stack:2,
      label: "Data 4",
      backgroundColor: "grey",
      borderWidth: 1,
      data: [100],
    },
    {
      stack:2,
      label: "Data 2",
      backgroundColor: "lightgreen",
      borderWidth: 1,
      data: [80],

    },
    {
      stack:1,
      label: "Data 3",
      backgroundColor: "blue",
      borderWidth: 1,
      data: [50],

    },
      {
      stack:1,
      label: "Data 1",
      backgroundColor: "yellow",
      borderWidth: 1,
      data: [20],
    },
   
  ],
};

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>

2
  • 2
    ¿puedes explicar un poco mejor tu pregunta? ¿solo necesita una overlap?
    – Ivandez
    Commented el 8 nov. 2021 a las 16:56
  • @Ivandez Tal y como mostré en la pregunta, son 2 barras. Una hace overlap una con otra, (Es decir, se superponen no se stackean) y la otra barra stackea los 2 valores. Por ejemplo, Barra 1 (overlaped) tiene 2 valores, 80 y 100. sin sumarse. Barra 2, 50 y 20. Sumandose llegando a 70 en la escala de x.
    – nawelittle
    Commented el 8 nov. 2021 a las 18:46

1 respuesta 1

4
+50

Actualmente no es posible fijar esta opcion individualmente. Talvez la mejor forma de presentar los datos seria usando una barra superpuesta y las otras separadas. Algo asi:

var data = {
  labels: ["User1"],
  datasets: [    
     
    {
      stack:2,
      label: "Data 2",
      backgroundColor: "lightgreen",
      borderWidth: 1,
      data: [80],

    },
    {
      stack:2,
      label: "Data 4",
      backgroundColor: "grey",
      borderWidth: 1,
      data: [100],
    },    
      {
      
      label: "Data 1",
      backgroundColor: "yellow",
      borderWidth: 1,
      data: [20],      
      stacked: true
    },
    {
      
      label: "Data 3",
      backgroundColor: "blue",
      borderWidth: 1,
      data: [50],
      stacked: true
    },
  ],
};

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

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>

1
  • 1
    Se podría hacer 2 stacked( [Verde / Gris] [Amarillo / Azul ] ) y en la gris restarle la verde claro? es decir que la verde este en 80 y la gris en 20 y al poner el mouse encima que marque el total y el restante?
    – nawelittle
    Commented el 9 nov. 2021 a las 1:49

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.