Is there a way to create an empty point for the dates which are not included in the data?
Tried to use pointInterval: 24*3600*1000, but doesn't have any result.
In this example we have a gap between 31th July and 7th August which I would like to fill with empty points.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/candlestick/
You need to set ordinal: false as an option on the xAxis. Like this:
xAxis: {
ordinal: false
}
API on xAxis.ordinal: https://api.highcharts.com/highstock/xAxis.ordinal
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Defaults to true.
Working example: http://jsfiddle.net/phLz68r9/
Related
I have some list of dates as categories for xAxis.
Example of collection : 2018-01-01, 2018-01-03, 2018-01-10, 2018-01-17, 2018-01-29;
I want to display on chart dates in format MMM yy (Jan 18)
So I've tried to group all this dates by this date format. As result I received only 1 item in collection which is logically. But on chart I saw labels like this
Jan 18, 1, 2, 3, 4
How to "group" values on chart to display only month labels?
Example what I have now https://jsfiddle.net/phwgo4jz/7/
You could use the dateTimeLabelFormats option of xAxis to format the label. Or simply set the type of xAxis to datetime. Highcharts scales the axis and inserts appropriate labels as required.
Here is the highcharts documentation : https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
Also a sample codepen with similar functionality as your requirement. Have a look
https://codepen.io/samuellawrentz/pen/XYVyNR?editors=1010
categories are basically just an information how to display labels and position ticks - the axis still behaves like a "normal" linear axis. Highcharts will fill the axis labels up with subsequent integers if you don't provide categories for all y positions.
You can use xAxis.labels.formatter to filter categories out:
formatter: function() {
return Number.isInteger(this.value) ? '' : this.value;
}
Live demo: https://jsfiddle.net/BlackLabel/ytoj9ng2/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
My case: Plot a stockchart with stock data for 5 days without weekends displaying, each day should have equal space even though data can be irregular.
What i need to do is plot an xAxis with static intervals of one day, however i cant display weekends and the data can be very irregular between the days. I've tried tinkering with tickInterval, tickPositioner but so far no luck.
I can hide weekends with:
ordinal: true,
My current fiddle:
http://jsfiddle.net/svedino/h9448fk0/1/
Setting the ordinal to false gives me correct interval but with the weekends included.
An example of this kind of graph seems to be working can be found here:
https://www.avanza.se/aktier/om-aktien.html/229675/jays
We have a requirement to display the x-axis labels in different formats depending on the timeframe. User has the ability to change the timeframe using navigation bar (or zoom bar) that appears beneath the chart.
For example,
for less than 1 day timeframe, the labels should be in hours and mins - "09:45", for 1 day to 1 month timeframe, the labels should be month and date - "Jul 21", etc.
I am using 'tickPositioner' to return the right number of ticks, calculated using min and max values. Now I want to use 'formatter' to display the ticks in the format we need, but it doesn't look like I can access min/max values from within this function. Is that correct? If yes, how can I do the custom formatting like we want to?
Thanks.
You can find the min and max of the axis through the formatter like this:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
console.log(this.axis.min);
console.log(this.axis.max);
return this.value; // Default. Return something relevant instead
},
}
}
See the API (or console.log) for all values of this in the formatter. The axis might here be the y-axis as well. You can always access the x-axis through this.chart.xAxis[0] if necessary.
Note however that unless you want to be very specific with your formatting you might want to consider customizing dateTimeLabelFormats (API).
I have a problem with HighCharts xAxis label. Date on xAxis label difference on tooltip and there are have 2 gridLine on a tick point. I thing have problem with json data but I don't know why.
Here is my code http://jsfiddle.net/jevgzgjx/1/
My data as a json array with timestamp:
var json = [[[1362783600000,5691],[1362870000000,6503],[1362956400000,15574],[1363042800000,16211],[1363129200000,16427],[1363215600000,16486],[1363302000000,14737],[1363388400000,5838],[1363474800000,5542],[1363561200000,15560],[1363647600000,18940]],[[1362783600000,4346],[1362870000000,4112],[1362956400000,11356],[1363042800000,11876],[1363129200000,11966],[1363215600000,12086],[1363302000000,10916],[1363388400000,4507],[1363474800000,4202],[1363561200000,11523],[1363647600000,14431]]];
The problem here is that your timestamps are all for 23:00 (11pm). Therefore the point is being drawn slightly to the left of each grid line (since the gridline is for 00:00 each day). It also causes the tooltip of each point to show the day before, since the point is in fact not on the day that the gridline displays, but one hour prior to that.
You can visualize this problem by modifying dateTimeLabelFormats, so that the hours are shown in the tooltip, like this (see this JSFiddle):
dateTimeLabelFormats: {
day:"%A, %b %e, %Y, %H:%M"
}
I'm not sure about the origin of your problem, but it can be solved by adding 3600000 (one hour in ms) to all your timestamps. The problem may be timezone related as timestamps in Highcharts are treated as UTC by default, so look into getting your timestamps in UTC as well.
If you use Date objects you can specify the timezone before getting the timestamp. You can disable using UTC by default with global.useUTC: false (API), but then you'll risk ending up with different results depending on where you are viewing the chart.
I am trying to make a chart using Highcharts which shows no of days in the x-axis if the chart is for a week or month.
Now i want to split the x-axis by "hours" if the chart is for single day.
See the fiddle here
var checkin_failures_stats = {
xAxis: {
type: 'datetime'
},
You need to use tickPositioner and calculate your ticks dynamically.
http://api.highcharts.com/highcharts#xAxis.tickPositioner
It sounds like you just need to look at the tickInterval property:
http://api.highcharts.com/highcharts#xAxis.tickInterval
You'll need to know the time span of your chart - you can either specify this directly, or you can get the min and max values from the getExtremes function, and calculate the length of the time of the chart, and set your tickInterval accordingly.
http://api.highcharts.com/highcharts#Axis.getExtremes