Highcharts - show every month on datetime x-axis when the parent container is small

highcharts, javascript, jquery

Solution

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.

Problem

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 } }] }); }); ```

Original source