displaying dates on x axis with Highcharts.js

Question

I'm building a bar chart with highcharts.js. The x-axis is an array of dates, while the y-axis is an array of numbers from 0-100. I want to display the dates on the X axis but only show ticks when there is a new date. If you look at this fiddle you can see the current plot and how the dates look bad. Look at this fiddle and how it displays the dates in an elegant way. Essentially I want to only show a few ticks on the x-axis while plotting many data points.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: dates ,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: ticks

        }]
    });

Answer 1

Add minTickInterval to your xAxis settings:

xAxis: {
            categories: dates ,
            crosshair: true,
            minTickInterval: 24
        }