JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<button class="tablinks" onclick="display(event,'test1');" id="defaultOpen" >tab1</button>
<button class="tablinks" onclick="display(event,'test2');" >tab2</button>

<div id="test1" class="tabcontent">
  <p>hello</p>
  <div id="chartContainer1" style="height: 360px; width: 100%;"></div>
</div> 

<div id="test2" class="tabcontent" style="display:none;">
  <p>Hello world</p>
  <p>vvv Is any chart displayed below? vvv</p>
  <div id="chartContainer2" style="height: 360px; width: 100%;"></div>
  <p>^^^ Is any chart displayed above? ^^^</p>
</div> 

<script>
  var chart1,chart2;

  function display(evt, tabID) {
    var i, tabcontent, tablinks;
    var text = document.getElementById(tabID);
		
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
      
    }
    document.getElementById(tabID).style.display = "block";
    evt.currentTarget.className += " active";
    //call the respective chart's render method
    if(tabID.replace( /^\D+/g, '') == 1) {
   		chart1.render();
    } else {
    	chart2.render();
    }
  }
</script>

JavaScript

chart1 = new CanvasJS.Chart("chartContainer1", {
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }					
  ]
});

chart1.render();


chart2 = new CanvasJS.Chart("chartContainer2", {
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }					
  ]
});

chart2.render();