Eu preciso passar o mouse sobre uma série do gráfico de linha ou barra e automaticamente os mesmos dados são selecionados com efeito de highlight. Estou tendo dificuldade. Alguém pode me ajudar? Observação também adicionei ele no:
https://jsfiddle.net/padrecorj/pf2n3uby/455/
siga o código abaixo: <!--
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 }); -->
