prevent legend pagination down arrow button get cut off - Javascript highcharts

Javascript examples for highcharts:Chart Event

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

Description

prevent legend pagination down arrow button get cut off

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highchart_downArrowCutOff</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

$('g').attr('visibility').css('background','red')


      </style> 
      <script type="text/javascript">
    window.onload=function(){//from  www  .j a  v  a 2 s .c  om
function getChartOptions ($container){
   var chartOptions = {
      chart: {
      type: "column",
      renderTo: "container"
    },
    legend:{
      align: "right",
      floating: true,
      verticalAlign: "middle",
      layout: "vertical",
      x:-3
    },
    series:[],
      credits:{
       enabled: false
    }
  }
  var alpha = "abcdefghijklmnopqrstuvwxyz".split("");
  for (var i = 0, len = alpha.length; i < len; ++i){
     chartOptions.series.push({
       name: alpha[i],
      data: [1,2,3]
    });
  }
  return chartOptions;
}
$(document).ready(function(){
   var chart = new Highcharts.Chart(getChartOptions($("#container")));
})
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height:400px"></div>  
   </body>
</html>

Related Tutorials