Menu
I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block. Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
764
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
