Angular Chart.js Bar Chart

Question

I am using a bar chart of chart.js in angular 7.This chart shows the relationship between policies and their number of sales. If the maximum number of sales is 2 or 1 or a small number, the chart shows the values along the y-axis in points, starts from 1 and ends on the maximum value.Right now i have maximum 6 policies, hence the values do not have points in them, but when the number of maximum policies reduce to 2, the values are as 1.0, 1.1, 1.2, 1.3....2.0. I want the values to be non-decimal in the y-axis and also they should start from zero up to the maximum number as 0,1,2,3...,. Is it possible?

//component

   chartData1 = [
      {
        label: 'Policies',
        data: this.policies 
      },

    ];

chartOptions = {
  responsive: true    // THIS WILL MAKE THE CHART RESPONSIVE (VISIBLE IN ANY DEVICE).
}

//template

<canvas
        baseChart
        [chartType]="'bar'"
        [datasets]="chartData"
        [labels]="labels"
        [options]="chartOptions"
        [legend]="true"
        height="80"
        width="100"
        [colors]="colors"
        (chartClick)="onChartClick($event)">
    </canvas>

uminder · Accepted Answer · 2019-12-09 08:30:55Z

1

Within your component, try to define chartOptions as follows:

chartOptions = {
  responsive: true,
  scales: {
     yAxes: [{
        ticks: {
            beginAtZero: true,
            stepSize: 1
        }
    }]
  }
}

answered Dec 9, 2019 at 8:30

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hur Abbas Over a year ago

Its quite okay. but if the number of policies increases, the chart gets destroyed, can't we get it automatic, but with the interval other than numbers with points.

Hur Abbas Over a year ago

By the way it has worked for me by setting the interval to 10 :* thanks alot @uminder

Collectives™ on Stack Overflow

Angular Chart.js Bar Chart

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related