How is it possible to hide date on x-axis with datetime, and leave only hours and minutes?
For example in the below graph I would like to have 00:00 instead of 19. Dec
Got a solution from https://forum.highcharts.com/highcharts-usage/highcharts-hide-date-on-x-axis-and-have-only-hours-t39998/
xAxis: {
labels: {
formatter: function() {
return Highcharts.dateFormat("%H:%M", this.value);
}
}
},
Related
First, for some reason I can't seem to get the yAxis to tickInterval on the 1st and 15th of each month.
Second, none of the data is correct. If you check out the series data and where the bars are on the graph there is some kind of monthly padding going on. Even the tooltip has the wrong dates.
ref: http://jsfiddle.net/no1uknow/5hnBP/12/
yAxis: {
title: '',
type: 'datetime',
min: Date.UTC(2014, 9, 1),
max: Date.UTC(2014, 12, 31),
tickInterval: 1000 * 60 * 60 * 24 * 14, // two weeks
//ticks: ['2014-10-01','2014-10-15','2014-11-01','2014-11-15','2014-12-01','2014-12-15','2015-01-01'],
labels: {
formatter: function() {
return Highcharts.dateFormat('%d-%b-%Y', this.value);
}
}
}
1) There is no one interval that will give you the 1st and 15th of every month, as the months are all different lengths, and the distance from 1->15 and that from 15->1 are not the same.
In order to have ticks at those specific dates, you will need to use the tickPositions setting, and provide an array with the epoch time stamp (in millisecods) of each date at which you want a tick (or the Date.UTC object).
tickPositions reference: http://api.highcharts.com/highcharts#xAxis.tickPositions
epoch time reference: http://www.epochconverter.com/
2) The bars and tooltips are displaying exactly correctly. Remember that in javascript, months start at 0 - so 10 is November, not October.
Thank jlbriggs you got me going the right direction.
If anyone is interested here is the solution I needed.
http://jsfiddle.net/5hnBP/15/
yAxis: {
title: '',
type: 'datetime',
min: 1409544000000, // Date.UTC(2014, 9, 1),
max: 1418619600000, // Date.UTC(2014, 1, 31),
tickPositions:
[1409544000000,1410753600000,1412136000000,1413345600000,1414814400000,1416027600000,1417410000000,1418619600000,1420088400000],
labels: {
format: '{value:%d-%b-%Y}'
}
}
I have a line chart with xAxis as follows:
'xAxis' : {
'type' : 'datetime',
'labels' : {
'rotation' : -90,
'align' : 'right',
'y' : 1
},
'dateTimeLabelFormats' : {
'day' : '%e-%b',
'week' : '%e-%b',
'month' : '%b-%y'
}
}
But it shows not only day/month but also hours. Is there a way to hide hours here?
I think you should consider minTickInterval to set it to one day - otherwise Highcharts will calculate interval, and set it for example to a half day (like you have in your case). If there wouldn't be 12:00 labels, then you will receive doubled labels. Of course other answer will resolve issue with displaying 12:00, but wouldn't prevent displaying extra labels.
Reference: http://api.highcharts.com/highcharts#xAxis.minTickInterval
What format do you want it in? You can put it in the format of 'day' of 'month' by doing something like this.
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
You can use label formatter and highcharts.dateFormat
I'm creating a line chart using Highstock. However, I found an issue when the date range is less than a specific number of days, duplicate x labels appear. I set formatter to show only days. Here is the example: http://jsfiddle.net/ry4DQ/
labels: {
formatter: function() {
return Highcharts.dateFormat('%m/%d', this.value);
}
}
When I change the start date to be for example 2011-05-07, you'll see two labels for each day on x axis.
Is there any way to avoid this issue?
I tried the setExtremes event, to set tickInterval to 1 day when the date range is less than some value, and it works. However, when the chart is resized smaller, label text overlaps.
Any help or info is highly appreciated!
Labels are duplicated because you define label as %m/%d for each extremes. I.e when you have: 18:00 / 22:00 (date range from 2011-05-07), then these values are overlapped by formatter (%m%d). So as a result is duplicated.
tickInterval / minrange should be defined as time in miliseconds, so one day is 24 * 3600 * 1000.
If you remove the formatter from xAsis.labels, the issue will go away. You might not like the date format though. Here's the fiddle, and screenshot:
The solution by #sebastian-bochan led me in the right path: you can still use your formatter (contrary to #dan-dascalescu 's answer), just make sure to also set the interval to the correct millisecond amount!
if hour_axis == true
date = 'h:MMTT'
interval = 3600 * 1000
else
date = 'm/d/yy'
interval = 24 * 3600 * 1000
xAxis =
xAxis:
tickInterval: interval
tickPositions: 0
type: 'datetime'
labels:
formatter: ->
dateFormat(#value, date)
This worked for me:
xAxis: {
type: 'datetime',
tickPositions: 0,
tickInterval: 24 * 3600 * 1000,
tickPixelInterval: 110,
maxTickPixelInterval: 125,
minTickInterval: 100,
labels: {
format: '{value:%m/%d/%y}',
enabled: true
}
},
This is how the chart looks like at the moment:
http://jsfiddle.net/VunVq/1/
On the x axis instead displaying the full date, I just want to display year.
e.g 2008 2009 2010
The tooltip should display the full date though.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31']
},
I read the api reference but cannot figure out how to display only year in x axis, maybe because its past my bedtime and my mind is not working.
Use the label's formatter callback JavaScript function to format the label.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31'],
labels: {
formatter: function () {
return this.value.split('-')[0];
}
}
}
DEMO
You can also set type xaxis as datetime (http://api.highcharts.com/highcharts#xAxis.type) and use pointStart() / pointInterval for series.
I wanted to change the navigator date format for example from Jul'12 to 2012.
How should I do it?
Please help...
Thanks
You can use xAxis parameter for navigator and define labels option (as in standard axis).
http://jsfiddle.net/XGunG/
navigator: {
xAxis: {
dateTimeLabelFormats: {
day: '%Y',
week: '%Y',
month: '%Y',
year: '%Y'
}
}
},
http://api.highcharts.com/highstock#navigator.xAxis
http://api.highcharts.com/highstock#xAxis.dateTimeLabelFormats