Estoy usando chart.js para desarrollar un TreeMap. Funciona muy bien, pero el problema es que cada rectángulo solo muestra el valor de los datos. Quiero agregar un texto personalizado al lado del valor. ¿Cómo logro esto?
var topTags = [ {tag:'python',num:133269},{tag:'javascript',num:109742},{tag:'java',num:65490},{tag:'c#',num:45445},{tag:'html',num:43767},{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},{tag:'python',num:29942},{tag:'css',num:29654},{tag:'r',num:28319},{tag:'c++',num:27389},{tag:'node.js',num:25415},{tag:'angular',num:24093},{tag:'pandas',num:23826},{tag:'arrays',num:23075},{tag:'jquery',num:18968},{tag:'mysql',num:18863},{tag:'swift',num:17971},{tag:'ios',num:17600},{tag:'json',num:15589},{tag:'laravel',num:15537},{tag:'flutter',num:15201},{tag:'c',num:15195},{tag:'django',num:14748},{tag:'sql',num:12752},{tag:'reactjs',num:10974},{tag:'excel',num:10962},{tag:'list',num:10726},{tag:'regex',num:10676} ]; var canvas = document.getElementById("treemap"); var ctx = canvas.getContext("2d"); var chart = window.chart = new Chart(ctx, { type: "treemap", data: { datasets: [{ tree: topTags, key: "num", groups: ['num'], spacing: 0.5, borderWidth: 1.5, fontColor: "black", borderColor: "grey" }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { enabled: false } } });Al ejecutar este código, obtengo los números en cada rectángulo, pero necesito que se agregue texto junto a los números de cada rectángulo. ¿Cómo logro esto?
Puede usar las opciones del formatter en la sección de labels :
const options = { type: 'treemap', data: { datasets: [{ label: '# of Votes', tree: [12, 19, 3, 5, 2, 3], backgroundColor: 'pink', labels: { display: true, formatter(ctx) { const data = ctx.chart.data; return `Custom Text: ${data.datasets[ctx.datasetIndex].tree[ctx.dataIndex]}`; } }, }] }, options: {} } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@2.0.1/dist/chartjs-chart-treemap.js"></script> </body>