JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githack.com/nnnick/Chart.js/master/Chart.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 10px">
  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#TAB_A">TAB_A</a>
    </li>
    <li>
      <a data-toggle="tab" href="#TAB_B">TAB_B</a>
    </li>
  </ul>

  <div class="tab-content">

    <div class="tab-pane fade in active" id="TAB_A">
      <div class="row">
        <div class="col-xs-12" style="padding-top: 10px">

          <div class="dropdown dropdown-TAB_A">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu-TAB_A" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">SUB_1<span class="caret"></span></button>
            <ul class="dropdown-menu menu-TAB_A" aria-labelledby="dropdownMenu-TAB_A">
              <li><a href="#sub-tab-TAB_A-SUB_1" role="button" data-value="SUB_1">SUB_1</a></li>
              <li><a href="#sub-tab-TAB_A-SUB_2" role="button" data-value="SUB_2">SUB_2</a></li>
            </ul>
          </div>

          <div class="tab-content">
            <div class="tab-pane fade in active" id="sub-tab-TAB_A-SUB_1">
              <canvas id="st-figure-TAB_A-SUB_1" width="420" height="120"></canvas>
            </div>
            <div class="tab-pane fade" id="sub-tab-TAB_A-SUB_2">
              <canvas id="st-figure-TAB_A-SUB_2" width="420" height="120"></canvas>
            </div>
          </div>

        </div>
      </div>
    </div>


    <div class="tab-pane fade" id="TAB_B">
      <div class="row">
        <div class="col-xs-12" style="padding-top: 10px">

          <div class="dropdown dropdown-TAB_B">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu-TAB_B" data-toggle="dropdown"...

JavaScript

Chart.defaults.global.responsive = true;

 //--------------------------------
//   D R O P D O W N   S E T U P
$(function () {
    $('.menu-TAB_A a').click(function (e) {
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
        $(this).parent().removeClass('active');
    })
});
$(".menu-TAB_A li a").click(function(){
    $(this).parents(".dropdown-TAB_A").find('.btn').html($(this).text() + ' <span class="caret"></span>');
    $(this).parents(".dropdown-TAB_A").find('.btn').val($(this).data('value'));
});

$(function() {
    $('.menu-TAB_B a').click(function(e) {
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
        $(this).parent().removeClass('active');
    })
});
$(".menu-TAB_B li a").click(function() {
    $(this).parents(".dropdown-TAB_B").find('.btn').html($(this).text() + ' <span class="caret"></span>');
    $(this).parents(".dropdown-TAB_B").find('.btn').val($(this).data('value'));
});



 //--------------------------
//   D A T A   S E T U P

var chart_settings = {
    datasetStrokeWidth: 4
}

var data_TAB_A_SUB_1 = {
    labels: ["A:1", "A:1", "A:1", "A:1", "A:1", "A:1", "A:1"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var...