I have a Highstock chart with type scatter. When I use the range selector some of the series disappear cause the have no data in the current range. How can I prevent the chart from scaling to only the existing data an keep the yaxis in the initial state?
I can see only two options:
set fixed min and max for yAxis
in afterSetExtremes call yAxis[0].setExtremes(min, max) in setTimeout function, but you need to calculate min and max on your own.
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 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 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 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/
I am using the HighStock JS lib to produce a chart that uses a linear series (not a time-series) for the xAxis.
I'd still like to use the range-selector in order to zoom to pre-determined ranges within my linear series. Is this possible?
For example; say my xAxis has a series:
[[121,616],[122,600],[123,605],[124,585.5],[125,575.5],[126,580.5],[127,582],[128,582],[129,584],[130,583]]
I'd like to use the range selector to zoom to the last n in the series.
I don't think that is supported out of the box. But what is supported is Axis.setExtremes()
You can dynamically set the zoom of the xAxis using this method, and hence you can create your very own range selector for non timeseries charts
Axis.setExtremes() How to # jsFiddle
My attempt at custom range selectors # jsFiddle