JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dygraphs.com/dygraph-combined.js"></script>
<div class="profiles">
<ul class="tabs">
<li><a href="#graphdiv1">Profile 7</a></li>
<li><a href="#graphdiv2">Profile 8</a></li>
</ul>
<div class="tabcontent">
<div id="graphdiv1" class="tab"></div>
<div id="graphdiv2" class="tab"></div>
</div>
</div>
CSS
* {font-family: 'Segoe UI';}
.profiles .tabs {list-style: none; margin: 0 10px; padding: 0;}
.profiles .tabs li {list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; z-index: 1;}
.profiles .tabs li a {text-decoration: none; color: #000; border: 1px solid #ccc; padding: 5px; display: inline-block; border-radius: 5px 5px 0 0; background: #f5f5f5;}
.profiles .tabs li a.active, .tabbable .tabs li a:hover {border-bottom-color: #fff; background: #fff;}
.tabcontent {width: 500px; border: 1px solid #ccc; margin-top: -1px; padding: 10px;}
JavaScript
g1 = new Dygraph(
// containing div
document.getElementById("graphdiv1"),
// CSV or path to a CSV file.
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n"
);
g2 = new Dygraph(
// containing div
document.getElementById("graphdiv2"),
// CSV or path to a CSV file.
"Date,Temperature\n" +
"2008-05-07,80\n" +
"2008-05-08,75\n" +
"2008-05-09,70\n"
);
$(document).ready(function(){
$(".profiles").find(".tab").hide();
$(".profiles").find(".tab").first().show();
$(".profiles").find(".tabs li").first().find("a").addClass("active");
//click handler for tabbing
$(".profiles").find(".tabs").find("a").click(function(){
tab = $(this).attr("href");
$(".profiles").find(".tab").hide();
$(".profiles").find(".tabs").find("a").removeClass("active");
$(tab).show();
$(this).addClass("active");
//start new code
if(tab == "#graphdiv1")
g1.resize();
else
g2.resize();
//end new code
return false;
});
});