Probé los eventos proporcionados en la documentación, así como algunas sugerencias en algunas respuestas, pero solo funcionan cuando se hace clic en la barra, no en la etiqueta. Cuando hago clic en la etiqueta, solo obtengo una matriz vacía en "elemento".
Esto es lo que funcionó para mí hasta ahora de hacer clic en la barra de datos, pero no funciona al hacer clic en la etiqueta:
setOptions({ ... onClick: function (evt, element) { // Get the index clicked: const index = element[0]?.index; }, });Cualquier ayuda sería apreciada.
Puede usar un complemento personalizado para lograr esto:
const findLabel = (labels, evt) => { let found = false; let res = null; labels.forEach(l => { l.labels.forEach(label => { if (evt.x > label.x && evt.x < label.x2 && evt.y > label.y && evt.y < label.y2) { res = { label: label.label, index: label.index }; found = true; } }); }); return [found, res]; }; const getLabelHitboxes = (scales) => (Object.values(scales).map((s) => ({ scaleId: s.id, labels: s._labelItems.map((e, i) => ({ x: e.translation[0] - s._labelSizes.widths[i] / 2, x2: e.translation[0] + s._labelSizes.widths[i] / 2, y: e.translation[1] - s._labelSizes.heights[i] / 2, y2: e.translation[1] + s._labelSizes.heights[i] / 2, label: e.label, index: i })) }))); const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: {}, plugins: [{ id: 'customHover', afterEvent: (chart, event, opts) => { const evt = event.event; if (evt.type !== 'click') { return; } const [found, labelInfo] = findLabel(getLabelHitboxes(chart.scales), evt); if (found) { console.log(labelInfo); } } }] } 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.1/chart.js"></script> </body>