title: How to make x-axis start from 0 in chart.js graphs?
body: <p>I am using chart.js library and I am having a issue. I want the years axis to start from 0.  Right now its starting from the negative value(-50 in my case).</p>
  
  <p><strong>Currently its coming like this-</strong>
  <a href="https://i.stack.imgur.com/oMKi8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oMKi8.jpg" alt="enter image description here"></a></p>
  
  <p><strong>What I want-</strong>
  <a href="https://i.stack.imgur.com/mMLbP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mMLbP.jpg" alt="enter image description here"></a></p>
  
  <p><strong>What I am trying-</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var config = {
    type: 'bar',
    data: {
      labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
      datasets: [{
  
  
        type: 'line',
        label: 'Accumulative Flow',
        data: [0, -50, 20, 30, 40, 50],
        borderColor: 'red',
        fill: false,
        lineTension: 0,
        borderJoinStyle: 'miter',
        xAxes: [{
          barPercentage: 0.4
        }]
      }, {
        type: 'bar',
        label: 'Benifit(One time)',
        backgroundColor: "#005998",
        data: [40, 50, 60, 80, 50, 60],
      }, ]
    },
    options: {
      title: {
        display: true,
        text: 'Custom Chart Title'
      },
      scales: {
        xAxes: [{
          time: {
            displayFormats: {
              quarter: ' YYYY'
            }
          },
  
          beginAtZero: true,
          barPercentage: 0.3,
          id: 'x-axis-label',
          position: 'bottom',
          scaleStartValue: 20,
          gridLines: {
            display: false
          },
        }],
        yAxes: [{
  
          id: 'y-axis-label',
          ticks: {
            max: 300,
            min: -50,
            stepSize: 50,
          },
          position: 'left',
          gridLines: {
            display: false
          },
        }]
      },
      legend: {
        position: 'right'
      },
      maintainAspectRatio: false,
      scaleBeginAtZero: true
  
  
    }
  };
  
  var ctx = document.getElementById("myChart").getContext("2d");
  new Chart(ctx, config);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.GraphContain {
    max-height: 500px;
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="GraphContain"&gt;
    &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>Is there any parameter to do this ?</p>
  </blockquote>
  
  <p>Thanks In advance!</p>