Develop Reference

Highcharts - Format X axis with 2 digit hours in 24 hour format

I'm looking to format the X-axis in a kind of bespoke way, see attached image. The format should be in time, in 24 hour but displayed as in the image - 9, 10, 11, 12, etc.
The Y Axis values are variable, which makes things tricky. For example, they could be alphabetical, numbers or other categories that don't have any relationship with time. Am I better off using the datetime or just using integers for this?
So far it looks like this but it's not working as expected:
const chartOptions = {
title: {
text: ""
},
xAxis: {
type: "datetime",
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%H'
}
},
yAxis: {},
series: [
{
data: [
[Date.UTC(2012, 10, 10, 0, 5, 0), 1.09],
[Date.UTC(2012, 10, 10, 0, 10, 0), 1.09]
],
type: "line"
}
]
};
What I want to achieve:
https://snipboard.io/RO4NLw.jpg

You can use both datetime and linear type of xAxis. To have only hours in a datetime axis set:
xAxis: {
type: "datetime",
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
hour: '%k'
}
}
Live demo: http://jsfiddle.net/BlackLabel/okeujzmh/
API Reference: https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

how to format flot char yaxis by value seconds in highcharts?

I'm working with highcharts char. I need to show the yaxis labels H:i:s time format(for ex. yaxis - 00:00:00, 00:05:00, 00:10:00 and etc.).
Here is my code (full code in this fiddle):
LiveFeeds = {
init: function(tab)
{
var tab = tab || '#calling-intensity';
$(tab+'-chart').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,minRange: 0.1,
title: {
text: chartYaxis
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: tooltipData,
series: seriesData
});
}
};
This is a example but on Flot chart https://jsfiddle.net/p41d165j/14/.

Use http://api.highcharts.com/highcharts#xAxis.labels.formatter to format the labels as you wish.

To change date format of labels you could use dateTimeLabelFormats like:
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
Example: https://jsfiddle.net/hzjbb848/10/
Axis by default will display labels for each day, because of axis range, but if you zoom in - you will see hours.
You could consider using different format for day or use tickPositioner to set ticks not on days.
To fully control what is displayed in axis labels set up formatter function.

X axis shows the time from 12 till 12:55 instead of dates

This code generates a highchart with 2 Y axis and 1 X:
$('#main_chart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Overview'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Y2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Y1',
data: y1Data
}
,{
name: 'Y2',
data: y2Data
}
]
});
y1Data and y2Data are the arrays of arrays [[1426525200, 2], [1426611600, 0], [1426698000, 0]...] where the 1st element is date. The dates are sequent with a step of 1 day:
1 Mar 2015, 2 Mar 2015, 3 Mar 2015....
However, I see only time from 12:00 till 12:55 on X and nothing else:
What I want to see is the dates 1 Mar 2015, 2 Mar 2015, 3 Mar 2015.... EndDate. Moreover, why is there minus $20? There're no negative values in the data set.

When defining data, either provide timestamp in miliseconds (not seconds) or use JavaScript Date object instead:
var y1Data = [[new Date(), 2], [1426611600000, 0], [Date.UTC(2010, 2, 1), 0]];
To answer your $-20 question, Highcharts use their own algorithm to guess the most appropriate axis minimums a maximus. If you're not happy with it, simply set
yAxis: {
min: 0,
...
}

Highcharts columns have no width (seemingly arbitrarily)

I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.
Here's an example of one such chart that I need to handle:
$('#TimesChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Response Times'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Minutes'
}
},
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
});
The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.
One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.
http://jsfiddle.net/3NZZW/
Anyone know what's happening here?

That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.
http://jsfiddle.net/pUTQd/
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
(note I just changed the dates, I didn't change the data)

Highcharts datetime starting on wrong day

I have a php outputting a chart as Javascript, it all displays properly, however, the datetime function on the x-axis isin't starting on the correct date.
I have set the graph like this:
xAxis: {
title:{
text: 'Day',
style: {
color: '#666666',
fontSize: '12px',
fontWeight: 'normal'
}
},
type: 'datetime',
dateTimeLabelFormats: {
day: '%e.%b'
},
showFirstLabel: false
},
Then at the series data level:
series: [{
name: 'Office',
zIndex: '1',
data: [0, 0, 0, 0, 0, 0, 1.8, 17.67, 17.66, 74.8, 62.45, 71.21, 67.75, 22.28, 16.61, 16.26, 71.79, 72.85, 56.52, 48.68, 47.01, 0, 0, 33.8, 62.72, 40.28, 9.99, 26.06, 8.85, 9.46, ],
pointStart: Date.UTC(2012, 7, 14),
pointInterval: 24 * 3600 * 1000 //one day
}]
So this is clearly set to daily, and to start on the 14th of July 2012. However, when the graph displays, it starts on todays date.
Any help is greatly appreciated.

try
pointStart: Date.UTC(2012, 6, 14),
for July - JS months start at 0