Bonjour,

J'aimerais faire en sorte que quand on passe sa souris sur une image un graphique apparaît. J'ai codé mon graphique sous forme d'une fonction js que j'ai mise dans le head.

  <script>
      function Apparait(){
    var ctx = "myChart";
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
      }
</script> 

J'ai ensuite écrit le code suivant dans le body.

<img id="icone" src="icone.png" alt="icone1" width="150" height="150" onmouseover="Apparait()" onmouseout="icone.png">

Quand je passe ma souris sur l'image le graphique apparaît mais l'image ne disparaît pas et j'aimerais également que le graphique apparaisse au même emplacement que l'image.

Merci pour votre aide