JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
  <div class="table">
    <h2 class="table-title" contenteditable="true">販売実績</h2>
    <table>
    <tr class="header">
      <th contenteditable=true>年</th>
      <th contenteditable=true>りんご</th>
      <th contenteditable=true>なし</th>
      <th contenteditable=true>みかん</th>
      <th contenteditable=true>もも</th>
    </tr>
    <tr>
      <td contenteditable=true>2010年</td>
      <td contenteditable=true>2</td>
      <td contenteditable=true>31</td>
      <td contenteditable=true>24</td>
      <td contenteditable=true>51</td>
    </tr>
    <tr>
      <td contenteditable=true>2011年</td>
      <td contenteditable=true>36</td>
      <td contenteditable=true>21</td>
      <td contenteditable=true>47</td>
      <td contenteditable=true>109</td>
    </tr>
    <tr>
      <td contenteditable=true>2012年</td>
      <td contenteditable=true>56</td>
      <td contenteditable=true>9</td>
      <td contenteditable=true>33</td>
      <td contenteditable=true>18</td>
    </tr>
    <tr>
      <td contenteditable=true>2013年</td>
      <td contenteditable=true>90</td>
      <td contenteditable=true>55</td>
      <td contenteditable=true>71</td>
      <td contenteditable=true>12</td>
    </tr>
    <tr>
      <td contenteditable=true>2014年</td>
      <td contenteditable=true>36</td>
      <td contenteditable=true>92</td>
      <td contenteditable=true>77</td>
      <td contenteditable=true>61</td>
    </tr>
  </table>
  </div>
</div>

<div class="right">
  <h3 class="title"></h3>
  
  <div class="chart">
 <div class="x-axis"></div>
  </div>
  <div class="titles">

  </div>
  
  <div class="legend">

  </div>

 
</div>

CSS

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  padding: 30px 0;
  text-align: center;
}
.left,
.right {
  position: relative;
  float: left;
  width: 50%;
  min-width: 600px;
  margin: auto;
  padding: 20px;
}
.chart,
.legend,
.titles {
  margin: auto;
}
.table {
  margin: 50px auto;
}
.table table {
  width: 100%;
}
.table h2 {
  text-align: left;
}
.chart {
  margin-top: -60px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  height: 450px;
  width: 300px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.bar {
  background: #66C0CC;
  margin-top: 10px;
  /*animation: height 0.8s ease;*/
  padding: 10px;
}
.x-axis {
  margin-top: -30px;
  padding-bottom: 10px;
}
.legend {
  clear: both;
  color: #66C0CC;
  width: 450px;
}
.legend div {
  float: left;
  margin-left: 10px;
}
.titles {
  clear: both;
  width: 450px;
  margin-top: -60px;
}
.titles div {
  float: left;
  margin-left: 10px;
}
tr {
  padding: 5px;
}
tr td:first-of-type {
  background: #ddd;
}
th {
  border: 1px solid grey;
  padding: 5px 20px;
  background: #ddd;
}
td {
  border: 1px solid grey;
  padding: 5px 20px;
  cursor: pointer;
}
@-webkit-keyframes height {
  0% {
    width: 0;
  }
}
@keyframes height {
  0% {
    width: 0;
  }
}

JavaScript

var vis = function(e) {
  var count = $(e).children('td').not(':first-of-type').length;
  var width = $('.chart').height();
  var barwidth = (width/count)-10;
  var heighest = 0;
  var chartTitle = $('th:first-of-type').html();
  var tableTitle = $('.table-title').html();
  var chartTitleVal = $(e).children('td:first-of-type').html();
  $('.chart').empty();
  $('.legend').empty();
  $('.titles').empty();
  $('.title').empty();
  $('.x-axis').empty();
  $('.title').html(chartTitleVal);
  $('.chart').prepend('<div class="x-axis">'+tableTitle+'</div>');
  $('th').not(':first-of-type').each(function(){
    var title = $(this).html();
    $('.titles').append('<div style="width:'+barwidth+'px;">'+title+'</div>');
  });
  $(e).children('td').not(':first-of-type').each(function(){ 
    var contents = $(this).html();
    var value = parseInt(contents);
    if( value > heighest){
      heighest = value
    }
  });
  
  $(e).children('td').not(':first-of-type').each(function(){
    var contents = $(this).html();
    var value = parseInt(contents);
    var barheight = (value/heighest)*100;
    $('.chart').append('<div class="bar" style="width:'+barheight+'%; height:'+barwidth+'px;"></div>');
    $('.legend').append('<div style="width:'+barwidth+'px;">'+value+'</div>');
  });
}

$('tr').not('.header').on('click', function(){
  var x = $(this);
 x.css({'background':'#E2EBC2'}).addClass('selected').siblings().removeClass('selected').css({'background':'#FFFFFF'});
 vis(x);
});


$(function(){
  var x = $('tr').not('.header').first(); x.css({'background':'#E2EBC2'}).addClass('selected').siblings().css({'background':'#FFFFFF'});
  vis(x);
});

$('td').on('keyup paste input', function(){
  var x = $(this).parent();
  vis(x);
});

$('th').on('keyup paste input', function(){
  var x = $('.selected');
  vis(x);
});

$('.table-title').on('keyup paste input', function(){
  var x = $('.selected');
  vis(x);
});