JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.chartjs.org/assets/Chart.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li role="presentation" class="active"><a href="#month" aria-controls="month" role="tab" data-toggle="tab">Month</a>
  </li>
  <li role="presentation"><a href="#year" aria-controls="year" role="tab" data-toggle="tab">Year</a>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane" id="home">
    <canvas id="vchart" width="1140" height="300"></canvas>
  </div>

  <div role="tabpanel" class="tab-pane active" id="month">
    Some data 1
  </div>

  <div role="tabpanel" class="tab-pane" id="year">
    Some data 2
  </div>
</div>

JavaScript

var vChartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  datasets: [{
    label: "Visitors",
    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: [40, 50, 60, 90, 100, 155, 180, 190, 200, 500, 170, 200]
  }, {
    label: "Unique Visitors",
    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: [20, 25, 30, 45, 50, 70, 100, 80, 60, 80, 70, 100]
  }]
}
var vChart = document.getElementById('vchart').getContext('2d');
var myLineChart = new Chart(vChart).Line(vChartData);

$('#home').on('shown.bs.tab', function(e) {
  $('#vchart').css({
    'width': '1140px',
    'height': '300px'
  });
  myLineChart.destroy();
  myLineChart = new Chart(vChart).Line(vChartData);
  $('document').resize();
});