JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="tabs">
<a href="#" data-tab="1" class="tab active">line</a>
<a href="#" data-tab="2" class="tab">pie</a>
<a href="#" data-tab="3" class="tab">pie2</a>
    <div data-content='1' class='tabcontent active'>
        <div id="chartContainer" style="height: 300px;direction:ltr;"></div>
    </div>
    <div data-content='2' class='tabcontent'>
        <div id="piechart1" style="width:100%!important;height: 500px; direction:ltr;"></div>
    </div>
    <div data-content='3' class='tabcontent'>
        <div id="chart2" style="width:100%;height: 500px; direction:ltr;"></div>
    </div>
    
</div>

CSS

.tab {
text-decoration:none;	
border-radius: 4px 4px 0 0;
font-family: tahoma;
font-size: 9pt;
cursor: pointer;
display: inline;
margin: 10px 1px 1px 4px;
float: right;
padding: 5px 9px;
background: #E4E4E4;
border: 1px solid #CCC;
z-index: 1;
white-space: nowrap;
position: relative;
top: 1px;
text-shadow: 0 1px 0 white;
}
.tabs a{
text-decoration:none;	
color:#555555!important;
text-shadow: 0 1px 0 white;
}
.tab.active{
background: #FFF;
border-radius: 4px 4px 0 0;
border: 1px solid #B9B9B9;
border-bottom: 0px;
z-index: 3;
padding: 5px 9px;
margin: 10px 0px 0px 4px;
top: 1px;
}
.tab.active:hover {
	background: #fff;
	color:#222;
	text-decoration:none;
}
.tab:hover {
	background: #F2F2F2;
	color:#222;
	text-decoration:none;
}
.tabcontent {
   display:none;
	border-top:5px solid #f8f8f8;
    clear:both;	
}
.tabcontent.active {
    display:block!important;
	padding:10px!important;
	background:#fff;
	border: 1px solid #B9B9B9;
	border-radius: 4px 0 4px 4px;
	z-index: 2;
position: relative;
top: -2px;
color: #000;
font-family: tahoma;
font-size: 9pt;
margin:15px 0;
}

JavaScript

$('[data-tab]').on('click', function (e) {
		 
        $(this)
          .addClass('active')		  
          .siblings('[data-tab]')
          .removeClass('active')
          .siblings('[data-content=' + $(this).data('tab') + ']')
          .addClass('active')
          .siblings('[data-content]')
          .removeClass('active');
        e.preventDefault();
      });
      


		var chart = new CanvasJS.Chart("chartContainer",
		{

			title:{
				text: "line",
				fontFamily: "tahoma",
				fontSize: 15
			},
            animationEnabled: true,
			axisX:{
				gridColor: "Silver",
				tickColor: "silver",
				interval: 1,
				labelAngle: -70

			},                        
             toolTip:{
                shared:true,
				fontStyle: "normal",
				fontFamily: "tahoma"
              },
			theme: "theme2",
			axisY: {
				gridColor: "Silver",
				tickColor: "silver"
				
			},
			data: [
			{        
				type: "area",
				showInLegend: true,
				lineThickness: 2,
				name: "stats",
				markerType: "square",
				color: "#F08080",
				dataPoints: [
				{ x: new Date(2010,0,3), y: 650 },
				{ x: new Date(2010,0,5), y: 700 },
				{ x: new Date(2010,0,7), y: 710 },
				{ x: new Date(2010,0,9), y: 658 },
				{ x: new Date(2010,0,11), y: 734 },
				{ x: new Date(2010,0,13), y: 963 },
				{ x: new Date(2010,0,15), y: 847 },
				{ x: new Date(2010,0,17), y: 853 },
				{ x: new Date(2010,0,19), y: 869 },
				{ x: new Date(2010,0,21), y: 943 },
				{ x: new Date(2010,0,23), y: 970 }
				]
				
			},
			{        
				type: "area",
				showInLegend: true,
				name: "hits",
				color: "#20B2AA",
				lineThickness: 2,
				dataPoints: [
				{ x: new Date(2010,0,3), y: 510 },
				{ x: new Date(2010,0,5), y: 560 },
				{ x: new Date(2010,0,7), y: 540 },
				{ x: new Date(2010,0,9), y: 558 },
				{ x: new Date(2010,0,11), y: 544 },
				{ x: new Date(2010,0,13), y: 693 },
				{ x: new Date(2010,0,15), y: 657 },
				{ x: new Date(2010,0,17), y: 663 },
				{ x: new Date(2010,0,19), y:...