PivotPoints R & S alternate colors in Highstock - highcharts

Question

Using PivotPoint in HighStock and would like to have the resistance(R1,R2,R3) in a different color from the support(S1,S2,S3) lines.
Considered using threshold and negative colors but not sure how to programatically add the threshold to match the P line.
{
type: 'pivotpoints',
linkedTo: 'MV1',
zIndex: 0,
lineWidth: 1,
color:'#707073',
negativeColor: 'red',
threshold: 180,
visible: false,
clip: true,
//color: red,
dataLabels: {
overflow: 'none',
crop: false,
y: 4,
style: {
fontSize: 9
}
},
params: {
//period: 90
}
}
Clearly this would not work, as it needs to adapt as the data changes.
The end result if possible

Answer 1

There is no option to have a dynamic threshold that would follow the P line across different values for different points when using available API.
Instead you could create two pivotpoint indicators that will generate some lines in one color - one color for each indicator. To prevent overlapping you could supply custom algorithms for calculating the lines by setting nulls for all lines that shouldn't be visible for each of the indicators. P line (middle one) must be calculated for every algorithm to have dataLabels displayed correctly.
Here's a demo (and a copy in JSFiddle):
(function(H){
H.seriesTypes.pivotpoints.prototype['std-topPlacement'] = function (values) {
var diff = values[1] - values[2],
avg = [
null,
null,
values[0] + diff,
values[0] * 2 - values[2],
values[0], // middle
null, //values[0] * 2 - values[1],
null, //values[0] - diff,
null,
null
];
return avg;
};
H.seriesTypes.pivotpoints.prototype['std-bottomPlacement'] = function (values) {
var diff = values[1] - values[2],
avg = [
null,
null,
null, //values[0] + diff,
null, //values[0] * 2 - values[2],
values[0], // middle
values[0] * 2 - values[1],
values[0] - diff,
null,
null
];
return avg;
};
}(Highcharts))
$.getJSON('https://www.highcharts.com/samples/data/aapl-ohlc.json', function (data) {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
type: 'ohlc',
id: 'aapl',
name: 'AAPL Stock Price',
data: data,
zIndex: 1
}, {
showInLegend: false,
type: 'pivotpoints',
linkedTo: 'aapl',
zIndex: 0,
lineWidth: 3,
color: 'red',
params: {
algorithm: 'std-bottom'
},
dataLabels: {
overflow: 'none',
crop: false,
y: 4,
style: {
fontSize: 9
}
}
}, {
type: 'pivotpoints',
linkedTo: 'aapl',
zIndex: 0,
lineWidth: 3,
color: 'black',
params: {
algorithm: 'std-top'
},
dataLabels: {
overflow: 'none',
crop: false,
y: 4,
style: {
fontSize: 9
}
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/pivot-points.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>