main.css

.section {
  margin-bottom: 200px;
}
.chart {
  display: inline-block;
  margin-right: 0;
  transition: all 0.3s ease;
}
.showOnHover {
  display: none;
}
.box {
  background-color: #eee;
  padding: 20px;
  cursor: pointer;
}
.box:hover .chart,
.box:focus .chart {
  /* -webkit-transform: scale(6) translate(7px, -20px);
  transform: scale(6) translate(7px, -20px); */
}

.popOverBox {
  background: pink;
  position: absolute;
  left: 20%;
  width: 60%;
  margin-top: 76px;
  display: none;
}
.thumbChartInTable {
  cursor: progress;
}

.thumbChartInTable:hover .popOverBox {
  border: 1px solid black;
  display: block;
}

.bar {
  position: relative;
  fill: #c79a00;
  /* height: 21px; */
  transition: fill 0.3s ease;
  cursor: pointer;
  font-family: Helvetica, sans-serif;
  display: inline-block;
}

.chart:hover .bar,
.chart:focus .bar {
  fill: #c79a00;
}

.bar:hover,
.bar:focus {
  fill: #9a7700 !important;
}
.bar:hover text,
.bar:focus text {
  fill: #ff4136;
}