Wie erhöhen Sie die Höhe des Bereichs der X-Achsenbeschriftungen in einem Highchart.js Diagramm?

Question

Ich habe ein einfaches Liniendiagramm von highcharts.js erstellt. Ich habe viele Teilstriche in der X-Achse (30), also setze ich den Maßstab auf zwei, die sich horizontal überlappen. Die untere Zeile der X-Achsen-Tickbeschriftungen wird jedoch am Ende des Diagramms abgeschnitten.

Egal, wie groß ich das Diagramm mache, die untere Reihe der X-Achsen-Tickmarkierung wird abgeschnitten. Wie kann ich die Höhe dieses Bereichs erhöhen, um dies zu beheben? Oder gibt es eine andere Methode?

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

Einfach die marginBottom Option anheben. Der Standardwert ist 70, der für zwei Zeilen mit Hilfsstrichbeschriftungen ausreichen sollte. Sie haben ihn auf 25 gesetzt, was nicht der Fall ist.