JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<select class="dropdown" id="dd">
    <option value="" selected="selected">Choose Timeframe</option>
    <option value="All">All</option>
    <option value="thisQ">This quarter</option>
</select>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

CSS

.hide {
  display: none
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer1", {
  title:{
    text: "Basic Column Chart"
  },
  data: [{				
    dataPoints: [
      { label: "column1", y: 123 },
      { label: "column2", y: 456 },
      { label: "column3", y: 789 }
    ]
  }]
});

var chart_daterange = new CanvasJS.Chart("chartContainer2", {
  title:{
    text: "Basic Column Chart (this quarter)"
  },
  data: [{				
    dataPoints: [
      { label: "column1", y: 11 },
      { label: "column2", y: 22 },
      { label: "column3", y: 33 }
    ]
  }]
});

chart.render(); //MUST RENDER THIS GRAPH DURING PAGE LOADING


$( ".dropdown" ).change(function() {
  var menu_dropdown = document.getElementById("dd");
	var selected = menu_dropdown.options[menu_dropdown.selectedIndex].value;
  if(selected === "thisQ"){
  	$("#chartContainer1").addClass("hide")
    $("#chartContainer2").removeClass("hide")
 		chart_daterange.render();
  }
  else {
  	$("#chartContainer1").removeClass("hide")
  	$("#chartContainer2").addClass("hide")
    
  }
});