How to increase the height of the x-axis label area in the highchart.js diagram?

Question

I have a simple line graph created by highcharts.js. I have many marks on the x axis (30), so I set the step to 2 so that the marks match each other horizontally. However, the bottom line of tick marks on the X axis is trimmed to the end of the graph.

No matter how tall the chart I am making, the bottom line of the label labels of the label on the X axis is disabled. How can I increase the height of this area to fix this? Or is there some other method?

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: [<?php print $bymonth_categories; ?>], 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: '<?php print $organization['name']; ?>', data: [<?php print $bymonth_data; ?>] }] }); 

Answer 1

Just raise the marginBottom parameter. The default value is 70, which should be sufficient for two lines of label shortcuts, you set it to 25.