Last week time spent
Cleaning data
Formulating hypothesis
EDA
Actual analytics

One of the ways of plotting numerical proportions in statistics is by using the donut chart.

In the above example, the time I spent working on a problem in the last week is shown.

Although I recommend using D3, Plotly or similar visualization libraries, creating a donut chart using pure HTML and CSS is a challenge for any web developer.

Below is the code for creating the above donut chart using pure CSS and HTML.

HTML
<div class="container">

    <div class="donut-chart-block blockAsh">

        <div class="donut-chart">

            <div id="section1" class="clip">

                <div class="item" data-rel="170"></div>

            </div>

            <div id="section2" class="clip">

                <div class="item" data-rel="20"></div>

            </div>

            <div id="section3" class="clip">

                <div class="item" data-rel="113"></div>

            </div>

            <div id="section4" class="clip">

                <div class="item" data-rel="-32"></div>

            </div>

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

        </div>

    </div>

</div>
CSS
.block {

    margin: 25px 25px 0 0;

    background: white;

    border-radius: 5px;

    float: left;

    width: 50%;

    overflow: hidden;

  }




  .donut-chart-block {

    overflow: hidden;

  }




  .donut-chart {

    position: relative;

    width: 200px;

    height: 200px;

    margin: 2rem auto;

    border-radius: 100%;

    float: left;

  }




  .donut-chart .center {

    background: white;

    position: absolute;

    top: 30px;

    left: 30px;

    height: 140px;

    width: 140px;

    border-radius: 70px;

  }




  .donut-chart .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);

  }




  #section1 .item {

    background-color: #E64C65;

    transform: rotate(170deg);

  }




  #section2 {

    transform: rotate(170deg);

  }




  #section2 .item {

    background-color: #11A8AB;

    transform: rotate(20deg);

  }




  #section3 {

    transform: rotate(190deg);

  }




  #section3 .item {

    background-color: #4FC4F6;

    transform: rotate(113deg);

  }




  #section4 {

    transform: rotate(-32deg);

  }




  #section4 .item {

    background-color: #FCB150;

    transform: rotate(32deg);

  }

14 Replies to “Donut chart using pure CSS and HTML”

  1. I’m commenting to make you be aware of what a notable experience my cousin’s daughter encountered going through yuor web blog. She noticed many issues, including what it’s like to have a great helping character to have men and women without difficulty completely grasp various complicated issues. You actually surpassed our own desires. Thanks for producing the invaluable, trustworthy, edifying and easy guidance on that topic to Emily.

  2. I in addition to my buddies were found to be reading through the good tips and tricks from your site while immediately developed a horrible feeling I never expressed respect to you for those strategies. These young boys came warmed to study them and have in effect actually been taking pleasure in these things. Many thanks for genuinely so thoughtful and also for considering these kinds of essential tips most people are really desperate to understand about. My personal sincere regret for not saying thanks to you sooner.

  3. I wish to show some thanks to this writer for bailing me out of this difficulty. Because of exploring throughout the online world and obtaining solutions which were not productive, I assumed my life was gone. Being alive minus the approaches to the problems you have solved all through your good guideline is a serious case, as well as the ones which could have adversely affected my entire career if I had not discovered your web blog. The ability and kindness in dealing with a lot of things was valuable. I don’t know what I would’ve done if I had not come across such a solution like this. I can at this point look forward to my future. Thanks very much for your high quality and amazing guide. I will not think twice to refer your site to any person who should receive care about this area.

  4. Thank you so much for giving everyone an exceptionally spectacular possiblity to read from this web site. It is often very pleasant and as well , packed with a good time for me personally and my office acquaintances to visit your web site more than three times per week to learn the newest guides you have. Not to mention, I am just actually amazed with the superb methods served by you. Some two points on this page are particularly the very best I’ve ever had.

  5. I wanted to put you that little bit of observation to be able to say thanks again considering the magnificent tips you’ve documented on this page. It’s strangely generous with you in giving easily all that most people could possibly have offered for sale as an electronic book to help make some bucks for themselves, mostly given that you could possibly have tried it in the event you wanted. The tips also served to provide a fantastic way to be aware that some people have the identical fervor just as my personal own to find out whole lot more in respect of this matter. Certainly there are lots of more enjoyable opportunities ahead for folks who find out your site.

  6. I wanted to draft you this little bit of word in order to say thanks a lot as before with your lovely concepts you’ve featured on this website. It is simply extremely generous with you to deliver without restraint what exactly numerous people would’ve advertised for an ebook to earn some profit for themselves, notably considering that you might well have done it if you ever considered necessary. These basics additionally served to be a good way to comprehend other individuals have a similar desire like my personal own to understand whole lot more on the topic of this condition. I believe there are millions of more enjoyable opportunities in the future for many who examine your blog.

  7. I am also writing to make you understand what a nice experience my friend’s girl obtained reading through your blog. She picked up such a lot of issues, which included what it is like to possess an excellent teaching heart to get the others smoothly grasp various complex subject areas. You truly surpassed my expected results. I appreciate you for displaying the helpful, healthy, informative not to mention cool thoughts on the topic to Julie.

  8. I precisely wanted to say thanks again. I’m not certain the things that I could possibly have made to happen in the absence of these methods provided by you regarding my situation. This has been the challenging matter in my view, however , being able to see a new specialized style you resolved the issue forced me to weep for fulfillment. I’m just happy for this assistance and in addition expect you are aware of a powerful job you happen to be accomplishing instructing people today thru your webpage. I’m certain you haven’t encountered all of us.

Leave a Reply

Your email address will not be published.