cómo ordenar el valor de información sobre herramientas en Chart.js
Uso itemSort, pero no funciona, y no veo ningún registro en mi Console.log, no sé por qué.
Revisé otros temas pero no encontré buenas respuestas para solucionar mi problema.
mi configuración Chart.js es:
var bCtx = document.getElementById('bChart'); var data = { labels: ['a','b','c'], datasets: [{ label: 'test', data: [10,19,5] },{ label: 'test', data: [9,17,3] },{ label: 'test', data: [15,18,4] }] }; var bChart = new Chart(bCtx, { type: 'line', data: data, options: { responsive: true, interaction: { mode: 'index', intersect: false, }, stacked: false, plugins: { tooltip: { itemSort: function(a, b) { console.log(a);// dont work return b.raw - a.raw; } }, title: { display: false, } }, scales: { y: { type: 'linear', display: true, position: 'left', }, y1: { type: 'linear', display: true, position: 'right', // grid line settings grid: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, }, } }, });Parece funcionar cuando reemplazo la información sobre tooltips por tooltip . El show stopper puede ser console.log(a) que intenta registrar un objeto realmente grande, intente registrar a.raw en su lugar.
var bCtx = document.getElementById('bChart'); var data = { labels: ['a', 'b', 'c'], datasets: [{ label: 'test', data: [10, 19, 5] }, { label: 'test', data: [9, 17, 3] }, { label: 'test', data: [15, 18, 4] }] }; var bChart = new Chart(bCtx, { type: 'line', data: data, options: { responsive: true, interaction: { mode: 'index', intersect: false, }, stacked: false, plugins: { tooltip: { itemSort: function(a, b) { return b.raw - a.raw; } }, title: { display: false, } }, scales: { y: { type: 'linear', display: true, position: 'left', }, y1: { type: 'linear', display: true, position: 'right', grid: { drawOnChartArea: false, } } } }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script> <canvas id="bChart"></canvas>