Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS - charts

Question

I am using Chart.js (www.chartjs.org) to show the representation of the time spent on activities during the work. I have "Working"(green), "Smoking"(red), "At lunch"(orange), "At Toilette"(blue) and "At home"(grey) and I need to show all of them during a day for every worker. For that, I am using the horizontal bar stacked chart and it looks like this:
Before setting the minimum value - x Axis represents hours (0-24)
It bothers me that a lot of space is used for "At home", but I want to see only the time from 7 to 18. I tried to set ticks min to 7 but it doesn't work, and after that it looks like this:
After setting the minimum value to 7
You can see that the graph is messed up and I don't know why. How can I achieve that the x Axis begins from 7, and data is still represented correctly?
Here is my code:
var updateMainChart = function(data) {
$.ajax({
type: "GET",
url: "api/get_activitytracks.php?q=commands",
success: function(response) {
response = JSON.parse(response);
if (response.statusCode == 200) {
//get activity names
var activities = $.map(response.data, function(n, i) {
return n.title;
});
//get max number of activities
var names = [];
var max = 0;
Object.keys(data).forEach(function(key, index) {
names.push(key);
});
$.each(data, function(key, value) {
if (value.length > max) {
max = value.length;
}
});
//build datasets
var myDataSets = [];
var colors = [
'rgba(0, 255, 0, 0.6)',
'rgba(255, 0, 0, 0.6)',
'rgba(0, 0, 255, 0.6)',
'rgba(255, 127, 80, 0.6)',
'rgba(128, 128, 128, 0.8)'
];
for (var i = 0; i < max; i++) {
for (var j = 0; j < activities.length; j++) {
var obj = {};
obj["backgroundColor"] = Array.apply(null, Array(names.length))
.map(String.prototype.valueOf, colors[j]);
//obj[borderColor] = 'rgba(255,255,255,1)';
obj["borderWidth"] = 1;
obj["data"] = [];
obj["stack"] = "dummy";
$.each(data, function(key, value) {
if (undefined !== value[i]) {
if (value[i]["title"] === activities[j]) {
obj["data"].push(value[i]["duration"]);
} else {
obj["data"].push(0);
}
} else {
obj["data"].push(0);
}
});
myDataSets.push(obj);
}
}
$("#statsChart").show();
$("#mainChart").html("");
$("#mainChart").append('<canvas id="statsChart" height="70%"></canvas>');
var myBarChart = new Chart($("#statsChart"), {
type: 'horizontalBar',
data: {
labels: names,
datasets: myDataSets
},
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
min: 7
}
}],
yAxes: [{
stacked: true
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}
});
}
}
});
};
Thanks.

Answer 1

I believe that this is a bug with the current Chart.js version.
As a workaround you could use a callback at the tick of you xAxes like this:
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
min: 0,
callback: function(value, index, values) {
return value + 7;
}
}
}],
...
For more details on callbacks have a look at the documentation.

Answer 2

options: {
scales: {
xAxes: [{
display: true,
ticks: {
suggestedMin: 7
}
}]
}
}

Answer 3

This will work for both Vertical and Horizontal
options:{
scales: {
xAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100
}
}],
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100
}
}],
},
}