title: Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/5CHAi.jpg" rel="nofollow noreferrer">Before setting the minimum value</a> - x Axis represents hours (0-24)</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/IhxK7.jpg" rel="nofollow noreferrer">After setting the minimum value to 7</a></p>
  
  <p>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?</p>
  
  <p>Here is my code:</p>
  
  <pre><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 &gt; 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 &lt; max; i++) {
  
                      for (var j = 0; j &lt; 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('&lt;canvas id="statsChart" height="70%"&gt;&lt;/canvas&gt;');
  
                  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;
                                  }
                              }
                          }
                      }
                  });
              }
          }
      });
  };
  </code></pre>
  
  <p>Thanks.</p>