i need to create red and green area along with line series.
http://esbolsa.com/blog/wp-content/uploads/2012/12/Commodity-Channel-Index-Fortaleza.png
i am using following code, which works fine for showing red(below -100).how can i specify another threshold(+100)?
chart.addSeries({
name: name + "_series",
id: name + "_series",
type: 'area',
data: cciData,
yAxis: name + '_axis',
showInLegend: false,
color: '#2f7ed8',
negativeColor:'red',
threshold:-100
},false);
The only way I have seen to do this is to create 2 series that are identical except for the thresholds and negativeColor.
Unfortunately in Highcharts you can set only single threshold, but you can use additional serie i.e with green areas.
Related
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
Is there any way to show the summation of area charts value in highcharts without using line chart? I would like to know any other alternatives.
You can use area series with stacking: 'normal' and set lineWidth and lineColor for the series at the top.
series: [{
lineWidth: 2,
lineColor: 'red',
...
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/sft7bu8r/
API Reference: https://api.highcharts.com/highcharts/series.area.lineColor
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.
when i add multiple series in single chart in highstock area chart,
it'll display only first series in navigator panel.
please refer fiddle
You need to use series oejct in navigator and place all points from first and second series.
http://api.highcharts.com/highstock#navigator.series
Second solution is using a addSeries for navigator like here: http://jsfiddle.net/6fFwM/
window.chart.addSeries({
name : "",
xAxis: 0,
yAxis: 1,
type: "line",
enableMouseTracking: false,
data : new_data,
showInLegend:false
});
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
}]