I am using logarithmic axes on HighCharts and sometimes the chart will not render due to issues such as negative or 0 values which is totally understandable but it also fails if the axis label happens to be 0 or less as well. My question is: is there a way to capture or detect this issue during rendering so that I can dynamically change to linear axes as a fallback and render a message to notify the user why it failed?
Here is an example of a failed curve rendering due to a 0 label on the x-axis:
http://jsfiddle.net/axl163/Eqc5G/1/
Here are some more details on the HighCharts error:
http://www.highcharts.com/errors/10
I would appreciate any suggestions.
Thanks!
in your series add pointStart:1 and it should work. example:
series: [{
data: [0.001,1,1.2,1.4, 2,30],
pointStart: 1
}]
I addressed this issue by checking the values that go into HighCharts and if there are unacceptable values, the axes will automatically be changed to linear.
I resolved the problem setting the pointStart and min attribute of yAxis.
Here an example:
yAxis: {
min: 1
},
series: [{
data: [0.001,1,1.2,1.4, 2,30],
pointStart: 1
}]
Related
I have a stock price chart with variance along xAxis (its a special chart). I want to plot this variance as histogram.I can draw it successfully but I can't get rid of the space between histogram columns. fiddle here https://jsfiddle.net/Lng1w0my/1/ (click on price series to generate histogram)
I have set
groupPadding: 0,
pointPadding: 0
but doesn't work.
I tried a simpler fiddle https://jsfiddle.net/hpdru52b/1/ And this one works fine.
I can't find what is the difference.
Any help is highly appreciated.
You need to set ordinal option to false:
xAxis: {
ordinal: false
}
Live demo: https://jsfiddle.net/BlackLabel/ush37qox/
API Reference: https://api.highcharts.com/highstock/xAxis
I have a chart with multiple yaxis, 3 data series. I'm trying to duplicate this demo example
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,...
with my own jsfiddle.
What I don't understand is the correlation between "opposite: true" declared in yAxis and "yAxis: 1, 2 ..." declared in series. I've tried countless variations to no avail. Am I missing something simple? Didn't quite understand the docs
any help would be greatly appreciated
Update As per your comments I understood your actual issue. you need to place the series in same order as those yAxis were defined . see the working fiddle here
yAxis: 0,1,2,3 means : in which order your yAxis are to be stacked/put in a order. If yAxis: 0 then it means it will be first series (fir yAxis) in your multiple yAxis series.
While opposite just change the position of labels as stated by #Havor Strand in above comment.
yAxis :0 //in what order yAxis of Series
See this fiddle for stack yAxis multiple seires
and see this fiddle of your code , your points are so close,means data is too much but if you zomm your graph you can see that properly.
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]
I'm trying to use highcharts' spider chart. No problem to load it.
I have a problem in axis ranges. Some data is between 0-100 and some is 1.000.000-10.000.000. By default, highchart makes that min : 0 and max : 10.000.000 and some data's difference doesn't seem.
Could you help please ?
Thanks
You need a logarithmic chart.
yAxis: {
type: 'logarithmic'
}
Before and After