tooltip désactive le graphique à barres dans Chart.js

Question

J'utilise chart.js pour créer un diagramme à barres empilées et, bien que j'aie réussi à déplacer et à faire pivoter les étiquettes xaxis à afficher sur le dessus des barres, lorsque j'utilise la souris pour se déplacer au-dessus des barres, toute la carte apparaît déformée.

c'est le normal et ce que je reçois après la souris sur:

ici est le code

ce que j'utilise pour faire tourner axeX étiquettes:

https://jsfiddle.net/staverist/zhocr17t/96/

animation: { 
         duration: 1, 
         onComplete: function() { 
         var chartInstance = this.chart; 
          var ctx = chartInstance.ctx; 
          ctx.textAlign = "left"; 
          ctx.font = "bold 10px Arial"; 
          ctx.fillStyle = "black";        
          Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) { 
            var meta = chartInstance.controller.getDatasetMeta(i); 
            Chart.helpers.each(meta.data.forEach(function (bar, index) { 
              ctx.save(); 
              // Translate 0,0 to the point you want the text 
              ctx.translate(bar._model.x, bar._model.y - 30); 
             // Rotate context by -90 degrees 
             ctx.rotate(-0.5 * Math.PI); 
                // Draw text 
           //ctx.fillText(value,0,0); 
           if(bar._datasetIndex==0){    
           ctx.fillText(bar._model.label, 0, 0); 
              ctx.restore(); 
           } 
            }),this) 
          }),this); 
        } 

Answer 1

C'est parce que vous n'êtes pas estoring l'état de la toile après la rotation. Au lieu de restaurer dans l'instruction if, vous devez restaurer à l'extérieur, comme ceci:

... 
if (bar._datasetIndex == 0) { 
    ctx.fillText(bar._model.label, 0, 0); 
} 
ctx.restore(); //<- restore canvas state 
... 

aussi, vous devriez mieux créer un plugin (pour éviter vacillante de l'étiquette), au lieu de dessiner les étiquettes sur l'animation complète.

Voici la working example on JSFiddle