[Chartjs]-Values on Y-axis disappear (hide under labels)

Thank you for the codepen, always helps to have these in a question!

You can set the min/max of the yAxis by adding the following scale options:

options: {
      responsive: true,
      scales:{
        yAxes:[{
          ticks:{
            suggestedMin:69,
            suggestedMax:73
          }
        }]
      }
    }

here is a forked CodePen

relevant docs here

You can always calculate the min and max as (min – 1) and (max +1) respectively to always get have an offset of 1.

UPDATE: =================================

In you’re CodePen, you are using Chartjs 2.1.3, which is now an old version. Here is how you can build a simple plugin to add an offset to the linear char min/max:

first the plugin:

// Define a plugin to provide data labels
Chart.pluginService.register({
  beforeUpdate: function(chart) {
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all datasets
    chart.data.datasets.forEach(function(dataset){
      var newMax = Math.max.apply(null, dataset.data);
      var newMin = Math.min.apply(null, dataset.data); 
      max = newMax > max ? newMax : max;
      min = newMin > min ? min : newMin;
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

now you can add a customOffset property to options:

 options: {
      customOffset: 0.1,
      responsive: true,
    }

Take a look at this CodePen

sample preview with 0.5 offset with your data:

UPDATE 2 =========================

Small changes to plugin so that when one dataset is hidden, the others are centered and the chart behave appropriately:

Chart.pluginService.register({
  beforeUpdate: function(chart){
    console.log("beforeUpdate");
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all dataset
    chart.data.datasets.forEach(function(dataset){
      if(!dataset._meta[0].hidden){
        console.log(dataset)
        var newMax = Math.max.apply(null, dataset.data);
        var newMin = Math.min.apply(null, dataset.data); 
        max = newMax > max ? newMax : max;
        min = newMin > min ? min : newMin;
      }
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

CodePen

UPDATE 3 =========================

here is a plugin to add offset to ALL Y Axes in the chart:

Chart.pluginService.register({
    beforeUpdate: function(chart){
      console.log("beforeUpdate");
      // get custom defined offset
      var offset = chart.options.customOffset;
      // exisit gracefully if offset not defined or less than 0
      if(!offset || offset < 0) return;
      var yAxes = chart.options.scales.yAxes;
      for(var i=0; i<yAxes.length; i++){
        var axis = yAxes[i];
        var datasets = chart.data.datasets;
        var max = Number.MIN_VALUE;
        var min = Number.MAX_VALUE;
        var datasetsOnAxis = [];

        for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
          var dataset = datasets[j];
          var meta = chart.getDatasetMeta(j);
          if  (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset); 
        }

        for(var k=0; k<datasetsOnAxis.length; k++){
          var dataset = datasetsOnAxis[k]
          var newMax = Math.max.apply(null, dataset.data);
          var newMin = Math.min.apply(null, dataset.data);
          max = newMax > max ? newMax : max;
          min = newMin > min ? min : newMin;
        }
        axis.ticks.max = max + offset;
        axis.ticks.min = min - offset;   
      }
    }
});