Reputation: 301
My current graphs on the webpage are powered by Chart.js v2.5.3. Charts that were configured a while ago works perfectly fine. Here is the code:
var ctw = document.getElementById("chart-budget");
var myChart = new Chart(ctw, {
type: 'bar',
data: {
labels: ["budget", "costs"],
datasets: [{
label: "Amount",
data: [520980, 23397.81],
backgroundColor: [
'rgba(143, 211, 91, 0.2)',
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(143, 211, 91,1)',
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
As v3 is now available I was thinking to switch to it. A quick test revealed some issues I will need to overcome. One of the issue I'm struggling with is unability to hide dataset legend. In V2.5 it was done by options.legend.display
set to false but not any longer.
In the documentation I did not come across anything that could help me.
Is there anyone who can advice on how to hide a legend in Chart.js V3?
/Kuba
Upvotes: 9
Views: 10749
Reputation: 31
In Chart.js V3 you can add a filter
function to options.plugins.legend.labels
and evaluate either the labels or their datasetIndex
values to suppress specific legends rather than ALL of them.
options: {
plugins: {
legend: {
labels: {
filter: function(legendItem, data) {
let label = data.datasets[legendItem.datasetIndex].label || '';
if (typeof(label) !== 'undefined') {
if (legendItem.datasetIndex >= 3){
return false;
}
}
return label;
}
}
}
}
}
Upvotes: 3
Reputation: 2205
Configuring option like below would solve the problem in V3 version.
options: { plugins: { legend: { display: false }, } }
Upvotes: 27