Las etiquetas de mi gráfico están cortadas y al probar diferentes soluciones encontradas en stackoverflow, como agregar espacios en las etiquetas o configurar el relleno de diseño, no resolvió el problema.
El código
const optionsTotali = { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: false }, tooltip: { displayColors: false, mode: "index", intersect: 0, callbacks: { label: function(context) { return "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ',')); } } }, }, scales: { y: { grid: { display: false }, ticks: { min: 0, beginAtZero: true, sampleSize: 1, callback: function(value, index, values) { return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); } } } } }; const ctx = document.getElementById("chartTotali").getContext('2d'); const chartTotali = new Chart(ctx, { type: 'line', data: { labels: [ "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00" ], datasets: [{ label: "Totale €", fill: true, backgroundColor: '#0084ff', borderColor: '#0084ff', borderWidth: 2, pointBackgroundColor: '#0084ff', data: [ "17089.36", "394279.52", "514863.02", "540198.74", "379222.06", "8793.42", "79.58", "116379.41", "444580.43", "506663.36", "457947.28", "138158.94", "398.46" ], }] }, options: optionsTotali }); .card-chart { overflow: hidden; } .card { display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 0.0625rem solid rgba(34, 42, 66, .05); border-radius: 0.2857rem; } .card { background: #27293d; border: 0; position: relative; width: 100%; margin-bottom: 30px; box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%); } .card .card-body { padding: 15px 15px 15px 15px; } .card-body { flex: 1 1 auto; padding: 1.5rem; } .card-chart .chart-area { height: 220px; width: calc(100% + 30px); } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script> <div class="card card-chart"> <div class="card-header"> <div class="row"> <div class="col-sm-6 text-left"> <h5 class="card-category">Totale vendite</h5> <h2 class="card-title">Totali</h2> </div> </div> </div> <div class="card-body"> <div class="chart-area"> <canvas id="chartTotali" width="1563" height="220" style="display: block; box-sizing: border-box; height: 220px; width: 1563px;"></canvas> </div> </div> </div>Puede usar la propiedad sampleSize
Después de probar su código, el problema parece provenir de esta parte:
callback: function(value, index, values) { return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }Mi conjetura es: dado que cambia las etiquetas en una devolución de llamada asíncrona, chart.js ya no sabe qué ancho aplicar y va con el ancho de la primera etiqueta ...
Puede resolver esto configurando el ancho de esta manera:
afterFit: function(scaleInstance) { scaleInstance.width = 100; // sets the width to 100px }Fuente aquí:Cómo establecer un ancho fijo para las etiquetas en chartjs