chart.js onHover

by Jeferson Silveira

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<canvas id="Grafico_de_Linha" width="800" height="200"></canvas>
<canvas id="Grafico_de_Barra" width="800" height="200"></canvas>

JavaScript

var data = {
  labels: ['Flamengo', 'Vasco', 'Fluminense', 'Botafogo', 'Bangu', 'Bonsucesso', 'Resende'],
  datasets: [{
    label: "Tarefa PGDI 270",
    backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            		 ],
    borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
           			 ],
   	highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    borderWidth: 2,
    hoverBackgroundColor: "black",
    hoverBorderColor: "black",
    data: [65, 59, 20, 81, 96, 55, 40, 123],
  }]
};
var option = {
  legend: false,
  title: {
    display: true,
  },
  
  


  onHover: function(evt) {
    var item = myLineChart.getElementAtEvent(evt);
    if (item.length) {
    	console.log("onHover",item, evt.type);
      console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]);
    }
    
  },
  onClick: function(evt) {
    var el = myLineChart.getElementAtEvent(evt);
    var el1 = myBarChart.getElementAtEvent(evt);
    console.log("onHover",el,evt);
  }
}


var myLineChart = Chart.Line('Grafico_de_Linha', {
  data: data,
  options: option
});
var myBarChart = Chart.Bar('Grafico_de_Barra', {
  data: data,
  options: option
});