Estoy tratando de crear un gráfico de barras para realizar un seguimiento de un presupuesto con QuickChart . Quiero que el gráfico tenga un conjunto de etiquetas en la parte superior de las barras (para el % restante) y un segundo conjunto de etiquetas dentro de cada barra (para los $ restantes).
Pude descifrar las etiquetas en la parte superior de las barras, pero necesito ayuda para agregar un segundo conjunto de etiquetas dentro de las barras. Las etiquetas dentro de las barras deberán basarse en una segunda matriz de datos.
He publicado mi código, que se puede modificar en el editor en vivo aquí . ¡Cualquier ayuda sería muy apreciada!
{ type: 'bar', data: { labels: ['Food', 'Gas', 'Other'], datasets: [{ label: 'Category', data: [.5, .7, .8] }] }, options: { plugins: { datalabels: { formatter: function(value) { return Math.round(value*100) + '%';}, anchor: 'end', align: 'end', color: 'black', labels: { percent: { font: { weight: 'bold', size:26, } } } } }, scales: { yAxes: [ { type: 'linear', ticks: { beginAtZero: true, suggestedMin : 0, suggestedMax : 1, } }] } } }Además de datalabels.labels.percent , también puede definir datalabels.labels.value , tanto con formatter como con posicionamiento específicos. No es necesario definir un segundo conjunto de dataset , simplemente defina la amountRemaining dentro del conjunto de datos existente y haga referencia a él en el formatter correspondiente.
Esto podría quedar de la siguiente manera...
{ type: 'bar', data: { labels: ['Food', 'Gas', 'Other'], datasets: [{ label: 'Category', data: [.5, .7, .8], amountRemaining: [300, 420, 480] }] }, options: { plugins: { datalabels: { color: 'black', labels: { percent: { formatter: v => Math.round(v * 100) + '%', anchor: 'end', align: 'end', font: { weight: 'bold', size: 26, } }, value: { formatter: (v, ctx) => ctx.chart.data.datasets[0].amountRemaining[ctx.dataIndex] + '$', font: { weight: 'bold', size: 26, } } } } }, scales: { yAxes: [{ type: 'linear', ticks: { beginAtZero: true, suggestedMin: 0, suggestedMax: 1, } }] } } }