Non-zero fill centerpoint for highcharts/highstock? - highcharts

I have searched for answers to this using various combinations of the following search terms, with no results to speak of: highcharts, highstock, area, centerpoint, zero, center.
I am simply wondering if, when configuring an area-chart, it is possible to change the point around which the plot's fill is centered. By default, charts fill from zero to the data-line, but there are situations where a user may wish to see how their plot varies around a non-zero base-line.
Is there a way to accomplish this in the highcharts/highstock API?
Thanks,
Justin

If I understand correctly, you are just talking about the y axis min:
http://api.highcharts.com/highcharts#yAxis.min
If that doesn't do what you are asking for, then perhaps threshold will:
http://api.highcharts.com/highcharts#plotOptions.area.threshold

Related

Google Sheets radar chart not centering axis in zero

I'm building a Radar Chart using Google Sheets.
However it insists in not centering in zero and I can't tell what crazy scale it is using in the horizontal axis. Does anyone know if there is a way to center both axis in zero? I tried many different parameters in the chart edition box but couldn't find the right one.
Example sheet here
since you are using percentages you can "round it" like this:

Controlling shown y-axis labels?

So I am using the Charts framework (formerly ios-charts) for a couple of charts.
One of them in a bar chart where the y-axis is duration in seconds - that I then convert into readable minute:second notation with a formatter.
But the selected interval of labels bugs me a little. I would like to control them so they are only shown at intervals that makes sense for this - like say every half or full minute. But I can't seem to find a way to do that for that axis. Only the x-axis seems to have options for that?
So am I missing something here? Or it is not in the framework?
Whoops. Never mind. I found the 'granularity' property on the axis right after asking. And it seems to do what I need.

How to prevent Highchart from severely change declines?

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

Highcharts highstocks - candlestick graph has last value partially cut

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.

How do I make my highstock's graph y axis is just absolute value?

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.

Resources