How to force HighChart xAxis units to show custom format in all zoom levels?

Question

I have a dynamic candlestick HighChart with the following options:

chart: {
    renderTo: 'chart-container',
    marginRight: 10
},
title: {
    text: 'My Chart'
},
xAxis: {
    type: 'datetime'
},
rangeSelector: {
    buttons: [{
        count: 5,
        type: 'second',
        text: '5S'
    }, {
        count: 30,
        type: 'second',
        text: '30S'
    }, {
        count: 10,
        type: 'minute',
        text: '10M'
    }, {
        type: 'all',
        text: 'All'
    }],
    inputEnabled: false,
    selected: 0
},
tooltip: {
    formatter: function (e) {
        var point = this.points[0].point;
        return '<div><b>Open: </b><span>' + point.open + '</span></div><div><b> Close: </b><span>' + point.close + '</span></div><div><b> High: </b><span>' + point.high + '</span></div><div><b> Low: </b><span>' + point.low + '</span></div><div><b> Custom Param: </b><span>' + point.customParam + '</span></div>'
    }
},
legend: {
    enabled: false
},
exporting: {
    enabled: false
},
series: [
    {
        name: 'My Chart',
        type: 'candlestick',
        data: []
    },
    {
        name: 'Average',
        type: 'spline',
        data: [],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },
        color: Highcharts.getOptions().colors[3]
    }]

Points will add dynamically. As you can see in my options, I've set rangeSelector. Currently points on xAsix is showing as HH:mm:ss.fff . I want to show I want to show xAxis points with this format July - 14:26:12.120 like attached screen shot.

Answer 1

Thanks.

My issue has been resolved by using http://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats which commented under my question.