I've been searching through the highchart API and was unable to find a way to allow max zoom out to be (say) January, follow by the next tick is 7 months later which is July and so on. And at the same time to have the max zoom in to be 1 day only.
Example:
***Referring to above picture, at max zoom out (no zooming in) ==> x-axis label displaying Jan/2005 at the first tick, second tick is July/2005, third tick is Jan/2006, fourth tick is July/2006... and so on.
***Referring to above picture, user can at the same time zoom in to one day only max. (For this, i've done it with "minTickInterval: 24 * 3600 * 1000")
So I was able to set minimum tick interval is 1 day. However, i could not control the interval when zoom out to the max. I tried using "tickInterval" and it starts giving me 365 ticks each year on my x-axis at max zoom out. I also tried "minRange: 210 * 24 * 3600 * 1000 // 210 is # of days for 7 months", still no luck with no ticks down to days after zooming in. Currently for the max zoom out, the datetime label is auto scaled based on (i suppose) my chart or screen size.
Anyone got an idea how to do it or did i not use those api properly? I've been on this for almost a week already. Hope someone can help. Thanks.
You can use tickPositioner to define your own function which will set ticks positions.
http://api.highcharts.com/highcharts#xAxis.tickPositioner
Related
I would like to be set a fixed interval of 2 hours between every tick on the X axis, but also limit the number of ticks on the whole axis to 5, cropping out the extra data if necessary.
Currently I can achieve one or the other, but not both, using the following config :
tickInterval: 2 * 3600 * 1000 // sets the interval between each tick to 2 hours
tickPixelInterval: 100 // sets the number max number of ticks (for the current graph width) to 5
JSFiddle here
Is there a way to achieve both ?
You can set desired range using max or maxPadding properties.
API Reference:
http://api.highcharts.com/highcharts/xAxis.max
http://api.highcharts.com/highcharts/xAxis.maxPadding
Examples:
https://jsfiddle.net/vwrpwcq0/ - setting max
https://jsfiddle.net/ztqL9j3g/ - setting maxPadding
I am playing with a chart with a one data point.
Here is the jsfiddle demo: http://jsfiddle.net/mddc/mfwyoj7j/7/
I notice that if I add
minRange: 1
-1 or 1 will show up on both sides of the data point on the X axis.
I am new to Highcharts. What does minRange=1 mean here? If it is useless, then it should not create any problems, right?
Is this a bug in Highcharts?
Thanks and regards.
See highcharts API doc here: http://api.highcharts.com/highstock#xAxis.minRange
minRange: the minimum range to display. The entire axis will not be allowed to
span over a smaller interval than this. For example, for a datetime
axis the main unit is milliseconds. If minRange is set to 3600000, you
can't zoom in more than to one hour.
So it is used to limit the zoom-in: you will not be able to zoom if the xAxis display less than 1
I have a series of data collected every 15 minutes for a few weeks. Unfortunately, there's a week of missing data in the middle. This is just a fact of my business. When I use Highcharts to chart this data, it compresses the x-axis (time), skewing the chart. For example, the x-axis has major ticks every 2 hours until the missing week. Then it jumps to major ticks of days.
Regardless of the data, I need the x-axis to remain consistent. If this causes a large gap in the diagram, so be it.
I have skimmed the documentation but found nothing. If anyone could direct me to the relevant page that would be great. Thanks!
Refer: https://stackoverflow.com/a/13439281/1566575
You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time
xAxis: {
ordinal: false
}
Linear x-axis | Highstock # jsFiddle
Docs:
http://api.highcharts.com/highstock#xAxis.ordinal
I have some data that can have values in the range (0..100). Highcharts will sometimes label the axis from -10 to 110, which looks odd.
How can I prevent this? I can set a fixed min and max value for the axis, but if the current values happen to be between e.g. (50..60), I'd rather let Highcharts zoom in on the axis accordingly. Just don't want Highcharts to ever show anything outside of (0..100).
I could of course determine the appropriate min and max values myself every time I load data, but was hoping there would be some kind of minMin and maxMax setting?
So it looks like this isn't possible; opened a feature request.
Nowadays highcharts has floor and ceiling options for this use case.
I am using the highstock component to display stock history data that goes in the range of years. So what I require (if possible) is to set a max zoom range (the opposite of what minRange does) to limit the user to zoom out over several years...say to limit the zoom range to a maximum of one year.
Thanks in advance for your support.
Unfortunately there isn't any specific option for that. However, you can achieve that by using afterSetExtremes callback. In that callback you can compare event.min and event.max and set new extremes if timespan is bigger then your max.