Menu
I have a highcharts graph with 2 lines. The x-axis is type datetime.
I want a labeled tick in the x-axis for every month in the overall date range: Jul '11, Aug '11, Sep '11, etc.
The only way all of the monthly ticks will display is if I set my parent container to be extremely wide. However, my production layout only has a container of 695px.
How do I force all of the ticks to display when I'm at the smaller width?
I have a fiddle here
Here is my code:
var chart;
var lineIndex = 0,splineIndex=0;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
exporting: { enabled: false },
title: {
text: ''
},
legend:{
itemStyle: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
xAxis: {
type: 'datetime',
min: Date.UTC(2011, 4, 31),
max: Date.UTC(2012, 11, 6),
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,2,'.',",");
}
},
title: {
text: '',
style: {
color: '#89A54E'
},
},
max:.85,
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: ''
},
min:9000,
max:12000,
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
},
formatter: function() {
return '$' + Highcharts.numberFormat(this.value,0,".",",");
}
}
}],
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
if(this.y == 10000) {
return '<div class="tweak">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.y > 5) {
return '<div class="tweak-0">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 11, 1)) { // grab values for special dates and assign tweak classes so we can adjust the label spacing
return '<div class="tweak-1">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2012, 1, 1)) {
return '<div class="tweak-2">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
} else if (this.x == Date.UTC(2011, 7, 1) || this.x == Date.UTC(2012, 7, 1) ) {
return '<div class="tweak-3">$' + Highcharts.numberFormat(this.y,2,".",",") + '</div>';
} else if ( this.x == Date.UTC(2012, 0, 17) ) {
return '<div class="tweak-4">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
}
}}
}
},
credits: {
enabled: false
},
series: [{
name: 'Growth of $10,000 Investment',
type: 'line',
color: '#002d56',
yAxis: 1,
data: [
[Date.UTC(2011, 5, 1), 10000],
[Date.UTC(2011, 8, 1), 9996],
[Date.UTC(2011, 11, 1), 10652],
[Date.UTC(2012, 2, 1), 11387],
[Date.UTC(2012, 5, 1), 11586],
[Date.UTC(2012, 8, 1), 11984],
[Date.UTC(2012, 11, 1), 12179]
]
}, {
name: 'Historical Distributions Per Share',
color: '#762123',
type: 'line',
enableMouseTracking: false,
data: [
[Date.UTC(2011, 5, 1), 0.70],
[Date.UTC(2011, 6, 1), 0.70],
[Date.UTC(2011, 7, 1), 0.70],
[Date.UTC(2011, 8, 1), 0.70],
[Date.UTC(2011, 9, 1), 0.70],
[Date.UTC(2011, 9, 25), 0.70],
[Date.UTC(2011, 10, 1), 0.717],
[Date.UTC(2011, 11, 1), 0.717],
[Date.UTC(2012, 0, 10), 0.717],
[Date.UTC(2012, 0, 17), 0.728],
[Date.UTC(2012, 0, 24), 0.728],
[Date.UTC(2012, 0, 31), 0.745],
[Date.UTC(2012, 1, 1), 0.745],
[Date.UTC(2012, 1, 28), 0.745],
[Date.UTC(2012, 2, 6), 0.76],
[Date.UTC(2012, 2, 13), 0.76],
[Date.UTC(2012, 2, 20), 0.76],
[Date.UTC(2012, 2, 27), 0.76],
[Date.UTC(2012, 3, 3), 0.76],
[Date.UTC(2012, 3, 10), 0.76],
[Date.UTC(2012, 3, 17), 0.76],
[Date.UTC(2012, 3, 24), 0.76],
[Date.UTC(2012, 4, 1), 0.76],
[Date.UTC(2012, 4, 8), 0.76],
[Date.UTC(2012, 4, 15), 0.76],
[Date.UTC(2012, 4, 22), 0.76],
[Date.UTC(2012, 4, 29), 0.76],
[Date.UTC(2012, 5, 5), 0.76],
[Date.UTC(2012, 5, 12), 0.76],
[Date.UTC(2012, 5, 19), 0.76],
[Date.UTC(2012, 5, 26), 0.76],
[Date.UTC(2012, 6, 3), 0.76],
[Date.UTC(2012, 6, 10), 0.76],
[Date.UTC(2012, 6, 17), 0.76],
[Date.UTC(2012, 6, 24), 0.76],
[Date.UTC(2012, 6, 31), 0.76],
[Date.UTC(2012, 7, 1), 0.76],
[Date.UTC(2012, 7, 7), 0.76],
[Date.UTC(2012, 7, 14), 0.76],
[Date.UTC(2012, 7, 21), 0.76],
[Date.UTC(2012, 7, 28), 0.76],
[Date.UTC(2012, 8, 4), 0.76],
[Date.UTC(2012, 8, 11), 0.76],
[Date.UTC(2012, 8, 18), 0.76],
[Date.UTC(2012, 8, 25), 0.76],
[Date.UTC(2012, 11, 1), 0.76]
],
marker: {
enabled: false
}
}]
});
});
356
You can add the tickInterval to the xAxis properties:
...
tickInterval: 30 * 24 * 3600 * 1000,
...
There will appear some overlap so also might want to rotate the labels a bit:
See this jsfiddle.
65
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
