Highchart add series
The series is made by differencing the two series percentage change from first point
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
function add() {
var chart = this;
var newseriesdata = [];
newseriesdata.push(0);
for (var x = 1; x < chart.series[0].points.length; x++) {
var diff0 = (chart.series[0].points[x].y - chart.series[0].points[0].y) / chart.series[0].points[0].y;
var diff1 = (chart.series[1].points[x].y - chart.series[1].points[0].y) / chart.series[1].points[0].y;
newseriesdata.push(100 * (diff1 - diff0));
}
chart.addAxis({ // Secondary yAxis
title: {
text: 'Diff %'
},
lineWidth: 2,
lineColor: '#CCC',
plotBands: [{
from: 0,
to: 100,
color: 'rgba(0,255, 0, 0.02)',
label: {
text: 'Uplift'
}
}, {
from: -100,
to: 0,
color: 'rgba(255, 0, 0, 0.02)',
label: {
text: 'Drop'
}
}]
});
chart.addSeries({
name: "Diff",
type: 'spline',
data: newseriesdata,
dashStyle: 'dash',
color: "#000",
yAxis: 3
});
var ext = chart.yAxis[1].getExtremes();
var mx = 0;
mx = (ext.dataMax > -ext.dataMin) ? ext.dataMax : -ext.dataMin;
chart.yAxis[1].setExtremes(-mx, mx);
chart.series[0].hide();
chart.series[1].hide();
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
}
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
events: {
load: add
}
},
title: {
text: 'Sales'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Sales'
},
min: 0
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
spline: {
cpointStart: 1940,
xlineWidth: 3,
xdashStyle: 'dash'
}
},
series: [{
name: 'Test',
type:...