I like to show all months which are on the x-axis even if don't have corresponding data. As in my case, I have data till Sep therefore following months are not being displayed.
I'm using highchart in my application with angular 4.
You can set xAxis.max to 11 (categories have indexes starting from 0) to achieve the desired result.
API reference:
https://api.highcharts.com/highcharts/xAxis.max
Related
I was wondering if there are any missing years in between the min and max, that those would be normally populated as well (for example 2012-2017, if there are only 2012 and 2017 datapoints, to still show 2015 or so in the middle on the x-axis).
Thanks a bunch! Let me know if it's unclear and I can put together a JSFiddle.
I want to use the Highcharts StockChart library to make a chart. Here's more info on the chart I need to create:
The type of the chart is datetime
The data is being updated on every minute (it's data from stocks), so the chart is being constantly updated.
The data of the chart is from 9:00am to 11:40am and then from 12:35pm to 3:00pm (there's a lunch break).
The data is being shown with bars in an interval of 5 minutes (data is received for every 5 minutes except for the lunch break).
The bars will start to be drawn from left to right as the data is received.
The bars width needs to be the same size regardless of how many data is being shown on the chart.
The labels of x axis of the chart need to be always the same and on the same position (from 9:00am to 3:00pm every hour) even when there's missing data (a line must be drawn on the x axis).
So, I'm using the max property set to that day at 3:00pm on the x axis of the chart. With this, I can:
Have the bars width to be the same
Have the x axis be drawn regardless of the missing data on the same interval (until 3pm).
Everything works ok until the lunch break (11:40am). However, when receiving data for 12:35pm (after lunch break), the chart will ignore the max property and the last line of the x axis that is drawn is until 1pm (this line needs to be drawn until 3pm). I assume that this is because until 11:40am all the data for 5 minutes is present, so the chart understands the interval on which the data needs to be drawn and also can draw the x axis lines on the same interval. But as soon as there's a gap on the data, the chart doesn't know anymore if data will keep coming in an interval of 5 minutes, so will just take into consideration all the data that has received until now, ignoring the max property.
I have tried different options in order to solve the issue:
I used ordinal property set to false. With this, I can solve the issue of the missing x axis labels until 3pm, but the issue is that the lunch break will have a gap on the chart. I need to merge the lunch break and having the x axis labels drawn until 3pm.
I tried to use the tickInterval property and was able to set the interval of the x axis but only for the data that is being drawn. However, the x axis label it still until 1pm and needs to be until 3pm.
I tried to use the breaks property for the lunch break while using the ordinal property set to false but didn't work. Also, the chart needs to be merged on the lunch break; using this property will create a gap on purpose, so this property won't help me to fix this issue.
So, I noticed that the interval is being changed correctly where there's data, but the lines are not being drawn where there's no data on the x axis (only until 1pm and not until 3pm). And if I use the ordinal property, it will show all the x axis lines for the missing data, but need to hide the gap for the lunch break.
Any help with this is appreciated =)
UPDATE:
I noticed that when there's still no data, if using v1.3.1 of highcharts (the one I'm currently using), the x axis lines are being drawn correctly until 3pm, but if using the latest version this doesn't happen. It seems that the max property is being ignored for the latest version.
Including the links of jsfiddle for my code on the comments (since stackoverflow doesn't allow me to post many links because don't have enough reputation).
I was able to achieve what I wanted. In the end what I did was to create null data to fill this gap for the lunch break. Also, I created null data for the remaining data until 3pm, that way the x axis lines were drawn properly: https://jsfiddle.net/K4Cj6/201/:
[1504528800000,null,null,null,null]
Thanks anyway guys =)
We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:
I'm using the ios-charts library and I have a LineChart View that has x values that are dates from every weekday of this year. On the y-axis I have values between 0 and 25.
I would like to zoom in on different intervals on the LineChart View.
For example only show Data for week X one time and later change to show data for three months, etc etc.
I did not find anything in the documentation on how to do this. I used the "zoom" function with out any success.
(Example : Zoom and show the last 20 days on the x axis or zoom and show the last three months)
Has someone does this before?
It's a tough question and very advanced control. I guess you need to read carefully about the code, focusing on moveViewToX, and the logic and functions in ChartTransformer. Combining some tricks and calculations, you may find a way to fine-grainedly controll what you want to display.
Also, there is a property:
/// the maximum number of entried to which values will be drawn
internal var _maxVisibleValueCount = 100
may also help you.
I am using a Highcharts Stock graph to show a percentage with respect to time.
http://jsfiddle.net/michaelchart/yYmPR/1/
At certain zoom levels (in this case, when zooming to a timespan of between about 6 and 12 years) the plot strangely turns from a line to sporadic points.
Any ideas as to why this might be? Or is it a bug with Highstock?
You can see an example of a working Highstock graph here http://www.highcharts.com/stock/demo/basic-line.
After posting on the Highstock forum and consequently having an issue posted on github, I found that it was because of the default value of the gapSize option. According to the docs;
gapSize : Number
Defines when to display a gap in the graph. A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken.
In practice, this option is most often used to visualize gaps in time series. In a stock chart, intraday data is available for daytime hours, while gaps will appear in nights and weekends.
Defaults to 5.
Setting gapSize to null fixes the problem.
In my particular case, the reason of this problem was bad data output.
Within "series" property, within the "data" array there was a "false" value.
Example:
series : {
"type":"column",
"name":"Test",
"data":[541,784,false,251,353]
}
Corrected the problem in the backend so "false" was interpreted as 0, and everything works now.