JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="graph">
  <ul>
    <li>
      <div data-percent="80%" style="height: 80%; background: yellow;"></div>
      <span>2010</span>
    </li>
    <li>
      <div data-percent="20%" style="height: 20%; background: red;"></div>
      <span>02</span>
    </li>
    <li>
      <div data-percent="70%" style="height: 70%; background: orange;"></div>
      <span>06</span>
    </li>
    <li>
      <div data-percent="100%" style="height: 100%; background: lightgreen;"></div>
      <span>08</span>
    </li>
  </ul>
  <div class="legend">
    Рентабельность активов: <span></span>
  </div>
</div>

CSS

.graph ul {
  list-style-type: none;
  padding: 2em;
}
.graph li {
  display: inline-block;
  width: 25px;
  color: gray;
  height: 200px;
  position: relative;
}
.graph li div {
  position: absolute;
  width: 25px;
  bottom: 0;
}
.graph li span {
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  width: 25px;
  text-align: center;
}
.graph li:hover span {
  background: orange;
  color: white;
}
.graph .legend {
  font-weight: bold;
  color: gray;
}
.graph .legend span {
  padding: 0 .5em;
}

JavaScript

$('.graph ul').on('mouseover', 'li', function(){
  var div = $(this).find('div')
  var percent = div.data('percent')
  var color = div.css('backgroundColor')
  $('.legend span').css('background-color', color).text(percent)
})