highcharts-labels

Benchmark created on


Preparation HTML

<div id="container" style="height: 400px"></div>
<script>
  < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" > < /script><script src="http:/ / highcharts.com / js / testing.js "></script>
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
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

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.