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 Stacked 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">Sales</p>
                  <p class="ui-chart-label-bottom">Team Members</p>
                  <div style="height:60%;">
                    <span class="ui-chart-bar-top" style="height:40%"></span>
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height:89%;">
                    <span class="ui-chart-bar-top" style="height:46%"></span>
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height:40%;">
                    <span class="ui-chart-bar-top" style="height:30%"></span>
                    <span class="ui-chart-label"></span>
                  </div>
                  <div style="height:90%;">
                 ...

SCSS

.ui-chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  margin: 0 20px;
  width:13px;
  height:100%;
  display: inline-block;
}
.ui-chart-bar-top{
  display:block;
  width:13px;
  background:darkblue;
}
.ui-chart {
  padding-left: 3px;
  height: 230px;
  padding: 20px 140px 50px 40px;
  position: relative;
  hr {
    position: absolute;
    height: 1px;
    background: #efefef;
    left: 0;
    right: 140px;
    z-index:0;
    border:none;
  }
}       
.ui-chart-legend {
  position:absolute;
  right:10px;
  height:190px;
  width:100px;

  > span {
    display:block;
    margin-bottom:4px;
  }
  .ui-chart-legend-color {
    height:15px;
    width:15px;
    background:blue;
    display:inline-block;
  }
  .ui-chart-legend-label {
    height:15px;
    width:70px;
    background:lightGray;
    display:inline-block;
  }
}
.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);
});