When I use small version numbers (the label), my canvas is shown as it should:
But when my labels get too long it starts to look very unreadable, and I don't know how to avoid this?:
Can I change my options to solve this, if yes, how?
Here is my javascript function, and nameArray
is the array with version numbers, and I have to shorten these somehow.
function renderBarChart(nameArray, passArray, failArray, divId, title) {
var ctx = document.getElementById(divId).getContext('2d');
var newChart = new Chart(ctx, {
type: 'bar',
data: {
labels: nameArray,
datasets: [{
label: 'Passed',
data: passArray,
backgroundColor: 'rgb(150,238,144)'
},
{
label: 'Failed',
data: failArray,
backgroundColor: 'rgb(204,0,0)'
}
]
},
options: {
title: {
display: true,
text: title
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false
}
}],
yAxes: [{
stacked: true,
ticks: {
maxTicksLimit: 5,
min: 0
}
}]
}
}
});
}
EDIT 1
Right now I'm trying to do something like this, but I can't make it work. Inspiration form: How to shorten Chart.js label
function renderBarChart(nameArray, passArray, failArray, divId, title) {
var ctx = document.getElementById(divId).getContext('2d');
var newChart = new Chart(ctx, {
type: 'bar',
data: {
labels: nameArray,
datasets: [{
label: 'Passed',
data: passArray,
backgroundColor: 'rgb(150,238,144)'
},
{
label: 'Failed',
data: failArray,
backgroundColor: 'rgb(204,0,0)'
}
]
},
options: {
title: {
display: true,
text: title
},
tooltips: {
enabled: true,
mode: 'label',
callbacks: {
title: function(tooltipItems, data) {
var idx = tooltipItems[0].index;
return 'Title:' + data.labels[idx]; //do something with title
},
label: function(tooltipItems, data) {
//var idx = tooltipItems.index;
//return data.labels[idx] + ' €';
return tooltipItems.xLabel + ' €';
}
}
},
hover: {
mode: 'nearest',
intersect: true
},
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
callback: function(value) {
if (value.length > 4) {
return value.substr(0, 4) + '...'; //truncate
} else {
return value
}
},
}
}],
yAxes: [{
stacked: true,
ticks: {
maxTicksLimit: 5,
min: 0
}
}]
}
}
});
}