Tick position on X axis

Question

How can I limit showing ticks on X axis in Highcharts? The last one is outter of X axis:

My source:

var options = {
chart: {
    renderTo: 'chart',
    events: {
        load: function(event) {
        }
    },
    type: 'spline',
    animation: false
},
title: {
    text: ''
},
colors: [
    '#499878','black'
],
rangeSelector: {
    enabled: false
},
credits: {
    enabled: false
},
tooltip: {
    shared: true,
    crosshairs: true
},






series: [{
    name: 'Temperature (°C)',
    type: 'spline',
    tooltip : {
        valueDecimals: 2,
        valueSuffix: ' °C'
    },
    yAxis: 0,
    color: '#89A54E',
    data: []

},{
    name: 'Wind speed (m/s)',
    type: 'spline',
    tooltip : {
        valueDecimals: 2,
        valueSuffix: ' m/s'
    },
    yAxis: 1,
    color: '#4572A7',
    data: []
},{
    name: 'Humidity (%)',
    type: 'spline',
    tooltip : {
        valueDecimals: 2,
        valueSuffix: ' %'
    },
    yAxis: 2,
    color: '#910000',
    data: []
},{
    name: 'Wind direction (°)',
    type: 'spline',
    tooltip : {
        valueDecimals: 2,
        valueSuffix: ' °'
    },
    yAxis: 3,
    color: '#000000',
    dashStyle: 'shortdot',
    data: []
}],



xAxis: {
    type: 'datetime',
    tickInterval: 10000,
    min: 0,
    max: 0
},



yAxis: [{
    labels: {
        style: {
            color: '#89A54E'
        }
    },
    title: {
        text: 'Temperature',
        style: {
            color: '#89A54E'
        }
    },
    gridLineWidth: 1,
    opposite: true
},{
    labels: {
        formatter: function() {
            return this.value +' m/s';
        },
        style: {
            color: '#4572A7'
        }
    },
    title: {
        text: 'Wind speed',
        style: {
            color: '#4572A7'
        }
    },
    gridLineWidth: 1,
    opposite: false,
    min: 0
},{
    labels: {
        formatter: function() {
            return this.value +' %';
        },
        style: {
            color: '#910000'
        }
    },
    title: {
        text: 'Humidity',
        style: {
            color: '#910000'
        }
    },
    gridLineWidth: 1,
    opposite: true
},{
    labels: {
        formatter: function() {
            return this.value +' °';
        },
        style: {
            color: '#000000'
        }
    },
    title: {
        text: 'Wind direction',
        style: {
            color: '#000000'
        }
    },
    opposite: false,
    reversed: true,
    min: 0,
    max: 360,

    minorGridLineDashStyle: 'longdash',
    minorTickInterval: 'auto',
    minorTickWidth: 0,
    tickInterval: 90
}],




plotOptions: {
    spline: {
        lineWidth: 3,
        states: {
            hover: {
                lineWidth: 5
            }
        },
        marker: {
            enabled: false
        }
    },
    scatter: {
        marker: {
            enabled: true
         }
    }
}
};

Answer 1

I found out it's matter of oveflow: 'justify' . jsfiddle

Answer 2

What happens if you use 'spacingRight' ( http://api.highcharts.com/highcharts#chart.spacingRight ) as below:

chart: {
    renderTo: 'chart',
    events: {
        load: function(event) {
        }
    },
    type: 'spline',
    animation: false,
    spacingRight: 100 // you may change this for testing...
},