0
270
Views¿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 answers
Answer question0
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
Report
Answer question