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
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
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 a 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});
I want my chart to have a "fixed zoom" on y-axis on certain interval. I don't know if that's a right way to describe it, but I'll give you an example.
This is how my chart looks like right now:
While I'm fine with my x-axis (hours) generating automatically, I want my y-axis not based on series (now it's 8k, 10k. 12k etc - so thats 2k interval), but on fixed value, for example 5k (5k, 10k, ... up to 50k)
Found the solution! It's yAxis.tickInterval.
chart = new Highcharts.Chart
yAxis:
tickInterval: 5000
Coffeescript Above.
I have the following issues while working with stacked column charts:
Firstly,look at the following chart:
http://jsfiddle.net/QnuEA/
If you notice the time range is wide, the columns appear too thin. I know that setting pointWidth is one option. But actually the chart should be appearing as they would if the time interval range is narrow as follows:
http://jsfiddle.net/QnuEA/1/
The expectation is x-axis interval must adjust itself.
Secondly, for the same chart as above, if the width of the chart is more (say 900 px or so), the x-axis seems to have a lot of empty space before the first tick.
Is there a solution to this? (I am unable to post more than 2 jsfiddle links here.So I am not providing a link for this issue)
You need to define pointRange as timestamp
http://jsfiddle.net/QnuEA/3/