CODEWITHSUNDEEP
chart.jsangular7
Hur Abbas
Hur Abbas

Reputation: 125

Angular Chart.js Bar Chart

**enter image description here**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>

Upvotes: 0

Views: 283

Answers (1)

uminder
uminder

Reputation: 26150

Within your component, try to define chartOptions as follows:

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

Upvotes: 1

Related Questions