Highcharts/highstock set yAxis Min and Max with Scroll - highcharts

Question

I have a stacked column highstock chart with positive and negative stacks and a horizontal scrollbar. I am trying to have the yAxis with min and max values according to the max data and min data so I've setup those values (after calculating them) in highstock's json.
However, the length of the names of the users on the xAxis are overriding these max values, is there a way around that?
Here's my js fiddle: http://jsfiddle.net/fj6d2/3931/
As the code is too large to be posted here, here's the configuration without all the data:
Highcharts.chart('container', {
"chart":{
"type":"column"
},
"title":{
"text":""
},
"xAxis":{
"min":0,
"max":31,
"categories":[
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxxx",
],
"labels":{
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
},
"scrollbar":{
"enabled":true,
"barBackgroundColor":"gray",
"barBorderRadius":7,
"barBorderWidth":0,
"buttonBackgroundColor":"gray",
"buttonBorderWidth":0,
"buttonArrowColor":"yellow",
"buttonBorderRadius":7,
"rifleColor":"yellow",
"trackBackgroundColor":"white",
"trackBorderWidth":1,
"trackBorderColor":"silver",
"trackBorderRadius":7
},
"yAxis":{
"title":{
"text":"Time (hh:mm)"
},
"tickInterval":600,
"labels":{
},
"gridLineWidth":0,
"plotLines":[
{
"value":0,
"width":1,
"color":"#000",
"zIndex":4
}
],
"tickmarkPlacement":"on",
"max":45336,
"min":-21443
},
"plotOptions":{
"column":{
"stacking":"normal",
"events":{
}
}
},
"credits":{
"enabled":false
},
"tooltip":{
"shared":true,
"crosshairs":true
},
"legend":{
"align":"right",
"verticalAlign":"top",
"itemStyle":{
"display":"none"
},
"title":{
"text":"Click a colour"
}
},
"series":[
{
"name":"On Task Teacher Recommended",
"data":[
487,
13512,
10064,
2664,
],
"color":"#86E067",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"On Task Student Discovered",
"data":[
1276,
5495,
1307,
3369,
],
"color":"#5CB5E5",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Uncategorised",
"data":[
944,
12202,
2920,
4643,
],
"color":"#F98157",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Off Task",
"data":[
-126,
-686,
-1998,
-927,
],
"color":"#E3454D",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
}
]
});

Answer 1

you can truncate long name (xAxis) of highcharts using function
function truncString(str, max, add){
add = add || '...';
return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};
And call this function in formatter
"labels":{
"formatter": function() {
return truncString(this.value,8,'...')
},
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
Fiddle demo