0
275
Vistas¿Cómo usar el exceso de espacio vertical en el gráfico de barras apiladas?
Estoy tratando de crear un gráfico de barras apiladas (con chart.js 3.7+) que usa todo el lienzo:
new Chart(..., { type: 'bar', data: { labels: ['a','b','c','d','e'], datasets: [{ backgroundColor: '#ff00ff', data: [20,40,60,40,20], },{ backgroundColor: '#00ff00', data: [100,200,300,200,100], }] }, options: { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: false }, }, scales: { x: { display: false, stacked: true }, y: { display: true, stacked: true } } } });Cuando uso un gráfico de barras normal, el gráfico se estira para usar todo el espacio vertical:
Pero cuando apilo las barras, la barra más larga combinada no ocupa todo el espacio vertical:
¿Cómo puedo hacer que el gráfico de barras apiladas se estire para usar todo el espacio vertical disponible?
Ver ejemplo aquí .
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Puede sumar sus matrices, encontrar el valor máximo en la matriz resultante y establecer la propiedad options.scales.y.max con este valor:
let data1 = [20,40,60,40,20]; let data2 = [100,200,300,200,100]; let sum = data1.map(function (num, idx) { return num + data2[idx]; }); let max = Math.max(...sum); var options = { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: false }, }, scales: { x: { display: false, stacked: true }, y: { display: true, stacked: true, max: max } } }; var mychart = new Chart(document.getElementById('mycanvas2').getContext('2d'), { type: 'bar', data: { labels: ['a','b','c','d','e'], datasets: [{ backgroundColor: '#ff00ff', data: data1 },{ backgroundColor: '#00ff00', data: data2 }] }, options: options }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <div style="width:400px; height: 200px"> <canvas id="mycanvas2"></canvas> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta