Highcharts y-axis unable to start from the given value - highcharts

Question

I am using high charts to generate graphs. As per my requirement I want to generate the graph with dynamic minimum and maximum values. Even though I assigned minimum and maximum value, my graph is starting from less than my minimum value. I want my graph to be start with the user defined minimum value such that no white space should be there between axis and graph
Following is the fiddle
http://jsfiddle.net/0e4rqb88/
$(document).ready(function() {
var data1 = [{
"maximumLean": 4.6,
"usl": 5.5,
"framesFlag": 0,
"emptyConesFlag": 0,
"ninetyFivePFlag": 0,
"sigma3": 4.8,
"sigma4": 4.4,
"sigma1": 4.6,
"arrow": 0,
"inSpec": 100.0,
"sigma2": 4.7,
"recentLean2": 4.600084552015582,
"recentLean1": 4.368252611538148,
"recentLean4": 4.369438416014055,
"recentLean3": 4.495304457897132,
"check2Sigma": 1,
"ninetyFivePValue": 0.1,
"meanFlag": 0,
"sigma6": 4.2,
"sigma5": 4.3,
"conesFlag": 0,
"targetSpec": 4.5,
"check3Sigma": 1,
"cpm": 1.1,
"emptyCone": 8.9,
"ninetyPFlag": 0,
"lsl": 3.5,
"sampleSize": 30,
"minimumLean": 4.4,
"check1Sigma": -1,
"ninetyPValue": 0.1,
"sd": 0.1,
"fpm": 1.0,
"fc": 123,
"lean": 4.4,
"median": 4.4,
"medianFlag": 0,
"inspecFlag": 0,
"cl": 4.5,
"sdFlag": 0,
"cc": 135
}, {
"lean": 4.5
}, {
"lean": 4.6
}, {
"lean": 4.4
}, {
"start": "08-12-2014 12:00:00",
"end": "08-12-2014 14:00:00"
}]
$('#data').val(JSON.stringify(data1[0]));
var x = 1;
var inSpec = 0;
var avgLean = 0;
var mean = 0;
var median = 0;
var sd = 0;
var maximum = 0;
var minimum = 0;
var sigma1 = 0;
var sigma2 = 0;
var sigma3 = 0;
var sigma4 = 0;
var sigma5 = 0;
var sigma6 = 0;
var avgLeanPercent = 0;
var sampleSize = 0;
//
var meandataofHighChart = 0;
var sigdata = [];
var dataofHighChart = [];
var maxChartVal = 0;
var minChartVal = 0;
for (var event in data1) {
var dataCopy = data1[event];
if (x == 1) {
mean = dataCopy.cl;
sd = dataCopy.sd;
median = dataCopy.median;
maximum = dataCopy.maximumLean;
minimum = dataCopy.minimumLean;
sigma1 = dataCopy.sigma1;
sigma2 = dataCopy.sigma2;
sigma3 = dataCopy.sigma3;
sigma4 = dataCopy.sigma4;
sigma5 = dataCopy.sigma5;
sigma6 = dataCopy.sigma6;
emptyCone = dataCopy.emptyCone;
sampleSize = dataCopy.sampleSize != undefined ? dataCopy.sampleSize : 20;
//alert(" Cone "+conesPerMinute.toFixed(1)+" Frame "+dataCopy.fpm);
sigdata.push(sigma6);
sigdata.push(sigma5);
sigdata.push(sigma4);
sigdata.push(mean);
sigdata.push(sigma1);
sigdata.push(sigma2);
sigdata.push(sigma3);
//dataofHighChart.push(lean);
}
dataofHighChart.push(dataCopy.lean);
meandataofHighChart = (mean);
x++;
}
maxChartVal = maximum > sigma3 ? maximum : sigma3;
minChartVal = minimum < sigma6 ? minimum : sigma6;
console.info("sigdata " + sigdata);
console.info("maximum " + maximum);
console.info("sigma3 " + sigma3);
console.info("minimum " + minimum);
console.info("sigma6 " + sigma6);
console.info("maxChartVal " + maxChartVal);
console.info("minChartVal " + minChartVal);
minChartVal = minChartVal > 0 ? (minChartVal) - 0.1000000000000005 : 0;
maxChartVal = maxChartVal > 0 ? (maxChartVal) + 0.1000000000000005 : 0;
console.info("maxChartVal " + maxChartVal);
console.info("minChartVal " + minChartVal);
var highchart = new Highcharts.Chart({
chart: {
marginRight: 80,
zoomType: "x",
renderTo: 'chart_div', // like ,
height: 350
},
title: {
text: 'X-Bar Chart',
style: {
"font-weight": "bold",
"font-size": "16px;"
}
},
xAxis: {
floor: 1,
allowDecimals: false,
title: {
text: "Sample Number (N = " + sampleSize + ")",
style: {
"font-weight": "bold",
"font-size": "14px;"
}
}
},
tooltip: {
formatter: function() {
return 'Sample Number : ' + this.point.x + '<br/> % Lean : ' + this.point.y + ' %';
}
},
yAxis: [{
lineWidth: 1,
max: maxChartVal,
min: minChartVal,
floor: minChartVal,
title: {
text: '% Lean',
style: {
"font-weight": "bold",
"font-size": "14px;"
}
},
plotLines: [{
value: meandataofHighChart,
color: '#000000',
width: 2,
zIndex: 4
}],
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{
from: minChartVal,
to: sigdata[1],
color: '#FF7F7F'
}, {
from: sigdata[1],
to: sigdata[2],
color: '#FFFF7F'
}, {
from: sigdata[2],
to: sigdata[3],
color: '#7FBF7F'
}, {
from: sigdata[3],
to: sigdata[4],
color: '#7FBF7F'
}, {
from: sigdata[4],
to: sigdata[5],
color: '#FFFF7F'
}, {
from: sigdata[5],
to: maxChartVal,
color: '#FF7F7F'
}]
}],
series: [{
name: '% Lean',
data: dataofHighChart,
color: '#00407F'
}]
});
});

Answer 1

By default, the startOnTick option and endOnTick option is true for the yAxis. If you set those to false, highcharts will respect your min/max options.
Here's updated fiddle.
yAxis: [{
...
max:maxChartVal,
min:minChartVal,
startOnTick: false,
endOnTick: false,
...