0
261
Vistas¿Cómo arreglo el valor del eje y por encima del límite en ChartJS?
¡Hola, todos!
Estoy usando chartjs-plugin-datalabels para evitar valores pequeños que no se pueden desplazar al mostrar el valor sobre su barra, pero cuando uno de ellos tiene el valor más alto, las etiquetas de datos exceden el límite del contenedor del gráfico.
ACTUALIZAR:
Además, puede usar la opción suggestedMax y creo que es mejor que dar un relleno
const options = { plugins: { datalabels: { color: '#374774', font: { family: 'MyriadSemiBold', size: 14 }, align: 'end', anchor: 'end', formatter: (value) => { if (value > 0) { return localizeNumber(value) } return '' }, }, legend: { display: false }, }, scales: { x: { grid: { lineWidth: 0 }, ticks: { display: false, }, }, y: { // Highest value in your datasets suggestedMax: highestValue > 0 ? highestValue + 1e5 : 10, grid: { color: '#DFDFDF' }, ticks: { callback: (value) => { return abbreviateNumber(value) }, font: { family: 'MyriadRegular', size: 14 }, color: '#374774', }, }, }, }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
La solución más fácil es agregar relleno en la parte superior de su gráfico (muestra simple a continuación). También puede jugar con las opciones de sujeción del complemento de etiqueta de datos para ajustar la posición de la etiqueta cuando está fuera del gráfico.
const layoutOptions = { padding: { top: 30 // Add 30 pixels of padding to top of chart. } }; const data = { labels: ['Large', 'Small'], datasets: [{ data: [100, 2] }] }; const config = { type: 'bar', data: data, options: { layout: layoutOptions, scales: { y: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'top' } } }, }; new Chart(document.getElementById('myChart'), config); #myChart { max-height: 180px; } <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <script>Chart.register(ChartDataLabels);</script>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta