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
}
},
Related
I've implemented a Gantt chart that contains some Gantt long bars and their time period is usually more than a couple of months, moreover, the xAxis of the chart shows years and months as you can see below gif. XAxis's tick-interval should change automatically when I change the range of the Gantt period, but it doesn't!
The desired way is that if I change the time range to a month or smaller, xAxis's tick-interval should change to month/week or month/day.
xAxis: {
maxPadding: 0,
max: Date.UTC(2024, 07, 16),
plotLines: [
// some lines
]
}
Ticks on the xAxis are calculated based on the provided data.
When your data range is wide, the ticks also tend to cover a wider period of time. To change default behaviour you might set the tickInterval inside the afterSetExtremes function with the use of the update method.
Inside you might specify some conditions like for example visible range.
events: {
afterSetExtremes: function(e) {
if (this.chart.xAxis[1].max - this.chart.xAxis[1].min < 36e8) {
this.update({
tickInterval: 36e7
})
} else {
this.update({
tickInterval: undefined
})
this.chart.xAxis[1].update({
tickInterval: undefined
})
}
}
}
API:
https://api.highcharts.com/gantt/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Live demo: https://jsfiddle.net/BlackLabel/9poc65fn/
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}'
}
}
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner
When I load all my data into a chart the xaxis gets cluttered and unreadable. I have maybe 120 records per hour that with a certain value. Is there a way in highcharts to load all the data I have and have the xaxis showing the values per hour? As pictured below:
http://i.imgur.com/uWkKZ0c.png
Have you tried http://api.highcharts.com/highcharts#plotOptions.line.pointInterval? I would assume setting pointInterval to 3600*1000 = 1 h would achieve what you want? By default this value is 1, hence the cluttering.
plotOptions: {
series: {
pointInterval: 3600 * 1000 // 1 h
}
},
Also check this fiddle; samples/highcharts/plotoptions/series-pointstart-datetime/
I'm displaying a number of series in a highstock chart. I chose highstock because I want to show at least 4 hours of data with the option of scrolling if the user adds data points beyond those 4 hours (but I don't want the rangeSelector or navigator enabled, if that pertains to the problem I'm having).
I thought this would be straightforward, but I'm having problems showing 15-minute intervals on the x-axis. When one data point is dynamically added, the graph correctly shows the 15-minute tick intervals, but when more data points are added, the x-axis starts to scale the times incorrectly. If I then refresh the page and display a graph with multiple data points, I get really weird tickIntervals.
Here are my xAxis options:
xAxis: {
type: 'datetime',
min: 1361815200000,
max: 1361829780000,
tickInterval: 15 * 60 * 1000,
minTickInterval: 15 * 60 * 1000, // 15 minute intervals
gridLineWidth: 2,
labels: {
formatter: function () {
var d = new Date(this.value);
return (d.getMinutes() == 0) ? '<b>' + Highcharts.dateFormat('%H:%M', this.value) + '</b>' : d.getMinutes();
}
}
}
You can see the rest here: http://jsfiddle.net/pxCsX/
What am I missing? I've tinkered with minRange, type and other xAxis and series attributes and scoured the highstock docs, but I keep coming up with bupkis.
Setting ordinal to false solves the problem:
xAxis: {
ordinal: false
}