I am attempting to get the full label displayed in the x axis, but highcharts keeps on cutting it off. I tried using the crop, overflow, and margin options discussed in other posts to no avail. The only option that worked was to make the div height of the chart an absurd size.
$('#da-expulsions').highcharts({
chart: {
type: 'column',
renderTo: 'da-expulsions',
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
startRow: 0,
googleSpreadsheetWorksheet: 19,
},
title: {
text: 'Expulsion rates at campuses with highest expulsion rates over time'
},
yAxis: {
min: 0,
max: 30,
breaks: [{
from: 12,
to: 24,
breakSize: 1
}],
tickInterval: 3,
title: {
text: 'Expulsions Rate (%)'
},
labels: {
formatter: function() {
return this.value + '%';
}
}
},
tooltip: {
valueSuffix: '%'
},
xAxis: {
type: 'category',
title: {
text: 'School'
},
},
});<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
</script>
</head>
<body>
<div id="da-expulsions"></div>
</body>
The "make the div height of the chart an absurd size" is why the truncated view was added. If you hover over the xAxis labels the full text is shown. If you want to increase the available size for the xAxis labels you can. Another recommendation would be to use a 'bar' format where the xAxis is vertical and then adjust font sizing of the xAxis label although this is not 100% accurate. What is wrong with the ellipsis?