title: How do you increase the height of the x-axis labels area on a highchart.js chart?
body: <p>I have a simple line graph created by highcharts.js. I have a lot of tick marks in the x-axis (30), so I set stagger to 2 deal with the marks overlapping each other horizontally. However, the lower row of x-axis tick labels is being cut off by the end of the chart. </p>
  
  <p>No matter how tall I make the chart the lower row of x-axis tick mark labels is cut off. How can I increase the height of this area to fix this? Or is there some other method?</p>
  
  <pre><code>month_chart = new Highcharts.Chart({
  chart: {
      borderRadius: 0,
      height: chart_height,
      marginRight: 30,
      marginBottom: 25,
      renderTo: 'leads-by-month',
      type: 'line',
  },
  title: {
      text: 'Past 30 Days',
  },
  xAxis: {
      categories: [&lt;?php print $bymonth_categories; ?&gt;],
      labels: {
          staggerLines: 2,
      },
  },
  yAxis: {
      title: {
          text: 'Leads',
          style: {color: '#3d3e41', }
      },
      plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
      }],
      min: 0,
  },
  plotOptions: {
      line: {
          color: '#578df1',
          dataLabels: {
              enabled: true,
              color: '#3d3e41',
          },
          enableMouseTracking: false
      }
  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -100,
      y: 74,
      floating: true,
      borderWidth: 1,
      backgroundColor: '#FFFFFF',
      shadow: true
  },
  series: [{
      name: '&lt;?php print $organization['name']; ?&gt;',
      data: [&lt;?php print $bymonth_data; ?&gt;]
  }]
          });
  </code></pre>