ElementStacks

by Kesav Telaprolu

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> 
<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

var powerInTheMind = [60, 60, 50, 40, 35, 45, 50, 65, 70, 75];//[52, 61, 45.555235288,52, 61, ]; //[null,8.26793688 ,8.27847082,  9.260882206,  9.631831521 ,10.73818991, 10.68037548],
var marketShare = [50, 55, 50, 45, 45, 50, 50, 55, 55, 60];//[41.764705882, 51.49122807, 51.674208145,41.764705882, 51.49122807 ]; // [null,7.096450406  ,7.331088664  ,7.546442031, 9.302762247 ,9.026320173, 9.369135913]
var diffPimMs = [], diffPM = [];

for(var val= 0; val< powerInTheMind.length; val++){
	if(powerInTheMind[val]>marketShare[val]){
  	diffPimMs.push(powerInTheMind[val] - marketShare[val]);
    diffPM.push(marketShare[val])
  }else if(marketShare[val]>powerInTheMind[val]){
  	diffPimMs.push(marketShare[val]-powerInTheMind[val]);
    diffPM.push(powerInTheMind[val])
  }else{
  	diffPimMs.push(0);
    diffPM.push(powerInTheMind[val])
  }
}
 alert(diffPimMs);
 alert(diffPM);
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'area'
    },
    plotOptions: {
        area: {
            stacking: true,
            lineWidth: 0,
            shadow: false,
            marker: {
                enabled: false
            },
            enableMouseTracking: false,
            showInLegend: false        
        },
        line: {
            zIndex: 5
        }
    },
    series: [{
        type: 'line',
        color: '#555',
        data: powerInTheMind,//[60, 60, 50, 40, 35, 45, 50, 65, 70, 75],
        marker: false
    },{
        type: 'line',
        color: '#55e',
        data: marketShare,//[50, 55, 50, 45, 45, 50, 50, 55, 55, 60],
        dashStyle: 'dash',
        marker: false
    },{
        color: 'orange',
        data: diffPimMs//[10, 5, 0, 5, 10, 5, 0, 10, 15, 15]
    },{
        color: 'rgba(255,255,255,-1)',
        data: diffPM//[50, 55, 50, 40, 35, 45, 50, 55, 55, 60]
    }
    ]
});