LineChart axis manual max min

by bairog

HTML

<div id="chartDiv"><canvas id="chart"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JavaScript

var data = {
  //labels:["0","1","2"],	
  datasets: [{
    lineTension: 0,  
    fill: false,  
    //data: [1, 10, 4],
		data: [{x:"2021-03-30T00:00:00", y:6},{x:"2021-04-01T00:00:00", y:3},{x:"2021-04-05T00:00:00", y:4}]
  }]
};

var options = {
    animation: false,    
    scales: {
				xAxis: {
        // The axis for this scale is determined from the first letter of the id as `'x'`
        // It is recommended to specify `position` and / or `axis` explicitly.
        type: 'time',
      	},
        yAxis: {
				    afterDataLimits: function (axis) {
                 //Setting axis min\max via `afterDataLimits` callback is working incorrectly (yAxis is from -2 to 12)
								 axis.max = 10.5;
                 axis.min = -0.5;
            },
						//position: 'bottom',
						axis: 'y',
            //Setting axis min\max via options is working correctly (yAxis is from -0.5 to 10.5)
            //min: -0.5,
            //max: 10.5            
        }
    },
    plugins: {
                // Change options for ALL labels of THIS CHART
                datalabels: {
                    color: 'black',
                    align: 'start',
                    anchor: 'end',
                    font: {
                        weight: 'bold'
                    },
                    formatter: function (value, context) {
                        if (value == 0)
                            return "";
                        else
                            return value;
                    }
                }
            }
};


var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
	plugins: [ChartDataLabels],
  options: options
});