[Chartjs]-Chart.js Clipping on Top of Line Graph

by

3👍

✅

To resolve this, you need to set a maximum value for y-axis ticks, based on your tempdata array, like so :

options: {
   scales: {
      yAxes: [{
         ticks: {
            max: Math.max.apply(null, tempdata) + 1, //max value + 1
         }
      }]
   },
   ...
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var labels = ['Jan', 'Feb', 'Mar', 'Apr'];
var tempdata = [2, 4, 1, 3];
var graphBgColor = 'rgba(0, 119, 204, 0.1)';
var graphBorderColor = 'rgba(0, 119, 204, 0.5)';

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Outdoor Temperature',
         backgroundColor: graphBgColor,
         borderColor: graphBorderColor,
         data: tempdata,
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               max: Math.max.apply(null, tempdata) + 1, //max value + 1
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Leave a comment