No puedo entender por qué mi console.log no se activa en la función itemSort de información sobre herramientas de Chart.js. ¿Echo de menos algo?
plugins: { legend: { display: false, }, tooltip: { backgroundColor: "transparent", titleColor: "black", titleAlign: "center", bodyColor: "black", bodyAlign: "center", displayColors: false, callbacks: { label: (element) => element.raw, }, itemSort: (elements) => { console.log("elements", elements); return elements; }, }, },Esto se debe a que, de manera predeterminada, el modo de interacción es 'point' por lo que solo muestra un valor único y, por lo tanto, no se puede ordenar. Entonces, chart.js no llama al método. Si lo convierte en otro modo de interacción como 'index' donde muestra la información sobre herramientas para todos los puntos de datos en ese índice de datos, se lo llama:
const 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: { mode: 'index', itemSort: (e, x) => { console.log(e.raw, x.raw) // Dont log entire objects since stack does not like that } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body> Editar:
De su comentario sobre la respuesta eliminada, si desea cambiar el orden de la etiqueta y el valor, debe usar la devolución de llamada de la label en lugar de usar la función de clasificación
const 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: { label: (e) => (`${e.formattedValue}, ${e.label}`) } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body>