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
Related
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);
}
}
},
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 am using highstock control and I want to set a custom highlighted date range for a control via js. Example of task: load data for a week to control and highlight only data for last day since 16:00
I tried using this code when initializing chart control:
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}],
selected: 0
}
But this code highlights whole timespan for last 24 hours, while I need to highlight last day from 16:00. How can I set this custom date?
Instead of using rangeSelector, use min and max for xAxis, for example:
xAxis: {
min: Date.UTC(2013, 6, 17, 16, 00), //previous day at 16.00
max: new Date().getTime() //get actual time
}
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.