¿Existe la posibilidad de cambiar el color de los elementos de "pie de página" según su valor? Este es mi pie de página actual: devolución de llamada donde se calcula la suma y mi objetivo es cambiar el color de la fuente a rojo si es negativo.
Estoy tratando de evitar el uso de una "información sobre herramientas de contenido html" como siempre se sugiere porque la posición parece un poco complicada y el lienzo hace un trabajo bastante bueno.
footer: function (tooltipItems) { let sum = tooltipItems[0].parsed.y - tooltipItems[1].parsed.y; sum = appCore.formatNumber(sum, page.pc(), true, true); return `${page.translations['label.sum']}: ${sum}`; },Dentro de la documentación, encontré "footerColor", pero parece que el valor solo se puede establecer una vez. Intenté lo siguiente en el método de pie de página:
chart.instance.options.plugins.tooltip.footerColor = (sum >= 0) ? '#283823' : '#762552';"gráfico" es mi instancia global que he almacenado durante la inicialización del gráfico.
Espero que alguien pueda empujarme en la dirección correcta.
gracias cristian
No sé de dónde obtienes la parte de la instancia, ya que no está en el gráfico si la registro. Pero sí, es posible, puede hacerlo globalmente (primera línea comentada), puede hacerlo para un gráfico específico en la creación (segunda línea comentada) o para un gráfico específico después de la creación (última línea)
//Chart.defaults.plugins.tooltip.footerColor = (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red') var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { plugins: { tooltip: { callbacks: { footer: () => ('fff') }, //footerColor: (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red') } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); const chart = new Chart(ctx, options); chart.options.plugins.tooltip.footerColor = (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red'); chart.update(); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>