Highcharts - xAxis - Monthly Names

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 695px"></div>

CSS

<style> .tweak {
      margin: 0px 0px 5px 32px
  }
  .tweak-0 {
      margin: 0px 0px 5px -22px
  }
  .tweak-1 {
      margin: 0px 0px 11px -42px
  }
  .tweak-2 {
      margin-bottom: 5px;
  }
  .tweak-3 {
      margin-bottom:0px;
  }
  .tweak-4 {
      margin-right:30px
  }
  </style>

JavaScript

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',
                tickInterval: 30 * 24 * 3600 * 1000,
                min: Date.UTC(2011, 4, 31),
                max: Date.UTC(2012, 11, 6),
                labels: {
                    rotation: 45,
                    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: 0.85,
                opposite: true
            }, { // Secondary yAxis
                gridLineWidth: 0,
                title: {
                    text: ''
                },
                min: 9000,
                max: 12000,
               ...