chart.js - borderdashoffset - line chart options chart js

Chart.js V2: Agregar prefijo o sufijo a la etiqueta de información sobre herramientas

Question

En Chart.js V1.0, agregaría tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= ''€'' + value %>" para agregar un euro símbolo como prefijo de la etiqueta de información sobre herramientas. Sin embargo, esto ya no funciona en V2. ¿Alguien sabe la nueva forma de lograr esto? Parece que no puedo encontrarlo.

¡Muchas gracias!

Answer 1

Además de la respuesta de iecs, si desea devolver el texto predeterminado exacto y agregar algunos más (como un signo de € en su caso), use la siguiente sintaxis:

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: ''bar'',
    data: chartData,
    options: {            
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +'': '' + tooltipItems.yLabel + '' €'';
                }
            }

        }
    }
});

Answer 2

En la versión 2.0, la opción tooltipTemplate está en desuso. En su lugar, puede usar devoluciones de llamada para modificar la información sobre herramientas que se muestra. Hay una muestra para el uso de devoluciones de llamada here y puede encontrar las devoluciones de llamada posibles en la documentation en Chart.defaults.global.tooltips

En tu caso, yo haría lo siguiente:

window.myLine = new Chart(chart, {
    type: ''line'',
    data: lineChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: ''single'',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + '' €'';
                    }
                }
            },
     }       
  });

No olvides configurar la metaetiqueta HTML:

<meta charset="UTF-8">

Enlace actualizado de Documtation a partir del 28 de septiembre de 2017: Tooltip Callbacks

Answer 3

Esto establece "etiqueta + valor + €"

options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return data.labels[tooltipItem.index] + '': '' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ''€'';
            }
        }
    }
}

Answer 4

Si tiene un gráfico de barras apiladas (y asumo un gráfico de líneas apiladas) y desea formatear todos los puntos de datos incluidos en una sola barra con un símbolo de moneda, puede hacer algo como esto:

    tooltips: {
        mode: ''label'',
        callbacks: {
            label: function (tooltipItems, data) {
                return ''$'' + tooltipItems.yLabel;
            }
        }
    },

Tenga en cuenta el valor del mode .

Si desea tener un control más preciso de la información sobre herramientas, por ejemplo incluir las etiquetas tal como aparecen en la leyenda del gráfico, puede hacer algo como esto:

    tooltips: {
        mode: ''single'',  // this is the Chart.js default, no need to set
        callbacks: {
            label: function (tooltipItems, data) {
                var i, label = [], l = data.datasets.length;
                for (i = 0; i < l; i += 1) {
                    label[i] = data.datasets[i].label + '' : '' + ''$'' + data.datasets[i].data[tooltipItems.index];
                }
                return label;
            }
        }
    },

Answer 5

Simplemente actualizando la respuesta de @Luc Lérot. Tuve el mismo problema y su código me ayudó pero no lo solucionó, tuve que modificarlo para que funcione para mí. Usando la versión 2.6.0 de Chart.js

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: ''bar'',
    data: chartData,
    options: {            
        tooltips: {
               callbacks: {
                   label: function (tooltipItems, data) {
                       return data.datasets[tooltipItems.datasetIndex].label + '': '' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + '' €'';
                   }
              }

        }
    }
});

Answer 6

Vea si esto ayuda:

        var config = {
            options: {
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; },
                        label: function (tooltipItem, data) {
                            var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                            return amount + '' / '' + total + '' ( '' + parseFloat(amount * 100 / total).toFixed(2) + ''% )'';
                        },
                        //footer: function(tooltipItem, data) { return ''Total: 100 planos.''; }
                    }
                },
            }
        };