JSFiddle - React, Tailwind, and code Playground
by Fusher
HTML
<div id="container" style="height:300px"></div>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
JavaScript
var data1 = [5, 25, 50, 120, 150, 200, 426, 660];
var data2 = [660,660,660,660,660,660,660,660];
for(var i = 0; i<data2.length;i++){
data2[i]-=data1[i];
}
console.log(data2);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'strange'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
'thebulletin.metapress.com</a>'
},
xAxis: {
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'values'
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
},
max:660,
endOnTick: false,
startOnTick: false
},
tooltip: {
formatter: function() {
return this.series.name +' produced <b>'+
Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666',
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}
},
series: [{
name: 'showed chart',
data: data1
},{
name: 'true chart',
data: data2,
fillOpacity: 0.0001,
...