title: Highcharts - show every month on datetime x-axis when the parent container is small
body: <p>I have a highcharts graph with 2 lines. The x-axis is type datetime.</p>
  
  <p>I want a labeled tick in the x-axis for every month in the overall date range: Jul '11, Aug '11, Sep '11, etc.</p>
  
  <p>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.</p>
  
  <p>How do I force all of the ticks to display when I'm at the smaller width?</p>
  
  <p><a href="http://jsfiddle.net/P45Hy/1/" rel="noreferrer">I have a fiddle here</a></p>
  
  <p>Here is my code:</p>
  
  <pre><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 '&lt;div class="tweak"&gt;$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '&lt;/div&gt;';
                          } else if (this.y &gt; 5) {
                              return '&lt;div class="tweak-0"&gt;$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '&lt;/div&gt;';
                          } 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 '&lt;div class="tweak-1"&gt;$' + Highcharts.numberFormat(this.y,3,".",",") + '&lt;/div&gt;';
                          } else if (this.x == Date.UTC(2012, 1, 1)) { 
                              return '&lt;div class="tweak-2"&gt;$' + Highcharts.numberFormat(this.y,3,".",",") + '&lt;/div&gt;';
                          } else if (this.x == Date.UTC(2011, 7, 1) || this.x == Date.UTC(2012, 7, 1) ) { 
                              return '&lt;div class="tweak-3"&gt;$' + Highcharts.numberFormat(this.y,2,".",",") + '&lt;/div&gt;';
                          } else if ( this.x == Date.UTC(2012, 0, 17) ) {
                              return '&lt;div class="tweak-4"&gt;$' + Highcharts.numberFormat(this.y,3,".",",") + '&lt;/div&gt;';
                          }
                      }}
              }
          },
          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
              }
          }]
      });
  });
  </code></pre>