Se state leggendo questo articolo è perchè come me siete alle prese con Chart.js.
Questa famosa Libreria permette di creare dei grafici molto interessanti e funzionali in tempo breve, ma bisogna saperla utilizzare.
Oggi vi mostro come creare dei tooltip custom.
Avevo la necessità di rimuovere il valore della fetta del mio grafico a torta, e inserire solo la label, che conteneva delle informazioni che volevo visualizzare in grafico.
Sapendo che il grafico si crea con l’html:
<canvas id="chart-ex" width="600" height="400"></canvas>
e inserendo questo js,
new Chart(document.getElementById("chart-ex"), {
"type": "doughnut",
"data": {
"labels": ["Red", "Blue", "Yellow"],
"datasets": [{
"label": "My First Dataset",
"data": [300, 50, 100],
"backgroundColor": ["rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"]
}
]
}
});
per modificare il valore printato del tooltip, è necessario aggiungere il valore Option al js, in questo modo:
"options": {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label;
}
}
}
}
così facendo, viene rimossa dalla visualizzazione il valore della fetta del grafico, facendo comparire solamente la label corrispondente.
E adesso tocca a voi, avete già utilizzato questa libreria? che ve ne pare?