Aucun des plugins chartist ne fonctionne

Question

J'ai un chartiste en ligne et j'ai configuré les plugins comme suggéré dans les documentations. Je ne reçois aucune erreur lors du chargement de la page. C'est juste que rien ne se reflète sur la carte en fonction du plugin. J'ai ajouté deux plugins - ils ne montrent aucune erreur et mon graphique en ligne montre parfaitement bien.

Mais je ne vois aucun effet de ces plugins - plugin tooltip et plugin pointlabel.

Et oui, ils sont chargés dans le HTML et leurs fichiers CSS sont également inclus sinon auraient eu des erreurs sur les plugins n'étant pas présents.

var options = { 
    low: 0, 
    high: 100, 
    showGridBackground: false, 
    showArea: true, 
    axisX: { 
     showGrid: false 
    }, 
    axisY: { 
    }, 
    plugins: [ 
     Chartist.plugins.ctPointLabels({ 
      textAnchor: 'middle', 
      labelInterpolationFnc: function(value) {console.log("i was called"); return '$' + value} 
     }), 
     Chartist.plugins.tooltip({ 
     }) 
    ] 
}; 

var m = new Chartist.Line('#myChart', data, options); 

Answer 1

Voici un exemple de travail simple utilisant votre code. Une chose à surveiller est que les info-bulles ont besoin de CSS supplémentaires pour afficher correctement.

https://jsfiddle.net/rxdb576n/1/

var data = { 
 
    labels: ["Mon", "Tue", "Wed"], 
 
    series: [ 
 
    [10, 20, 75] 
 
    ], 
 
} 
 

 
var options = { 
 
    low: 0, 
 
    high: 100, 
 
    showGridBackground: false, 
 
    showArea: true, 
 
    axisX: { 
 
    showGrid: false 
 
    }, 
 
    axisY: {}, 
 
    plugins: [ 
 
    Chartist.plugins.ctPointLabels({ 
 
     textAnchor: 'middle', 
 
     labelInterpolationFnc: function(value) { 
 
     console.log("i was called"); 
 
     return '$' + value 
 
     } 
 
    }), 
 
    Chartist.plugins.tooltip({ 
 

 
    }) 
 
    ] 
 
}; 
 

 
var m = new Chartist.Line('#myChart', data, options);

.chartist-tooltip { 
 
    opacity: 0; 
 
    position: absolute; 
 
    margin: 20px 0 0 10px; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    color: #FFF; 
 
    padding: 5px 10px; 
 
    border-radius: 4px; 
 
} 
 

 
.chartist-tooltip.tooltip-show { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script> 
 
<script src="https://unpkg.com/chartist-plugin-tooltips@0.0.17"></script> 
 
<script src="https://unpkg.com/chartist-plugin-pointlabels@0.0.6"></script> 
 
<div id="myChart"></div>