set my chart min yaxis to 0

问题

I am using ng2charts which are build on chartjs (I think). I want to set my y-axis to start at a particular value. How can I do this? Dynamically from typescript would be great, hardcoded in HTML acceptable.

My chart component html

<div>
  <div style="display: block">

    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabel"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>

    <div align="center">{{barChartTitle}}</div>
  </div>
</div>

My Components typescript

import { Component, Input, OnInit, NgZone, OnChanges, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
@Component({
  selector: 'app-bar-chart-demo',
  templateUrl: './bar-chart-demo.component.html',
  styleUrls: ['./bar-chart-demo.component.css'],
  inputs:['chartLabel', 'chartData', 'chartType', 'chartTitle', 'chartLarge']
})
export class BarChartDemoComponent{
  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  public barChartOptions:any = {
    scaleShowVerticalLines:false,
    responsive:true
  };

  //Labels
  public barChartLabel:string[];
  @Input() chartLabel:string[];

  //Type
  public barChartType:string;
  @Input() chartType:string;

  //Legend
  public barChartLegend:boolean = true;
  @Input() chartLegend:boolean;

  //Data
  public barChartData:any[];
   @Input() chartData:any[];

  //Title
  public barChartTitle:string;
  @Input() chartTitle:string;

  //Legend
  public barChartLarge:boolean = true;
  @Input() chartLarge:boolean;

  ngOnChanges(){

  }

  ngOnInit(){
    //Init the sub componenets
     this.barChartLabel=this.chartLabel;
     this.barChartData=this.chartData;
     this.barChartType=this.chartType;
     this.barChartTitle=this.chartTitle;
  }

  // events
  public chartClicked(e:any):void {
    //console.log(e);
  }

  }

回答1:

got it. Its in the chartOptions....

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

来源：https://stackoverflow.com/questions/43525378/set-my-chart-min-yaxis-to-0

标签

html

angular

chart.js

ng2-charts