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/
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
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 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.
How can I show an arrow pointing to the middle of y-axis on highcharts as below image:
and this is my y-axis:
yAxis: [{
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: 'Your starting point',
style:{
font: '6px arial'
}
},
min: 0,
max: 1000
}]
You could do this by
1) using an image, or an icon font, in your axis title
2) using the Highcharts renderer function to draw the arrow
reference:
http://api.highcharts.com/highcharts#Renderer
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.