CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmed
Ahmed

Reputation: 35

create half a pie with numbers on each slice in css

I am trying to create pie with numbers on each slice and showing only the top half of the pie so it looks more or less like this image:

enter image description here

My attempt so far is creating my slice like so: https://jsfiddle.net/xbou5704/

.pie_chart {
    position: relative;
    width: 500px;
    height: 500px;
}

.pie {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0 500px 500px 250px);
}

.slice {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0 250px 500px 0px);
}

.pie.one {
    transform: rotate(-90deg);
}

.pie.two {
    transform: rotate(-70deg);
}

.pie.three {
    transform: rotate(-50deg);
}

.pie.four {
    transform: rotate(-30deg);
}

.pie.five {
    transform: rotate(-10deg);
}

.pie.six {
    transform: rotate(10deg);
}

.pie.seven {
    transform: rotate(30deg);
}

.pie.eight {
    transform: rotate(50deg);
}

.pie.nine {
    transform: rotate(70deg);
}

.pie .slice {
    transform: rotate(20deg);
}

.pie.one .slice {
    background-color: #A7A9AC;
}

.pie.two .slice {
    background-color: #A7A9AC;
}

.pie.three .slice {
    background-color: #A7A9AC;
}

.pie.four .slice {
    background-color: #A7A9AC;
}

.pie.five .slice {
    background-color: #A7A9AC;
}

.pie.six .slice {
    background-color: #A7A9AC;
}

.pie.seven .slice {
    background-color: #A7A9AC;
}

.pie.eight .slice {
    background-color: #A7A9AC;
}

.pie.nine .slice {
    background-color: #A7A9AC;
}
<div class="pie_chart">
    <div class="pie one">
      <div class="slice">
        <div class="text">0</div>
      </div>
    </div>
    <div class="pie two">
      <div class="slice">
        <div class="text">10</div>
      </div>
    </div>
    <div class="pie three">
      <div class="slice">
        <div class="text">20</div>
      </div>
    </div>
    <div class="pie four">
      <div class="slice">
        <div class="text">30</div>
      </div>
    </div>
    <div class="pie five">
      <div class="slice">
        <div class="text">40</div>
      </div>
    </div>
    <div class="pie six">
      <div class="slice">
        <div class="text">50</div>
      </div>
    </div>
    <div class="pie seven">
      <div class="slice">
        <div class="text">60</div>
      </div>
    </div>
    <div class="pie eight">
      <div class="slice">
        <div class="text">70</div>
      </div>
    </div>
    <div class="pie nine">
      <div class="slice">
        <div class="text">80</div>
      </div>
    </div>
  </div>

For some reason my numbers are not showing, I am assuming it has something to do with clip: rect() in my css.

Once I get the css right, I will attempt to animate this pie with javascript so it rotates anticlockwise and dynamically display more numbers incremented by 10.

I am not too fussed about creating the actual slice visual. I just need the text to be positioned in the center of their actual slice as I will be animating the rotation of the text anticlockwise later with javascript.

Any help is much appreciated

Upvotes: 2

Views: 725

Answers (3)

fuzzybear
fuzzybear

Reputation: 2405

You need to undo the rotate on text otherwise the number will be wonky. 

.text{
transform: rotate(-10deg);
text-align:center;
margin-left: -15%;
margin-top:1em;
}

see working pen

Upvotes: 0

user7207170
user7207170

Reputation:

You can make use of absolute positioning with tweaking around the values for top and left:

.slice .text{
  color:white;
  font-weight:bold;
  transform: rotate(-10deg);
  position:absolute;
  top:5%;
  left:40%;
}

to align the text in the slice container.

.pie_chart {
    position: relative;
    width: 500px;
    height: 500px;
}

.pie {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0 500px 500px 250px);
}

.slice {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0 250px 500px 0px);
}

.pie.one {
    transform: rotate(-90deg);
}

.pie.two {
    transform: rotate(-70deg);
}

.pie.three {
    transform: rotate(-50deg);
}

.pie.four {
    transform: rotate(-30deg);
}

.pie.five {
    transform: rotate(-10deg);
}

.pie.six {
    transform: rotate(10deg);
}

.pie.seven {
    transform: rotate(30deg);
}

.pie.eight {
    transform: rotate(50deg);
}

.pie.nine {
    transform: rotate(70deg);
}

.pie .slice {
    transform: rotate(20deg);
}

.pie.one .slice {
    background-color: #A7A9AC;
}

.pie.two .slice {
    background-color: #A7A9AC;
}

.pie.three .slice {
    background-color: #A7A9AC;
}

.pie.four .slice {
    background-color: #A7A9AC;
}

.pie.five .slice {
    background-color: gold;
}

.pie.six .slice {
    background-color: #A7A9AC;
}

.pie.seven .slice {
    background-color: #A7A9AC;
}

.pie.eight .slice {
    background-color: #A7A9AC;
}

.pie.nine .slice {
    background-color: #A7A9AC;
}

.slice .text{
  color:white;
  font-weight:bold;
  position:absolute;
  transform: rotate(-10deg);
  top:5%;
  left:40%;
}
<div class="pie_chart">
    <div class="pie one">
      <div class="slice">
        <div class="text">0</div>
      </div>
    </div>
    <div class="pie two">
      <div class="slice">
        <div class="text">10</div>
      </div>
    </div>
    <div class="pie three">
      <div class="slice">
        <div class="text">20</div>
      </div>
    </div>
    <div class="pie four">
      <div class="slice">
        <div class="text">30</div>
      </div>
    </div>
    <div class="pie five">
      <div class="slice">
        <div class="text">40</div>
      </div>
    </div>
    <div class="pie six">
      <div class="slice">
        <div class="text">50</div>
      </div>
    </div>
    <div class="pie seven">
      <div class="slice">
        <div class="text">60</div>
      </div>
    </div>
    <div class="pie eight">
      <div class="slice">
        <div class="text">70</div>
      </div>
    </div>
    <div class="pie nine">
      <div class="slice">
        <div class="text">80</div>
      </div>
    </div>
  </div>

Upvotes: 3

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

You haven't added the class text. If you add this:

.text{
  text-align:center;
  z-index:2;
  padding-left:40%;
  padding-right:60%;
}

It will make the text div appear on top of the pie slice and center the numbers on the divs. If you want to center them you can play around with the padding.

Working fiddle here.

Upvotes: 0

Related Questions