0
317
VistasPuntos cortados a la mitad en los bordes superior e inferior, en chartjs
Como se muestra en la imagen, los puntos se cortan por la mitad cuando alcanzan los bordes inferior o superior (cuando los datos son 1 o 5 en este ejemplo).
Intenté rellenar, agregar algunos datos 'falsos' para extender los límites de 1 y 5 y eliminarlos con la función de devolución de llamada en los ticks. Ninguno funcionó como se esperaba
Esta es mi configuración para este gráfico.
const config = { type: 'line' as ChartType, data: data, options: { pointStyle: 'circle', //pointBackgroundColor: 'white', scales: { y: { ticks: { maxTicksLimit: 5, stepSize: 1, }, min: 1, max: 5, reverse: true, }, }, }, }; Al eliminar min y max, se obtiene el resultado esperado. 
Pero necesito min y max, porque quiero valores fijos de ejes Y
¿Alguna pista de cómo solucionar esto?
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Puede usar el afterDataLimits para establecer el máximo y el mínimo de la escala, de esa manera aún desborda el área del gráfico:
const ctx = document.getElementById('chart').getContext('2d'); const myChart = new Chart(ctx, { type: "line", data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ data: [12, 19, 3, 10, 2, 3], borderColor: 'pink', backgroundColor: 'pink', radius: 10 }] }, options: { scales: { y: { afterDataLimits: (scale) => { scale.max = 10; scale.min = 0; } }, }, }, }); <canvas id="chart" width="250" height="120" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
·
Santiago Trujillo
Denunciar
Responde la pregunta