JSFiddle - React, Tailwind, and code Playground

Config Windows

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Setup your Bar Chart</h4>
      </div>
      <div class="modal-body clearfix">
        <div class="row" style="background:#efefef; margin:-20px -20px 20px; padding:20px 8px 0;">
          <div class="col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="ui-chart">
                  <p class="ui-chart-label-left">Y</p>
                  <p class="ui-chart-label-bottom">X</p>
                  <div style="height: 40%;">
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height: 80%;">
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height: 70%;">
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height: 60%;">
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height: 90%;">
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height: 100%;">
               ...

SCSS

.ui-chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  margin: 0 20px;
  width:13px;
  display: inline-block;
}
.ui-chart {
  padding-left: 3px;
  height: 230px;
  padding: 20px 20px 50px 40px;
  position: relative;
  hr {
    position: absolute;
    height: 1px;
    background: #efefef;
    left: 0;
    right: 0;
    z-index:0;
    border:none;
  }
}               
.ui-chart div {
  position:relative;
  z-index:1;
}
.ui-chart .ui-chart-label {
  position: absolute;
  background: lightgray;
  height: 10px;
  width: 33px;
  bottom: -23px;
  left:-10px;
  transition: .3s ease-in-out;
}
.ui-chart.angle .ui-chart-label {
  transform: rotate(-45deg);
  left:-18px;
}
.ui-chart.vert .ui-chart-label {
  transform: rotate(-90deg);

}
.ui-chart.horizontal .ui-chart-label {}
.ui-chart.angled .ui-chart-label {}
.ui-chart.vertical .ui-chart-label {}

.form-group {
  margin:0 0 10px;
}
.ui-chart-label-left,
.ui-chart-label-bottom{
  position:absolute;
   text-align:center;
  color:lightGray;
  font-weight:bold;
}
.ui-chart-label-bottom {
  bottom:-10px;
  left:0;
  right:0;
 
}
.ui-chart-label-left {
  bottom: 99px;
  left: -22px;
  transform: rotate(-90deg);
}

.control-label {
  text-align:left !important;
}

JavaScript

var $btnLH = $(".btnLH"),
    $btnLA = $(".btnLA"),
    $btnLV = $(".btnLV"),
    $chart = $(".ui-chart"),
    $chartLL = $('.ui-chart-label-left'),
    $chartLB = $('.ui-chart-label-bottom'),
    $inputLL = $('.inputLL'),
    $inputLB = $('.inputLB'),
    resetChart = function() {
      $chart
        .removeClass('angle')
        .removeClass('vert');
    },
    resetLabelBtns = function() {
      $btnLH.removeClass('active');
      $btnLA.removeClass('active');
      $btnLV.removeClass('active');
      $(this).addClass('active');
    },
    setupLabels = function(e) { 
      switch(e) {
      case 'Horizontal':
          resetLabelBtns();
          resetChart();
          $btnLH.addClass('active');
          break;
      case 'Angled':
          resetLabelBtns();
          resetChart();
          $chart.addClass('angle');
          $btnLA.addClass('active');
          break
      case 'Vertical':
          resetLabelBtns();
          resetChart();
          $chart.addClass('vert');
          $btnLV.addClass('active');
          break;
      default:
    
      } 
    };
 
$btnLH.on('click', function() {
  setupLabels('Horizontal');
  event.preventDefault();
});
$btnLA.on('click', function() {
  setupLabels('Angled');
  event.preventDefault();
});
$btnLV.on('click', function() {
  setupLabels('Vertical');
  event.preventDefault();
});
$inputLB.keyup(function() {
   var $v = $(this).val();
   $chartLB.text($v);
});
$inputLL.keyup(function() {
   var $v = $(this).val();
   $chartLL.text($v);
});