диаграммы с закругленным делением на маске

Question

Я хотел, чтобы эта гистограмма отображалась под закругленным кругом в соответствии с прилагаемым изображением.

Я могу отображать гистограммы, но не могу вывести округленный / круговой делитель поверх диаграмм.или поместите диаграммы внутри круга так, чтобы диаграммы отображались внутри круга.Я приложил код.

Буду признателен за любую помощь.

$(function() {
  $("#bars li .bar").each( function( key, bar ) {
    var percentage = $(this).data('percentage');
    
    $(this).animate({
      'height' : percentage + '%'
    }, 1000);
  });
}); 

@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
  background: #30303A;
  font-family: Roboto;
}
#chart {
  width: 250px;
  height: 200px;
  margin: 30px auto 0;
  display: block;    
}
#chart #numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}
#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #444;
  position: relative;
  bottom: 30px;
}
#chart #numbers li:last-child {
  height: 30px;
}
#chart #numbers li span {
  color: #eee;
  position: absolute;
  bottom: 0;
  right: 10px;
}
#chart #bars {
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
  display: table-cell;
  width: 100px;
  height: 200px;
  margin: 0;
  text-align: center;
  position: relative;
}
#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 15px;
  background: #49E;
  position: absolute;
  bottom: 0;
    z-index: 1;
}
#chart #bars li .bar:before {
  color: white;
  content: attr(data-percentage) '%';
  position: relative;
  bottom: 25px;
}
#chart #bars li .bar:hover {
  background: #5AE;
  cursor: pointer;
}
#chart #bars li span {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -3em;
  left: 0;
  text-align: center;
}

#chart #bars li .bar.bar-1 {
    background: #cd9581 ;
}
#chart #bars li .bar.bar-2 {
    background: #002f54 ;
}
#chart #bars li .bar.bar-3 {
    background: #f5e0b8 ;
}

#mask {
    border: 1px solid #fff;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    z-index: 0;
    width: 200px;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
  <div id="mask">
    <ul id="bars">
          <li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
          <li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
    </ul>
  </div>
</div>

Answer 1

Здесь форма выглядит так, как на вашей картинке, надеюсь, это будет полезно для вас

Удалено margin-left:15px; из #chart #bars li .bar, добавлено overflow:hidden; в #mask и добавлено *От 1007 * до #chart #bars li .bar.bar-1 и #chart #bars li .bar.bar-2

$(function() {
  $("#bars li .bar").each( function( key, bar ) {
    var percentage = $(this).data('percentage');
    
    $(this).animate({
      'height' : percentage + '%'
    }, 1000);
  });
}); 

@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
  background: #30303A;
  font-family: Roboto;
}
#chart {
  width: 250px;
  height: 200px;
  margin: 30px auto 0;
  display: block;    
}
#chart #numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}
#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #444;
  position: relative;
  bottom: 30px;
}
#chart #numbers li:last-child {
  height: 30px;
}
#chart #numbers li span {
  color: #eee;
  position: absolute;
  bottom: 0;
  right: 10px;
}
#chart #bars {

  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
  display: table-cell;
  width: 100px;
  height: 200px;
  margin: 0;
  text-align: center;
  position: relative;
}
#chart #bars li .bar {
  display: block;
  width: 70px;
  
  background: #49E;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
#chart #bars li .bar:before {
  color: white;
  content: attr(data-percentage) '%';
  position: relative;
  bottom: 25px;
}
#chart #bars li .bar:hover {
  background: #5AE;
  cursor: pointer;
}
#chart #bars li span {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -3em;
  left: 0;
  text-align: center;
}

#chart #bars li .bar.bar-1 {
    background: #cd9581 ;
    width:100%;

}
#chart #bars li .bar.bar-2 {
    background: #002f54 ;
    width:100%;
}
#chart #bars li .bar.bar-3 {
    background: #f5e0b8 ;
}

#mask {
    overflow:hidden;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    z-index: 0;
    width: 200px;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
  <div id="mask">
    <ul id="bars">
          <li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>

          <li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
    </ul>
  </div>
</div>

Answer 2

Добавить overflow: hidden; к #mask