JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p class="text-cener">Plotly Help...</p>
<div class="container-fluid">
   <div class="panel panel-default">
      <div class="panel-heading text-center">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span> Plotly
      </div>
       <div class="panel-body">
         <!-- Plotly -->
         <div id="myDiv" style="width: 400px; height: 400px;">
       </div>
   </div>
</div>

JavaScript

var stacksDiv = document.getElementById("myDiv");
var traces = [
	{x: [1,2,3], y: [3,3,3], fill: 'tozeroy'},
	{x: [1,2,3], y: [2,2,2], fill: 'none'},
	{x: [1,2,3], y: [1,1,1], fill: 'tonexty'}
];
function stackedArea(traces) {
	for(var i=1; i<traces.length; i++) {
		for(var j=0; j<(Math.min(traces[i]['y'].length, traces[i-1]['y'].length)); j++) {
			traces[i]['y'][j] += traces[i-1]['y'][j];
		}
	}
	return traces;
}

Plotly.newPlot(stacksDiv, stackedArea(traces), {title: 'stacked and filled line chart'},{displayModeBar: true});