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
Related
First of all I know about the sync tables example here: https://www.highcharts.com/demo/synchronized-charts
This is good but in my tables the Y axis is the same for all of the charts, the only problem is that each few seconds I dynamically add a point to each graph so I am looking for a way to have the same min and max for all of the charts (easier to compare).
I hooked into the afterSetExtremes() https://api.highcharts.com/highcharts/yAxis.events.afterSetExtremes
And then calculated the min of all the mins and the max of all the maxes (from all the charts together) and I forced it as the new min and max for all the charts.
The problem is that once I use setExtremes:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Highcharts will stop calculating new mins and maxes which means that if the data in all of my charts is starting to shrink the max won't get re-calculated ever so the graphs will look kinda bad and hard to read (imagine max of 10k with data that is now around 1k in all of the charts).
I have an idea on how to solve it by reading the dataMin and dataMax props from highcharts for all the charts I have on my page and then calculating the min and max by myself each X seconds, my problem is that highcharts has some interesting way to calculate the max and min from dataMin and dataMax and I didn't find where it is defined or how I can use that function.
For example if in highcharts dataMax is 16442 then I believe the max would be 17500, I am not sure the exact logic that highcharts is doing there but I would like to keep the exact same behaviour.
tl;dr
1) What is the best way to sync min and max (Y axis) for different charts (but same units)?
2) If my solution here is the best approach then how can I use highcharts inner setMax from dataMax logic?
Thanks in advance!
It seems that you used setExtremes in the wrong place. Please take a look at my approach below, the charts have the same yAxis min and max every time you add a point:
function synchronizeCharts() {
var charts = Highcharts.charts,
min,
max;
Highcharts.each(charts, function(chart) {
min = min ? Math.min(min, chart.yAxis[0].min) : chart.yAxis[0].min;
max = max ? Math.max(max, chart.yAxis[0].max) : chart.yAxis[0].max;
});
Highcharts.each(charts, function(chart){
if (chart.yAxis[0].min !== min || chart.yAxis[0].max !== max) {
chart.yAxis[0].setExtremes(min, max);
}
});
}
Live demo: http://jsfiddle.net/BlackLabel/t81Lp20k/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
If you still need to find out how Highcharts calculate extremes, you can look at the source code: https://code.highcharts.com/highcharts.src.js
In my data, I have hundreds of values for the x-axis, but I want to show only 6 or 7 of them at equal intervals so that my whole range of x-axis values are covered, but I am facing an issue as I am not able to show a limited number of values on the x-axis . I tried these
lineChartView.xAxis.spaceMin = 4
lineChartView.xAxis.spaceMax = 7
lineChartView.xAxis.xOffset = 6
lineChartView.xAxis.labelCount = 6
, but it is not working .Here is my screenshot for the display
The axis property granularity is used to specify the minimum interval between axis values. The default value is 1. Currently in my app i have it set to 0.5 to force all values to be displayed, but I only have 10 or so on the chart at once.
chartView.xAxis.granularity = 0.5
Perhaps setting this to a higher value will help you.
I am using highcharts to draw a stock graph. It start with zero data, then add one data point per minute. after whole day, it fill with 240 data points.
The x axis is fix length, and designed for the whole 240 data points. When the data points have not grow to 240 yet, we want the corresponding part of chart of the missed data to be empty.
I've check the highcharts API, and cannot find options to do that. It looks like all the highcharts demo are filled the chart with data available.
thanks!
In short, you set xAxis.min and xAxis.max.
For example if you have two points in your data:
// January 1st 2015, 00:00 and 00:01
data : [[1420070400000, 3], [1420070460000, 7]]
Then you'd set the min and max to allow space for all the points that will eventually be added:
xAxis: {
min: 1420070400000,
max: 1420070400000 + 86400000 // 60 * 60 * 24 * 1000 added
}
As in this demonstration, which has two points and space for the entire day.
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'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