ng-2 Charts: get bar chart axis to start at 0 :: Angular 2+

0
861

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here