title: ng-2 Charts: can't get bar chart axis to start at 0
body: <p>I am trying to use <a href="https://valor-software.com/ng2-charts/" rel="noreferrer">ng-2 Charts</a> so that I can have a simple responsive barchart in my angular application.</p>
  
  <p>The numbers in my data set are pretty small. The smallest is 0 and the largest is 5. Most of the time the numbers come within 1 point of each other. For example [4, 4.1, 4] is pretty common. For this reason, I need the Y Axes to start at 0 and end at 5. </p>
  
  <p>Currently, my chart looks like this with the above data set</p>
  
  <p><a href="https://i.stack.imgur.com/StaWk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/StaWk.png" alt="NG Charts"></a></p>
  
  <p>Because it's automatically setting the bast of the chart at 4, my other two bars don't show at all. This isn't what I want. Upon googling the issue, I came across a few posts that recommend putting the following in your optionsVariable</p>
  
  <pre><code>  scales : {
      yAxes: [{
         ticks: {
            beginAtZero: true,
            max : 5,
          }
      }]
    }
  </code></pre>
  
  <p>Here are posts I tried first : </p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/37573689/unable-to-make-y-axis-to-begin-at-zero-on-charts-js-v2-1-4?rq=1">Unable to make y-axis to begin at zero on Charts.js v2.1.4</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/43525378/set-my-chart-min-yaxis-to-0">set my chart min yaxis to 0</a></p></li>
  </ul>
  
  <p>But this did nothing. </p>
  
  <p>Here is my full Bar Chart component</p>
  
  <pre><code>  public barChartOptions: any = {
      scaleShowVerticalLines: true,
      responsive: true,
      optionsVariable : {
        scales : {
          yAxes: [{
             ticks: {
                beginAtZero: true,
                max : 5,
              }
          }]
        }
      }
    };
  
    public barChartLegend: boolean = false;
  
  
    @Input() barChartLabels: string[];
    @Input() chartColors: string[];
    @Input() barChartData: any[];
    @Input() barChartType: string;
  
  
  
    constructor() { }
  
    ngOnInit() {
    }
  </code></pre>
  
  <p>Here are the versions I'm using</p>
  
  <blockquote>
  <pre><code>"chart.js": "^2.7.2",
  "ng2-charts": "^1.6.0",
  </code></pre>
  </blockquote>
  
  <p>And here is the javascript I'm inserting at idex.html</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I also found this post 
  <a href="https://stackoverflow.com/questions/37922518/how-to-set-start-value-as-0-in-chartjs">how to set start value as &quot;0&quot; in chartjs?</a></p>
  
  <p>Edit 1 : </p>
  
  <p>So I edited my BarChartOptions</p>
  
  <pre><code>  public barChartOptions: any = {
      scaleShowVerticalLines: false,
      responsive: true,
      options : {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero : true
            }
          }]
        }
      }
    };
  </code></pre>
  
  <p>But this did nothing. </p>
  
  <p>I figured I'd try more options while I was at it </p>
  
  <pre><code>  public barChartOptions: any = {
      scaleShowVerticalLines: false,
      responsive: true,
      options : {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero : true,
              min: 0,
              max: 5
            }
          }]
        }
      }
    };
  </code></pre>
  
  <p>But this also did nothing. What am I doing wrong? </p>
  
  <p>Edit : Full componenet mockup since people  have asked</p>
  
  <p>bar-chart.component.html</p>
  
  <pre><code>&lt;div&gt;
    &lt;div style="display: block"&gt;
      &lt;canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType"
              [colors]="chartColors"
              &gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>bar-chart.component.ts</p>
  
  <p>import { Component, OnInit, Input } from '@angular/core';</p>
  
  <pre><code>@Component({
    selector: 'app-bar-chart',
    templateUrl: './bar-chart.component.html',
    styleUrls: ['./bar-chart.component.css']
  })
  export class BarChartComponent implements OnInit {
  
    public barChartOptions: any = {
      scaleShowVerticalLines: false,
      responsive: false,
      options : {
        scales : {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    };
  
    public barChartLegend: boolean = false;
  
  
    @Input() barChartLabels: string[];
    @Input() chartColors: string[];
    @Input() barChartData: any[];
    @Input() barChartType: string;
  
  
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>Here is where I call the bar-chart component from 'results.component.html'</p>
  
  <pre><code>&lt;app-bar-chart [barChartType]="programQualityBarChartType" [barChartData]="programQualityBarChartData" [barChartLabels]="programQualityLabels" [chartColors]="programQualityColors"&gt;&lt;/app-bar-chart&gt;
  </code></pre>
  
  <p>And since I'm setting a lot of these values in the parent component, here is the typescript related to the chart from 'results.component.ts'</p>
  
  <pre><code>  populateCharts() {
      /*Program quality*/
      this.programQualityColors = [
        {
          backgroundColor: ['red', 'yellow', 'blue']
        }
      ];
  
      this.programQualityBarChartType = 'horizontalBar';
      this.programQualityLabels = ['Assessment &amp; Diagnostics', 'Development', 'Performance Management'];
      this.programQualityBarChartData = [
        {data: [this.programQuality.assessment, this.programQuality.development, this.programQuality.performance], label: 'Program Quality'},
      ];
    }
  </code></pre>