Uso ChatJS y quiero agregar un símbolo € después de cada número en la información sobre herramientas. En la mayoría de mis gráficos funciona perfectamente, pero el gráfico de barras apiladas me genera problemas.
Aquí hay un código de ejemplo como el mío (solo un ejemplo básico)
var barChart = new Chart(ctx_barChart, { type: 'bar', data: { labels: ["Fruits"], datasets: [{ label: [ ["Apple"] ], data: [12], backgroundColor: 'blue', barThickness: 80, }, { label: ["Banana"], data: [15], backgroundColor: 'red', barThickness: 80, }, ] }, options: { maintainAspectRatio: false, indexAxis: 'y', responsive: true, scales: { x: { stacked: true, display: false, }, y: { stacked: true, display: false, mirror: true, } }, plugins: { tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.parsed.y !== null) { label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' }).format(context.parsed.y); } return label; } } }, legend: { display: false }, title: { display: false, }, }, }, });La información sobre herramientas muestra 0,00$, pero no mis valores 12 y 15. ¿Alguien tiene alguna sugerencia?
Debe usar context.parsed.x en lugar de context.parsed.y , ya que es un gráfico de barras horizontales.
Eche un vistazo a su código modificado y vea cómo funciona.
new Chart('barChart', { type: 'bar', data: { labels: ["Fruits"], datasets: [{ label: "Apple", data: [12], backgroundColor: 'blue', barThickness: 80, }, { label: "Banana", data: [15], backgroundColor: 'red', barThickness: 80, }, ] }, options: { maintainAspectRatio: false, indexAxis: 'y', responsive: true, scales: { x: { stacked: true, display: false, }, y: { stacked: true, display: false, mirror: true, } }, plugins: { tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': ' + new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(ctx.parsed.x) } }, legend: { display: false }, title: { display: false, }, }, }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <canvas id="barChart" height="100"></canvas>