ng2-charts: How to set fixed range for y axis

假装没事ソ 提交于 2020-06-14 10:25:51

问题


I have a chart.js chart using ng2-charts module. The chart shows Percentage on y axis and time on x axis. Is it possible to set y axis to show 0 to 100 instead of dynamic range based on data?


回答1:


Try adding the following to your chart options:

scales : {
  yAxes: [{
     ticks: {
        steps : 10,
        stepValue : 10,
        max : 100,
        min: 0
      }
  }]
}

https://github.com/valor-software/ng2-charts/issues/853




回答2:


In my name.component.html:

<div style="display: block">
<canvas baseChart height="100" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions"
    [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"></canvas>

In my name.component.ts:

 public lineChartOptions: any = {
    scales : {
        yAxes: [{
            ticks: {
            beginAtZero: true,
                stepValue: 10,
                steps: 20,
              max : 50,
            }
        }]
      }
};



回答3:


Yes you can do the same by using tickOption in the y Axes

public barChartOptions: ChartOptions = {
responsive: true,
showLines: false,
tooltips: {enabled: false},
animation: {duration: 2000},
scales: {
    yAxes: [{
        gridLines: {
            display:false
        },
        display: false,
        ticks: {
          max : 100,
          min: 0
        }
    }]
  }
};

Also, steps and stepValue is not working and I checked the same in their library its not written there also.

barChartData: ChartDataSets[] = [
          {
            data: [40, 30, 30],
            "backgroundColor": this.bgColors
          }
 ];

In the above, I need only y bar graphs so I set the data like that and for the three values, I used the same size of barChartLabels.

barChartLabels: Label[] = ['A', 'B', 'C'];

This works for me, I hope it will work in your code too :)



来源:https://stackoverflow.com/questions/51951109/ng2-charts-how-to-set-fixed-range-for-y-axis

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!