I have a chart with multiple xAxis and yAxis. I want to have multiple plotLines on the xAxis, but each plotLine doesn't stay on it's course. Here's the fiddle. Click on All to see what I mean.
The plotLine on the first axis goes to the second axis as well. How could I stop it?
There is a solution suggested in the HighCharts issue tracker which involves defining the related xAxis on each yAxis. So a plotline defined on a particular xAxis will use the top and height of the related yAxis to draw the plotline only in the correct area.
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
xAxis: 0,
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
xAxis: 1,
}, {
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true,
xAxis: 1,
}]
Updated Fiddle with each plotline only on its corresponding pane.
Note that the ability to define related axes appears to be undocumented in the API.
Related
https://jsfiddle.net/nye5g9s3/
I have the following chart with a few yAxis and I don't want a title for them.
It does not look good because of the missing padding between the yAxis line to the numbers
How can I fix it?
How can I add padding, and margin to that?
chart.addAxis({ // Secondary yAxis
id: 'rainfall-axis',
title: {
text: ''
},
lineWidth: 2,
lineColor: '#08F',
opposite: true,
labelsFormat: {
primaryColor: '#F33',
secondaryColor: '#F33',
x: 1,
y: 1,
align: 'left',
},
});
You can control the spacings by margin and labels.x properties:
chart.addAxis({ // Secondary yAxis
...,
margin: 5,
labels: {
x: 0
}
});
Live demo: https://jsfiddle.net/BlackLabel/wcdfjqsb/
API Reference:
https://api.highcharts.com/highcharts/yAxis.labels.x
https://api.highcharts.com/highcharts/yAxis.margin
Does highcharts have an option to have a multi Y axis diverged like in the below attached screenshot?
P.S Any other option apart having two highchart types of charts, and rendering them next to each other.
You can define yAxis property as an array of objects. For example:
series: [{
...
}, {
yAxis: 1,
...
}],
yAxis: [{
height: '80%',
...
}, {
offset: 0,
top: '80%',
height: '20%',
...
}]
Live demo: http://jsfiddle.net/BlackLabel/p2bf7tLn/
API Reference: https://api.highcharts.com/highcharts/yAxis
Note that the x-axis here means the horizontal line which corresponds the 0 value, i.e. the desired result is:
However, I can only achieve this.
This is the relevant piece of code:
xAxis: {
lineColor: 'black',
lineWidth: 2
},
How to decide which horizontal line to be bolded?
You can draw a line on the Y-axis at position 0. This causes for a horizontal line to be drawn at value '0'. This is done by the highcharts option plotLines
Highcharts.chart('container', {
yAxis: {
min: -1,
max: 4,
plotLines: [{
value: 0,
color: 'black',
width: 2,
zIndex: 3
}],
},
series: [{
data: [1, 2, 3]
}]
});
I'm adding a secondary yaxis using
chart.addAxis({ // Secondary yAxis
title: {
text: 'MACD'
},
top: 360,
height: 87,
offset: 0,
lineWidth: 1,
});
to create MACD by using this
chart.addSeries(
{
color: '#F20',
name: 'MACD',
linkedTo: 'primary',
showInLegend: true,
type: 'trendline',
algorithm: 'MACD',
yAxis: 1,
periods:15
});
The MACD was drawn but not in the secondary axis...its was drawn in the baseline.
I created a jsfiddle for the same please check http://jsfiddle.net/das_palash89/EgYFV/
You should use second index of yAxis yAxis:2, because 1, it is the navigator yAxis.
http://jsfiddle.net/EgYFV/1/
Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks
A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.