This is how my date format from JSON file looks: http://jsfiddle.net/6roz4ya8/
I would like my chart to show only hour and minute on x-axis in normal view (I can trim, just how to go about in highchart), whereas minutes and seconds when zoomed. I understand we could use tick positioner when type="datetime". How do I do the same for 'categories: dateFromJsonFile'(i.e. if using date on x-axis from json file)
For eg: If '2022-07-15T13:57:54.4919219+03:00', I want 13:57 to be shown in general (unzoomed normal view) and 57:54 to be shown when zoomed
xAxis: {
gridLineWidth: 1,
//I need to set categories to timeData, as this timeData comes from Json
// categories: timeData,
type: "datetime",
labels: {
rotation: 270
},
}
Below is how I want it to be. Shows one minute interval in normal view, 10 seconds interval on Zoom - https://jsfiddle.net/BlackLabel/7qj2cLea/
You can use formatter function for x-axis labels and return hours and minutes in case of not zoomed chart and minutes and seconds in case of zoomed.
const formatTime = time => time > 9 ? time : '0' + time;
Highcharts.chart('container', {
...,
xAxis: {
type: 'category',
labels: {
rotation: 270,
formatter: function() {
const date = new Date(this.value);
if (this.chart.resetZoomButton) {
return formatTime(date.getMinutes()) + ':' + formatTime(date.getSeconds());
}
return formatTime(date.getHours()) + ':' + formatTime(date.getMinutes());
}
},
}
});
Live demo: http://jsfiddle.net/BlackLabel/k7nywoad/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter