Values On Y-axis Disappear (hide Under Labels)

I use ChartJS library to create line chart. Somehow, the value on the Y values are almost hidden. I am wondering if I have set of data, how can I dynamically make y value so that

Solution 1:

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 labelsChart.pluginService.register({
  beforeUpdate: function(chart) {
    // get custom defined offsetvar offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0if(!offset || offset < 0) return;

    // preset the min and maxvar 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 offsetvar offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0if(!offset || offset < 0) return;

    // preset the min and maxvar 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 offsetvaroffset= chart.options.customOffset;
      // exisit gracefully if offset not defined or less than 0if(!offset || offset < 0) return;
      varyAxes= chart.options.scales.yAxes;
      for(var i=0; i<yAxes.length; i++){
        varaxis= yAxes[i];
        vardatasets= chart.data.datasets;
        varmax= Number.MIN_VALUE;
        varmin= Number.MAX_VALUE;
        vardatasetsOnAxis= [];

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

        for(var k=0; k<datasetsOnAxis.length; k++){
          vardataset= datasetsOnAxis[k]
          varnewMax= Math.max.apply(null, dataset.data);
          varnewMin= 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;   
      }
    }
});