The problem is that, if I try to change the lowest point to somewhere higher, the entire chart will be lowered severely.
How do I adjust each point with no above mentioned issue?
P.S. I use Highchart's Highstock.
It would be helpful if you could show a JsFiddle with the actual working code. Without knowing what exactly is going on with your chart it's difficult to figure out what the issue is and how to fix it.
Have a look at the yAxis - Highstock API Reference, you could potentially make use of min or max to counteract the scaling. Again though, without seeing your code it's tough to know.
If I understand your problem, you are trying to set the 7th point from currently at ~150 to something really high, say 5000? I did not notice any real change in the position of other points if the new value was under 1500 (or something around twice the first point)
Appears that your chart is set to comparison mode, hence, I believe, the default max and min are (100% & -100%) by default, this is w.r.t. to first point of the series. Highcharts would auto adjust these extremes if any of the points were to lie outside this range, you could force an override using yAxis.min & max.
For instance, you can set yAxis.min to -100 and yAxis.max to 100 like this
yAxis: {
min:-100,
max:100
}
Play around with the min and max to get to the values that suits your data the most, do remember these are % comparison to the first point. Any points outside these ranges would not show in the chart.
#jsFiddle
Related
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
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 want to shift a chart in another way than addPoint does. You can see what I mean in my JSFIDDLE: http://jsfiddle.net/Charissima/TEEdw/3/
When the chart has filled the container and the next point is added, it shifts to the left without losing the first point.
It works fine, but sometimes I can see the chart swapping a little bit. And even worth: when running over a longer time the chart gets lost. It still works, you can see it shifting and updating y in the upper right corner, but the chart is not visible any more. Even the navigator is empty.
So my question is: Is there a better and smarter way to shift the chart this way?
data.push([ xTime, prevY ]);
data.push([ xTime, y ]);
series.setData(data, true);
var faktor = ( (chart.xAxis[0].max - chart.xAxis[0].min) / 60 / 1000 ) * 200;
chart.xAxis[0].setExtremes( chart.xAxis[0].min + faktor, chart.xAxis[0].max + faktor);
I've been working on a chart with very similar attributes and have run into similar problems. One of the undesired effects of the addPoint() shift flag is that it tries to keep the data set the same size it was initialized with. I'm guessing that is your reason for not using it. It doesn't allow you to grow your data set to a certain size and then start shifting. I had this issue with the shift so I resorted to doing exactly what you are doing. I think this is the generally accepted alternative to addPoint().
But... couple that with the idea that Highchart (or maybe just Highstock) appears to have a max number of data points it will handle. I don't know if it is the same for all charts (or even for all users/browsers) but for me yours seems to disappear when the data count is 1000. See this fiddle: > jsfiddle.net/TEEdw/4/ you can watch the data length grow to 1000 and then the chart disappears. I was running into the same issue on my chart. My solution was more complicated due to other factors in my chart. But a simple solution is to monitor the data count and when it approaches 1000, switch to the addPoint() with shift method. See this fiddle: > jsfiddle.net/TEEdw/5/ There is probably other ways to allow the data set to grow and then shift at a certain point. But this one just used your existing code. You could probably dynamically set the shift flag based on data length and only set it true once the data reaches a certain length.
EDIT: Ok... there is also a plotOptions setting called turboThreshold (http://api.highcharts.com/highcharts#plotOptions.series.turboThreshold) that can be disabled. It defaults to 1000 (so that makes sense). Setting it to zero allowed your chart to keep going after 1000. See this fiddle: jsfiddle.net/TEEdw/6/
In a candlestick graph i am building, the latest bar is cut-off partially such that even the bar is not visible. Thus it's difficult to judge the high and low by seeing the bar.
I'm unable to post a pic now but it's like the last rectangle being cut in half.
I'm tried a lot of options in the api but can't figure out why this is not showing correctly. The chart margin and axis offset options havent' helped. Is there a way i can set the series margin from the plot area so that it displays right.
For this problem, the best solution is to insert a dummy series which should be hidden from every aspect of the chart. So try this, insert a dummy series from the last point of the data series to some extra buffer(as per need). Then remove this series from the chart by explicitly removing it from the legends (using showinlegend),chart(setting linewidth to 0) and from tooltip by having a check in formatter. Hope this solves your problem.
I had the same problem and couldn't figure it out, because no matter how I changed the xAxis.maxPadding or changed the xAxis.max, it would always cut off the last candlestick when I clicked on the range selector.
To solve it, (hack) I just added an extra data point in my series and set it 1 day past the last day and set all values to null.
Without any code or a pic, it's hard to tell the problem, but it sounds like you need to use the max padding option. http://api.highcharts.com/highcharts#xAxis.maxPadding. You may also want to look at endOnTick as well as whether you are setting max on the axis.
Hello I'm original using highcharts
because my clients has need to see different view based on time,
like 1day,2day,3day,7day,1month, so I figure out highstock is more resemble
to this, but using highstock is missing some feature.
while I successfully figure out how to add legend(legend), change point display
(tooltip:formatter), change xaxis display and navigator display(dateTimeLabelFormats),
I see the display of line just like stock, which means:
it doesn't consider the absolute value of which too much, like I have connected terminals varying from 8-10, registered terminals varying from 2-3, unfornately it will draw registered terminals above connected terminals, which doesn't quite make sense, (besides the yAxis display is not correct, when it draw 5, the point above which actually says 4..), I also tried
plotOptions: {series: {compare: 'percent'}},
and
plotOptions: {series: {compare: 'percent'}},
but doesn't work, the y Axis is still quite confusing,
does anybody has a good solution? Thanks.
Had the same issue recently. It basically come from leaving useless parts of the example code in :D
Taking out the
plotOptions: {series: {compare: 'percent'}},
part should make it use the absolute values.
I assume taking out the compare parameter alone should be enough as well but since its the only thing you set from the plotOptions there is no need to keep the rest.