How to create graph like this with css?

Question

.donut-chart-block {
    overflow: hidden;
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 2rem auto;
    border-radius: 100%
}

.donut-chart .center {
    background: #00ced1;
    position: absolute;
    top: 30px;
    left: 30px;
    height: 140px;
    width: 140px;
    border-radius: 70px;
}

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

.item {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
}

#section1 {
    transform: rotate(0deg);
    height: 200px;
}

#section1 .item {
    background-color: #2b9a9e;
    transform: rotate(90deg);

}

#section2 {
    transform: rotate(90deg);
}

#section2 .item {
    background-color: black;
    transform: rotate(50deg);
}

#section3 {
    transform: rotate(140deg);
}

#section3 .item {
    background-color: gray;
    transform: rotate(60deg);
}

#section4 {
    transform: rotate(180deg);
}

<div class="container">
  <div class="donut-chart-block block">
    <div class="donut-chart">
      <div id="section1" class="clip">
        <div class="item" data-rel="21"></div>
      </div>
      <div id="section2" class="clip">
        <div class="item" data-rel="39"></div>
      </div>
      <div id="section3" class="clip">
        <div class="item" data-rel="31"></div>
      </div>
      <div id="section4" class="clip">
        <div class="item" data-rel="9"></div>
      </div>
      <div class="center"></div>
    </div>
  </div>
</div>

Please help me to create this shape with css.

I got the cirle code from stackoverflow. I have created circle but I can't change size of particular part.

This is the code by using css in html. How to customize the graph. By using css in html in order to make the graphs parts particular size change, but the graph cannot be customized. how to customize it. It is possible to customize in css?

Please edit the question and add your code. so we can understand what is going wrong in your code. https://stackoverflow.com/help/minimal-reproducible-example — Ritesh Khandekar, Jan 02 '20 at 10:22
You can take help from this https://stackoverflow.com/a/36624395/4990572 — Nandita Sharma, Jan 02 '20 at 10:29
@KuldipKoradia you are right. He should refer [help center](https://stackoverflow.com/help/asking) — Ritesh Khandekar, Jan 02 '20 at 11:04
Hey I was busy .So i was not available to reply you sorry for that.Now i have added some code please check thank you.@RiteshKhandekar — Suraj-Ui, Jan 03 '20 at 06:32

score 1 · Answer 1 · answered Jan 02 '20 at 10:30

I understand you want to make a chart and create a shape for each chart element ( with dynamic values ). I think it will be almost impossible to do this with pure css. I suggest to use library like http://recharts.org/en-US/examples/TwoLevelPieChart

score 1 · Accepted Answer · answered Jan 02 '20 at 10:34

You can draw circle sectors using plain css as explained in this answer. But it might be easier to use SVG.

body{
  background: darkturquoise;
}

.circle-sector {
  overflow: hidden;
  width: 100px;
  height: 50px;
  transform-origin: 50% 100%;
  position: absolute; 
}

.circle {
  margin-top: 
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background: white;
  transform-origin: 50% 100%;
  transform: rotate(60deg);
}

.center {
  width: 50px;
  height: 50px;
  margin-left: 25px;
  background: darkturquoise;
  border-radius: 50%;
  margin-top: 25px;
  transform: rotate(0deg);
  position: absolute;
}

.another-circle {
  width: 80px;
  margin-left: 10px;
  height: 40px;
  margin-top: 10px;
  
  border-radius: 40px 40px 0 0;
  background: black;
  transform-origin: 50% 100%;
  transform: rotate(140deg);
}

<div class="circle-sector" style="transform: rotate(0deg);">
  <div class="circle"></div>
</div>

<div class="circle-sector" style="transform: rotate(-120deg);">
  <div class="another-circle"></div>
</div>

<div class="center"></div>

The circle-class (or other-circle) will draw a semicircle. It is placed inside circle-sector which will hide everything inside which reaches outside its rectangular shape. So to get a circle sector we just need to rotate the inner semicircle around the center of the 'whole' circle. Finally, to get the hole in the center, just place a circle of the color of the background above. Because the use of transform: rotate made the other shapes 3D-ish, to get the center above we need to apply some transformation, e.g. rotate it by 0deg.

I have created full circle using your but i need to increase size of circle . — Suraj-Ui, Jan 06 '20 at 07:19
Just increase the width, height, border-radius and margin in all the css classes to scale _everything_ . If you want to increase the radius of a single sector you will have to increase the size of that sector but also add margin to all other sectors, as shown in my answer. That way you make sure your sectors still have the same center. — Corylus, Jan 07 '20 at 10:42
I tried but its changing all shapes of bars so i didn't understand how to handle it — Suraj-Ui, Jan 07 '20 at 11:16

How to create graph like this with css?

2 Answers2