temp svg | $(document).ready(function() {
var temp, chart;
tempContainer = $('<div id="tempRenderer">').appendTo('body').css({
position: 'absolute',
top: 0,
left: 0,
visibility: 'hidden'
});
temp = new Highcharts.Renderer(
tempContainer[0], 500, 500);
function checkHeight(value) {
var obj = temp.text(value, 0, 0).attr({
rotation: -90
}).css({
color: '#4572A7',
fontSize: '12px'
});.add(), h = obj.getBBox().height;
obj.destroy();
return h;
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
labels: {
rotation: -90,
align: 'right',
formatter: function() {
var val = this.value,
len = val.length - 1;
while (checkHeight(val) > 50)
val = val.substring(0, len--)
if (len + 1 < this.value.length) val += '...';
return val;
}
},
categories: ['January January', 'February February', 'March', 'April', 'May', 'Juny', 'July', 'August', 'September', 'October', 'November', 'December']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
| ready |
normal | $(document).ready(function() {
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
labels: {
rotation: -90,
align: 'right',
formatter: function() {
var val = this.value,
len = val.length - 1;
if (val.length > 10) val = val.substring(0, 10) + '...';
return val;
}
},
categories: ['January January', 'February February', 'March', 'April', 'May', 'Juny', 'July', 'August', 'September', 'October', 'November', 'December']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
| ready |