fix labels to the top when xAxis rotation is 90 degree - Javascript highcharts

Javascript examples for highcharts:Chart Axis

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Axis

Description

fix labels to the top when xAxis rotation is 90 degree

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//  w  w  w . j a va  2  s. co  m
$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Long xAxis legends',
            },
            xAxis: {
                categories: ['a long category name', 'another long category name', 'a very long category name', 'Thats enormous', 'short', 'a long category name', 'another long category name', 'a very long category name', 'Thats enormous', 'short'],
                labels:{
                   rotation:90,
                    align: 'top'
                },
            },
            series: [
                {
                name: 'Some values',
                data: [10, 20, 53, 2.51, 1.35, 10, 20, 53, 2.51, 1.35],
                },
                {
                name: 'Other values',
                data: [22.40, 0.15, 40, 10.73, 13, 22, 15, 40.11, 10, 13],
                }
            ],
            legend: {
                layout: 'vertical',
                align: 'top',
                verticalAlign: 'top',
                x: 50,
                y: 65,
                borderWidth: 0,
                margin: 30
            },
        });
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 450px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials