Estoy haciendo un gráfico circular con Chart.js 3 y quiero llamar a una función cuando alguien hace clic en una porción del pastel. Por supuesto, me gustaría identificar en qué punto de datos se hizo clic y usarlo en la función. Parece que no puedo encontrar una buena explicación en los documentos de cómo hacerlo en Chart.js V3. He buscado aquí y veo muchas soluciones para V1 y V2, pero no para V3. Cualquier ayuda sería muy apreciada.
chart = new Chart(thecomplexeschart, { type: 'pie', data: { labels: Object.keys(dataset), datasets: [{ label: label, data: Object.values(dataset), hoverOffset: 4, backgroundColor: makeRandomColorsString(Object.keys(dataset).length), }] }, options: { onClick: (e) => { const canvasPosition = Chart.helpers.getRelativePosition(e, chart); }, interaction: { mode: 'index' }, responsive: false, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { font: { size: 20, weight: 'bolder' }, display: true, text: label, padding: { top: 10, bottom: 30 } } } } } );El evento de clic obtiene junto al evento también una lista de todos los elementos activos y el gráfico, por lo que puede usar la lista de elementos activos para obtener su punto de datos o puede usar getElementsAtEventForMode :
var options = { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }] }, options: { onClick: (evt, el, chart) => { console.log('Active el list: ', chart.data.datasets[el[0].datasetIndex].label, chart.data.datasets[el[0].datasetIndex].data[el[0].index]) let point = chart.getElementsAtEventForMode(evt, 'point', { intersect: true }, true); console.log('Mode point list: ', chart.data.datasets[point[0].datasetIndex].label, chart.data.datasets[point[0].datasetIndex].data[point[0].index]) } } } var 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.5.1/chart.js"></script> </body>