JSFiddle - React, Tailwind, and code Playground

Current Trends

by Dug Sohn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<br/>
<br/>

<div class="container">
    <div class="row">
      <div class="col-md-3 hidden-xs  hidden-sm">
      </div>
      <div class="col-sm-12 col-md-9 col-md-offset-3" style="margin-bottom: 10px;">
  <div class="row">
	    <div class="col-xs-3 col-sm-2">
			  <div class="ui-graph-controller">
				<button class="btn btn-sm btn-block btn-default" id="yearly">
				   Yearly
				</button>
							  <div class="ui-graph-controller-spacer">
								&nbsp;
								</div>

							<button class="btn btn-sm btn-block btn-default" id="monthly">
				   Monthly
				</button>
						  <div class="ui-graph-controller-spacer">
							&nbsp;
								</div>
							<button class="btn btn-sm btn-block btn-primary" id="daily">
				   Daily
				</button>
				</div>
			</div>
    <div class="col-xs-9 col-sm-10">
      <h2 class="ui-graph-type">

        Daily Energy Usage </h2>
				
				<div id="canvasWrapper">
				
				
				<canvas id="myChart" width="400" height="200"></canvas>
				
								<canvas id="myChart2" width="400" height="200" style="display:none" ></canvas>
																<canvas id="myChart3"...

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');

body {
	font-family: Open Sans,Segoe UI,Tahoma,sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	background-color: #fff;
	color: #555555;
}


$account-base:  rgb(6, 81, 128) !default;
$plans-base:    rgb(254, 162, 32) !default;
$payment-base:  rgb(46, 177, 52)      !default;
$control-base:  rgb(27, 141, 205)     !default;
$dark-base:     rgb(10, 10, 10)       !default;
$alpha: 0.1;
$alpha5: 0.5;


a, a:link, a:visited, a:active {
  text-decoration: none;
}

.btn {
  border-radius: 0;
  text-transform: uppercase;
}

.btn:disabled {
  cursor: pointer !important;
}


.no-padding {
  padding: 0;
}

.fa-wh {
  color: #fff;
}

.btn-blank {
  background: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
  outline: none !important;
}

[hidden] {
  display: none !important;
}

.btn-blank:active {
  box-shadow: none !important;
  outline: none !important;
}

hr.breaker {
  border-top: 2px solid black;
}

.fa-green {
  color: $payment-base;
}

.ui-graph-type {
	color: $payment-base;
	text-align:center;
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
	margin-top: 0;
}

.ui-graph-controller {
	height: 300px;
	width: 55px;

		.btn-sm {
			font-family: Oswald, sans-serif;
			text-transform: uppercase;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			padding-left: 5px;

		&.btn-default {
			border: 0px solid rgba($dark-base, $alpha5);
			color: #ffffff;
			background: #e0e0e0; /* Old browsers */
			background: -moz-linear-gradient(top, #e0e0e0 0%, #b2b2b2 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #e0e0e0 0%, #b2b2b2 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #e0e0e0 0%, #b2b2b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter:...

JavaScript

$('.ui-graph-controller').find('.btn').click( function (){
	var $this = $(this);
	$this.parent().find('.btn-sm').removeClass('btn-primary').addClass('btn-default');
	$this.addClass('btn-primary');
	$this.removeClass('btn-default');
	
	if ( $this.next().hasClass('ui-graph-controller-spacer'))
	{
	 $this.next().addClass('ui-active');
	 $this.prev().removeClass('ui-active'); 
	}
	else {
	 $('.ui-graph-controller-spacer').removeClass('ui-active');
	
	}
	
	
});

$('.ui-button-slider').find('.btn').click( function (){
	var $this = $(this);
	$this.parent().find('.btn').removeClass('btn-primary').addClass('btn-link');
	$this.addClass('btn-primary');
	$this.removeClass('btn-link');
});

var canvas = document.getElementById('myChart');

var data = {
    labels: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
		
    datasets: [
        {
            label: 0,
            backgroundColor: "rgba(10, 10, 10, 0.1)",
            borderColor: "rgba(10, 10, 10, 0.3)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(46, 177, 52,0.9)",
            hoverBorderColor: "rgba(46, 177, 52,1)",
            data: [65, 59, 40, 81, 56, 55, 40],
        }
    ],
};
var option = {
animation: {
				duration:400
},
legend: {
            display: false
  },
    tooltips: {
         enabled: false
},
 scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ]
    },
	scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }	
		

};


var myBarChart = Chart.Bar(canvas,{
	data:data,
  options:option,
	
});

var myBarChart2 = Chart.Bar(canvas,{
	data:data,
  options:option,
	
});


var data2 = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
		
    datasets: [
        {
            label: 0,
            backgroundColor: "rgba(10, 10, 10, 0.1)",
            borderColor: "rgba(10, 10, 10, 0.3)",
            borderWidth: 1,
           ...