Estoy usando una permutación del código de @Cmyker (ver aquí ) para tener texto en el centro de un gráfico de anillos, pero tengo problemas para obtener la configuración de fecha que hice para romper en otra línea en lugar de ceñirme a la misma línea que el resto del texto. Intenté agregar /n al final del texto donde quiero que se rompa, pero parece que no funciona, ¿algún consejo al respecto?
//Date for chart let today = new Date(); var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear(); //Chart window.onload = function(){ //dataset var data = { labels: [" Akaun 1"," Akaun 2"], datasets: [{ data: [1300.00, 895.75], backgroundColor: ["#430092","#36A2EB"], hoverBackgroundColor: ["#430092","#36A2EB"], cutout: ["70%"], }] }; //init & config var chart = new Chart(document.getElementById('myChart'), { type: 'doughnut', data: data, options: { responsive: true, legend: { display: false}, labels: { font: {size: 12}} } }); const centerDoughnutPlugin = { id: "annotateDoughnutCenter", beforeDraw: (chart) => { let width = chart.chartArea.left + chart.chartArea.right; let height = chart.chartArea.top + chart.chartArea.bottom; let ctx = chart.ctx; ctx.restore(); //Font setting let fontSize = (height / 250).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; let text = "Balance as of: \n" + date; //Center text let textX = width / 2; let textY = height / 2; console.log("text x: ", textX); console.log("text y: ", textY); ctx.fillText(text, textX, textY); ctx.save(); }, }; Chart.register(centerDoughnutPlugin); } <canvas id="myChart"> </canvas>CanvasRenderingContext2D.fillText() dibuja texto en una sola línea. Si necesita dividirlo en varias líneas, deberá dividir el texto e invocar filltext() varias veces.
Como alternativa, puede utilizar la biblioteca Canvas-Txt .
Eche un vistazo a esta respuesta https://stackoverflow.com/a/54390661/2358409