Personnaliser les légendes d’un graphique avec Chart Js

Comment personnaliser ses légendes avec le plugin Chart js ?

Dans un précédent tuto, on a vu comment mettre rapidement en place un graphique de statistique par année. Vous pouvez vous référer au précédent tutoriel pour construite tout votre graphique.

Voici le rendu avec des légendes personnalisées:

See the Pen
Chart js Donught with custom labels
by blindDev (@yuyazz)
on CodePen.

A la différence du précédent exemple, la première chose à faire ici est d’annuler les légendes par défaut :

legend: {
display: false
},

Ensuite dans le html, on va construite une simple div. Je lui donne l’ID : « legendBlock« , mais vous pouvez lui donner n’importe quel nom.

<div id="legendBlock"> </div>

Dans le js, on va utiliser la fonction myDoughnutChart.generateLegend(); pour insérer les légendes dynamiquement dans notre div en ciblant son ID :

document.getElementById('legendBlock').innerHTML = myDoughnutChart.generateLegend();

Voilà. ¨Pour le reste, on peut ensuite via notre css créer de simples cercles ou reproduire l’apparence des légendes par défaut. La fonction generateLegend() va déjà générer une liste formatée avec notamment les couleurs définies dans votre js.

<ul class="0-legend"><li><span></span></li>...

Il vous suffira alors de styliser un peu plus votre liste

ul{
list-style:none;
padding-left:0;
margin-left:0
}

#legendBlock li span{
display: inline-block;
width: 45px;
height: 20px;
margin-right: 5px;
border:1px solid #fff

}
.legend{
align-self:center;
}