Thursday

Set minimum and maximum axis values on chart

6:05 AM angular, chart.js, primeng No comments

Issue

So, i am building an Angular UI. Using the PrimeNG chart component, i have a nice little line chart going on. The issue is that the chart's y axis is starting from the minimum value of the data array. I have tried setting the ticks option but to no avail. My chartjs version is 2.9.4 since anything bigger would break primeng. Any ideas? component for reference

Here's the code

HTML

<p-chart #chart type="line" [data]="data" [options]="basicOptions"></p-chart>

Component


  @Input() id!: string;

  data: any;
  basicOptions: any;
  stats: any;

  constructor(private statService: StatService) { }

  ngOnInit(): void {
    this.stats = this.statService.getStats(this.id)
    this.data = {
      labels: this.stats.map((stat: { create_date: any; }) => stat.create_date),
      datasets: [
          {
              label: 'Views',
              data: this.stats.map((stat: { count: any; }) => stat.count),
              borderColor: '#42A5F5',
              //fill:false,
              backgroundColor: 'rgba(2, 117, 216, 0.31)',
              tension:0.4,
          }
      ],
    }
/*previous code */
    this.basicOptions = {
     scales: {
       y: {
         ticks: {
           min: '0'
          },
        }
      }
  };
  } */

/*correct code*/
this.basicOptions = {
        scales: {
          yAxes: [{
            ticks: {
              min: 0,
              max: 40
            }
          }]
        }
    };

}```

Solution

You are using v3 syntax while using v2, this wont work, you need to declare all y axes in a single array and all x axes in a singel array, for more info check out the v2 documentation.

Example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink',
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 40
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Answered By - LeeLenalee

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Thursday

Set minimum and maximum axis values on chart

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels