¿Cómo se crea información sobre herramientas personalizada que no se repite si los puntos están en el mismo (x, y)? Echa un vistazo a "C" aquí. Me gustaría mostrar la etiqueta de información sobre herramientas solo una vez. Es la misma información en cualquier información sobre herramientas que se mostrará si los puntos están en el mismo valor X.
var labels = ["A", "B", "C", "D"]; var d1 = [1, 2, 3, 10]; var d2 = [3, 4, 3, 7]; var dd1 = 'y'; var dd2 = 'y'; var ctx = $("#lchart"); var lchart = new Chart(ctx, { type: "line", data: { labels: labels, datasets: [{ cubicInterpolationMode: "monotone", label: "s1", data: d1, pointHoverRadius: 6, pointRadius: 6, pointBorderWidth: 3 }, { cubicInterpolationMode: "monotone", label: "s2", data: d2, pointHoverRadius: 6, pointRadius: 6, pointBorderWidth: 3, } ] }, options: { legend: { display: false }, tooltips: { yPadding: 15, xPadding: 15, backgroundColor: "yellow", titleFontSize: 14, titleFontColor: "#999", bodyFontColor: '#000', bodyFontSize: 12, displayColors: false, callbacks: { label: function(tooltipItem, data) { var labelrows = [ "Title:", dd1, "", dd2 ]; return labelrows; } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <body> <canvas id="lchart"></canvas> </body>No codifique su respuesta para la etiqueta y se ejecutará para cada etiqueta, deberá usar la devolución de llamada del título y solo usar los datos pasados en el argumento para el valor del elemento:
var labels = ["A", "B", "C", "D"]; var d1 = [1, 2, 3, 10]; var d2 = [3, 4, 3, 7]; var dd1 = 'y'; var dd2 = 'y'; var ctx = $("#lchart"); var lchart = new Chart(ctx, { type: "line", data: { labels: labels, datasets: [{ cubicInterpolationMode: "monotone", label: "s1", data: d1, pointHoverRadius: 6, pointRadius: 6, pointBorderWidth: 3 }, { cubicInterpolationMode: "monotone", label: "s2", data: d2, pointHoverRadius: 6, pointRadius: 6, pointBorderWidth: 3, } ] }, options: { legend: { display: false }, tooltips: { yPadding: 15, xPadding: 15, mode: "index", backgroundColor: "yellow", titleFontSize: 14, titleFontColor: "#999", bodyFontColor: '#000', bodyFontSize: 12, displayColors: false, callbacks: { beforeBody: () => ('Title:'), label: function(ttItem, data) { return ttItem.yLabel; } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <body> <canvas id="lchart"></canvas> </body>