Tenho um Dashboard feito em PHP e utilizo a biblioteca Chart.js.
No Dashboard, possuo alguns gráficos que são alimentados no PHP, como nesse exemplo:
E estou com uma dúvida, quando eu clicar em alguma coluna do gráfico, quero pegar o nome dela e mostrar em um alert do JS mesmo.
Resumindo, quando eu clicar em alguma barra pertencente ao G1, quero que mostre em um alert o nome dele, Exemplo: "Você clicou em G1". O mesmo com o G4 ou qualquer outro que tiver no gráfico. Como posso fazer isso?
Código HTML:
<div class="box-body">
<canvas id="grupo" height="80px"></canvas>
</div>
Código JS:
var ctx5 = document.getElementById("grupo").getContext('2d');
var container5 = new Chart(ctx5, {
type: 'bar',
data: {
labels: label_grupo, // variavel alimentada pelo PHP
datasets: [{
label: "Total",
backgroundColor: '#4dbd74',
data: data_grupo_total, // variavel alimentada pelo PHP
}, {
label: "Alfa",
backgroundColor: '#20a8d8',
data: data_grupo_macho, // variavel alimentada pelo PHP
}, {
label: "Beta",
backgroundColor: '#4c4c4c',
data: data_grupo_femea, // variavel alimentada pelo PHP
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "Quantidade"
}
}],
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
ticks: {
autoSkip: false,
fontSize: 11,
beginAtZero:true
}
}]
},
legend: {
labels: {
boxWidth: 12
},
position: "bottom",
},
}
});