creating MACD on seconadry yaxis in highchart - javascript

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

Highcharts add padding to yAxis line numbers

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

What should I do to make the x-axis of a graph bold with Highchart?

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]
}]
});

Highcharts plotLines with multiple xAxis and yAxis

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 add an arrow pointing to the y-axis on highcharts

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 two Y Axis in a highstock chart from highcharts one on the left and another on the right?

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.

Categories