If I change the y-axis type to logarithmic on the meteogram example of the highcharts demo, the temperature line stops being visible. Is this a bug or is there something in the code preventing it from displaying when in logarithmic mode?
The only change I made to the demo was to add type: 'logarithmic' on line 492:
yAxis: [{ // temperature axis
type: 'logarithmic',
See this jsFiddle.
Any ideas? Thanks!
It seems like this is a (solvable and unknown?) bug indeed.
Somehow a logarithmic y-axis is not compatible with a negativeColor attribute.
Go to line 594 of your meteogram example and remove the negativeColor: '#48AFE8' attribute:
592| zIndex: 1,
593| color: '#FF3333',
594| negativeColor: '#48AFE8' << remove this line
Now the logarithmic plot will work as expected. See DEMO.
I have also set the y-axis min, max properties and both startOnTick and endOnTick to false to make the graph look a bit better. I hope this helps you out :)
Update 1: This bug has now been reported to GitHub
Update 2: Highcharts developers have solved this bug as of June 3, 2015 in commit fde07c2
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 have a highcharts column chart with an x-axis for an entire year. Its type is datetime and its min/max is from 2014-01-01 to 2014-12-31.
Why is the tick/label for Jan 2015 displayed?
Full source at http://jsfiddle.net/nkjm2691/1/
I tried a number of things like setting the end date to Date.UTC(2014, 11, 31, 23, 59, 59) and experimenting with tickInterval. What I need eventually is a monthly tick (i.e. irregular interval) and the labels centered between the ticks. Using some voodoo logic to calculate the offset only ever works if the chart has a fixed width.
Quite surprisingly doing more or less the same with a chart of type areaspline works fine: http://jsfiddle.net/fm86v8fe/
I also checked a number of related SO questions like Is there a reliable way to have a 1 month auto generated tick interval with high charts? and HighCharts xAxis - tickInterval for month but they don't solve my problem.
You posted this JSFiddle. Just changing from type: 'column' to type: 'line' removes he label. Why?
That is because any chart type that is "column like" has a pointRange. This is defined differently depending on context, but for your datetime x-axis it is (API):
On linear and datetime axes, the range will be computed as the distance between the two closest data points.
It is this pointRange that causes your column to have their specific width. They have a span across the x-axis. As you can see on your chart each column has a range of a week, not just a single millisecond (which is the case for line-charts, and similar).
From my understanding this causes Highcharts to take some extra space to somehow better suit the point range of the chart points.
There are several things you can do. You can manually override the pointRange like this:
series: { pointRange: 1, data: ... }
This will make each column only 1 millisecond thick, and removes the label. You can fix the width with pointWidth:
series: { pointRange: 1, pointWidth: 10, data: ... }
Note however that this is static, so if columns suddenly get too close they'll start overlapping. Here's a JSFiddle demonstration.
Also you could do nothing and just set the max to be far enough back in time for pointRange not to include too much extra space, like this:
xAxis: { min : Date.UTC(2014, 0, 1), max : Date.UTC(2014, 11, 28) }
Note here that Highcharts seems to add more space once you go over to the 29th of December. Unfortunately I'm not exactly sure how this spacing is chosen (the 29th is a Monday..?).
Sebastian suggested some solutions that don't involve this type of manipulation at all. The chosen "solution" depends on the other requirements and desired behavior of the chart.
Set a max date as 1.12, remove time and set maxPadding as 0 value. In case when you use a tiem (23:59:59) tick Interval cannot be calculated properly. Second solution is using tickPositioner
https://jsfiddle.net/nkjm2691/50/
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.
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
}]