Tengo un gráfico de línea chartJS con el complemento de etiqueta de datos, pero la etiqueta de datos está recortada por el borde del lienzo, ¿hay alguna manera de aumentar su índice z o algo así?
Por ejemplo, en este código (una versión limpia del código real), se supone que debo tener 1234 como último valor, pero solo muestra 12 , e incluso 3 está recortado. Me gustaría mostrarlo en la parte superior del borde blanco o tal vez traducirlo unos pocos píxeles a la izquierda automáticamente si no cabe aquí (no me importa si se recorta un poco del borde del número mientras el número no está t)
Chart.register(ChartDataLabels); // Import the data-labels plugin graphItop4 = new Chart(document.getElementById("mois"), { type: "line", data: { labels: [1, 2], datasets: [{ label: "1", fill: true, data: [0, 1234], backgroundColor: "rgba(0, 0, 255, 0.2)", borderColor: "blue", borderWidth: 1, datalabels: { align: 'start', } }, ] }, options: { plugins: { datalabels: { backgroundColor: function(context) { return context.dataset.backgroundColor.replace("0.2", "0.5"); }, borderRadius: 100, color: 'white', font: { weight: 'bold', size: '15' }, formatter: Math.round, padding: 5, } }, }, }) body { font-family: "Arial", Helvetica, sans-serif; display: flex; margin: 18px; padding: 0; background-color: #ccc; } .case { position: relative; padding: 10px; text-align: center; border-radius: 10px; min-height: 240px; background-color: #fff; } h2 { font-size: 1.4em; margin: 0; padding: 10px 20px; border-radius: 10px; background-color: lightgrey; } <div class="case"> <h2>Mois</h2> <div> <canvas height="270" id="mois" width="600"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>