I need to change datetime format of the X Axis Tick Label between MM/dd/yyyy HH:mm:ss and MM/dd/yyyy according to selection by the user.
How can i achieve this using javascript?

I need to change datetime format of the X Axis Tick Label between MM/dd/yyyy HH:mm:ss and MM/dd/yyyy according to selection by the user.
How can i achieve this using javascript?

• javascript
• highcharts

3 Answers 3

Got the solution, just made the tickInterval dynamic with the following code(ASP.NET)

tickInterval : <%=IsHourly?1:24 %> * 3600 * 1000,

Used the same logic to change the tooltip.

xAxis : {
            type : 'datetime',
            gridLineWidth : 1,
            gridLineColor : '#F2F2F2',
            lineColor : '#FF0000',
            tickInterval : 3600 * 1000,
            dateTimeLabelFormats : {
                second : '%H:%M',
                minute : '%H:%M',
                hour : '%H:%M',
                day : '%e',
                week : '%e',
                month : '%e',
                year : '%e'
            }
        },

See the dateTimeLabelFormats Option, you can use that to change your x Axis tick label.

Let me know in case you need more clarity.!

EDIT :

More API reference can be found here on Highcharts' site.

Demo

EDIT 2 : Ok so if you need to change it dynamically First save the format you need as String based on whatever calculation do.
Something like var labelFormat = '%H:%M' etc.
Then in when you render chart put dateTimeLabelFormats as following with other required options.

dateTimeLabelFormats : { labelFormat }

And then call redraw() method, and you're done.

Please Note : I haven't tested this code.

I know that I am way too late but if you are looking for a pure JavaScript implementation this might work:

tooltip:{formatter:function(){
            const selectedFormat = document.getElementById("dateFormat").value;
            const finalDate = Highcharts.dateFormat(selectedFormat, this.x);
            return finalDate;
        }
}

http://jsfiddle/527moaLs/

You can find the rest of the solution by yourself, I suppose