ng-2 Charts: can't get bar chart axis to start at 0

Question

I am trying to use ng-2 Charts so that I can have a simple responsive barchart in my angular application.

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.

Currently, my chart looks like this with the above data set

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

  scales : {
    yAxes: [{
       ticks: {
          beginAtZero: true,
          max : 5,
        }
    }]
  }

Here are posts I tried first :

• Unable to make y-axis to begin at zero on Charts.js v2.1.4

• set my chart min yaxis to 0

But this did nothing.

Here is my full Bar Chart component

  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() {
  }

Here are the versions I'm using

"chart.js": "^2.7.2",
"ng2-charts": "^1.6.0",

And here is the javascript I'm inserting at idex.html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

I also found this post how to set start value as "0" in chartjs?

Edit 1 :

So I edited my BarChartOptions

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    options : {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero : true
          }
        }]
      }
    }
  };

But this did nothing.

I figured I'd try more options while I was at it

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    options : {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero : true,
            min: 0,
            max: 5
          }
        }]
      }
    }
  };

But this also did nothing. What am I doing wrong?

Edit : Full componenet mockup since people have asked

bar-chart.component.html

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            [colors]="chartColors"
            ></canvas>
  </div>
</div>

bar-chart.component.ts

import { Component, OnInit, Input } from '@angular/core';

@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() {
  }

}

Here is where I call the bar-chart component from 'results.component.html'

<app-bar-chart [barChartType]="programQualityBarChartType" [barChartData]="programQualityBarChartData" [barChartLabels]="programQualityLabels" [chartColors]="programQualityColors"></app-bar-chart>

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'

  populateCharts() {
    /*Program quality*/
    this.programQualityColors = [
      {
        backgroundColor: ['red', 'yellow', 'blue']
      }
    ];

    this.programQualityBarChartType = 'horizontalBar';
    this.programQualityLabels = ['Assessment & Diagnostics', 'Development', 'Performance Management'];
    this.programQualityBarChartData = [
      {data: [this.programQuality.assessment, this.programQuality.development, this.programQuality.performance], label: 'Program Quality'},
    ];
  }

Answer 1

public chartOption = {
    responsive: true,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

Answer 2

optionsVariable should be options

Answer 3

Your option object has wrong structure you don't need extract option property.

set the y axes to begin at zero

  public chartOption = {
    responsive: true,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

set x axes to begin at zero

  public horizontalChartOption = {
    responsive: true,
    scales: {
      xAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

template

<h1> Type : bar</h1> 
    <canvas baseChart width="400" height="400"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                chartType="bar"
                [options]="chartOption"
                ></canvas>

</div>
<div>
<h1> Type : Horizontal Bar</h1> 

    <canvas baseChart width="400" height="400"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                chartType="horizontalBar"
                [options]="horizontalChartOption"
                ></canvas>

</div>

stackblitz demo