Así que tengo un gráfico de barras que tiene dos barras diferentes para la oferta y la demanda y quiero que me diga cuál es cuando hago clic en la barra. Porque en este momento solo me da el mismo índice y eje x cuando hago clic en las barras. Entonces, ¿cómo puedo solucionar este problema? Aquí está mi código:

 var canvas = document.getElementById('myChart'); var data = { labels: ["iOS", "Android", "React", "Angular", "SA", "BA", "Backbase"], datasets: [ { label: "supply", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, grouped: true, pointHitRadius: 10, data: [1, 2, 3, 4, 5, 6, 7], }, { label: "demand", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,29,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, grouped: true, pointHitRadius: 10, data: [5, 9, 8, 1, 6, 5, 4], } ] }; var option = { showLines: true, onClick: function(evt) { console.log(myLineChart.getElementAtEvent(evt)); alert(data.datasets[0].data[myLineChart.getElementAtEvent(evt)[0]._index]); alert(data.labels[myLineChart.getElementAtEvent(evt)[0]._index]); } }; var myLineChart = Chart.Bar(canvas,{ data:data, options:option });