Chart.js with wrong Y axis

Question

how is it going? I have a problem with chart.js and the Y axis doesn't respond well. I have 2 bars, 1 with value 3 and another one with value 1. When I have this data, the Y axis is very weird:

But when I have another bar with value more than 5, the graph works perfectly.

Maybe I could solve it by specifying the minimum as, for example, 8 on Y axis if I have no bars above 5. But I didn't find any trick for it.

I appreciate your help! :D

EDIT:

This is the code:

<div  ng-show="showChartData" >
    <canvas class="chart chart-bar"  id="bar"  height="70px;"  chart-data="chartData"  chart-labels="labels"  chart-series="series" chart-options="chartOptions" ></canvas>
</div>

And the controller to load the data:

angular.module("pf.directives.directive-absences.chart", ["chart.js", "pf.filter.string-to-date"])
.directive("absencesChart", function() {
    var filename = "directive-absences-chart.js";

    return {
        restrict:   "AE",
        templateUrl: "app/templates/directive-absences-chart.html",
        scope: {
            "dateRangeInfo"                      : "=",
            "absencesList"    : "="
        },
        link: function(scope){
            scope.$watch(function(scope) { return scope.absencesList; }, function() {
                scope.changeChartData();
            });
            scope.$watch(function(scope) { return scope.dateRangeInfo.month; }, function() {
                scope.changeChartData();
            });
            scope.$watch(function(scope) { return scope.dateRangeInfo.year; }, function() {
                scope.changeChartData();
            });
        },
        controller:["$scope",
                    "$log",
                    "$filter", 
                    "$translate",
                    "RequestsService",
                    "CallsUtil",

                    function($scope,
                            $log,
                            $filter,
                            $translate,
                             RequestsService,
                             CallsUtil){
           $log.info(filename);

           $scope.chartOptions = {
           };

           $scope.changeChartData = function() {
               $scope.labels = [];
               $scope.series = [];
               $scope.chartData = [];
               $scope.showChartData = false;
               var d = new Date($scope.dateRangeInfo.year, +$scope.dateRangeInfo.month, 0);
               for(var i = 1; i <= d.getDate(); i++) {
                   $scope.labels.push(i);
                   $scope.chartData[i - 1] = 0;
               }
               for(var absenceKey in $scope.absencesList) {
                   var absence = $scope.absencesList[absenceKey];
                   var offFrom = $filter("stringToDate")(absence.off_from, false);
                   var returnDate = $filter("stringToDate")(absence.return_date, false);
                   var lastTimeOffFrom = new Date(offFrom);
                   lastTimeOffFrom.setHours(23,59,59,999);
                   var hours = 0;
                   while(lastTimeOffFrom < returnDate) {
                       hours = Math.abs(lastTimeOffFrom - offFrom + 1) / 36e5;
                       $scope.chartData[lastTimeOffFrom.getDate() - 1] = $scope.chartData[lastTimeOffFrom.getDate() - 1] + hours;
                       if($scope.chartData[lastTimeOffFrom.getDate() - 1] > 0) {
                           $scope.showChartData = true;
                       }
                       lastTimeOffFrom.setDate(lastTimeOffFrom.getDate() + 1);
                       offFrom = new Date(lastTimeOffFrom);
                       offFrom.setHours(0,0,0,0);
                   }
                   hours = Math.abs(returnDate - offFrom) / 36e5;
                   $scope.chartData[lastTimeOffFrom.getDate() - 1] = $scope.chartData[lastTimeOffFrom.getDate() - 1] + hours;
                   if($scope.chartData[lastTimeOffFrom.getDate() - 1] > 0) {
                       $scope.showChartData = true;
                   }
               }
               $scope.series.push($translate.instant("DASHBOARD.ABSENCES"));
           };
           $scope.changeChartData();
        }]
    };
});

I followed this documentation: http://jtblin.github.io/angular-chart.js/#bar-chart

show us the configuration that you are giving to the chartjs. — Moher
actually right now i am using chartjs and i am really content! so show us the code pls — Moher

ɢʀᴜɴᴛ ɢʀᴜɴᴛ · Accepted Answer · 2017-09-07T04:07:22

This is because, ChartJS automatically calculates y-axis ticks, which sometimes make the y-axis look incorrect, specially when the maximum tick's value is less than or equal to 5.

One easiest way to solve this, is to set the stepSize property to 1 for y-axis ticks, as such :

scales: {
   yAxes: [{
      ticks: {
         stepSize: 1
      }
   }]
}

Chart.js with wrong Y axis

1 Answers